Scribd
Upload
4 views

Css Documentation Hashir

The document provides an overview of CSS (Cascading Style Sheets), detailing its role in defining the presentation of HTML elements across various media. It covers key concepts such as background color, margin and padding, box model, positioning, flexbox, grid layout, and more, with examples for each topic. Additionally, it explains properties like z-index, opacity, overflow, and pseudo-classes, illustrating how they can be used to enhance web design.

Uploaded by

rohit18raj10
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Css Documentation Hashir

The document provides an overview of CSS (Cascading Style Sheets), detailing its role in defining the presentation of HTML elements across various media. It covers key concepts such as background color, margin and padding, box model, positioning, flexbox, grid layout, and more, with examples for each topic. Additionally, it explains properties like z-index, opacity, overflow, and pseudo-classes, illustrating how they can be used to enhance web design.

Uploaded by

rohit18raj10
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

MD HASHIR IMTEYAZ

What is CSS?
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on screen, paper, or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External stylesheets are stored in CSS files

1. Background Color
The background-color property in CSS sets the background color of an element.
Syntax:
element {

background-color: color;

Example:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

< tle>Background Color Example</ tle>

<style>

.highlight {

background-color: yellow;

</style>

</head>

<body>

<p class="highlight">This paragraph has a yellow background.</p>

</body>

</html>

In this example, the paragraph with the class highlight will have a yellow background.
2. Margin and Padding
Margins and padding are crucial in controlling the spacing around and within elements, respectively.
Margin: The space outside an element's border.
Padding: The space between an element's content and its border.
Syntax:
element {

margin: value; /* Applies to all sides */

padding: value; /* Applies to all sides */

Example:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

< tle>Margin and Padding Example</ tle>

<style>

.box {

background-color: lightblue;

margin: 20px;

padding: 15px;

</style>

</head>

<body>

<div class="box">This box has margin and padding applied.</div>

</body>

</html>

In this example, the .box element has a margin of 20px and padding of 15px, creating space outside
and inside the element, respectively.
3. Box Model
The CSS box model describes the rectangular boxes generated for elements in the document tree and
consists of:
 Content: The actual content of the element.
 Padding: Clears an area around the content.
 Border: A border that goes around the padding and content.
 Margin: Clears an area outside the border.
Visual Representation:

Example:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

< tle>Box Model Example</ tle>

<style>

.box {

width: 150px;

padding: 10px;

border: 5px solid black;

margin: 20px;

background-color: lightgreen;

}
</style>

</head>

<body>

<div class="box">Box Model Example</div>

</body>

</html>

In this example, the .box element has specific width, padding, border, and margin, illustrating the box
model components.

4. Height and Width


The height and width properties define the dimensions of an element's content area.
Syntax:
element {

width: value;

height: value;

Example:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

< tle>Height and Width Example</ tle>

<style>

.rectangle {

width: 200px;

height: 100px;

background-color: coral;

</style>

</head>

<body>

<div class="rectangle"></div>
</body>

</html>

In this example, the .rectangle element has a width of 200px and a height of 100px.

5. ID and Class
IDs and classes are used to select and style elements.
 ID: Unique identifier for a single element. Defined with #idname.
 Class: Can be applied to multiple elements. Defined with .classname.
Example:
<!DOCTYPE html>

<html lang="en">

<head>

< tle>ID and Class Example</ tle>

<style>

#unique {

color: blue;

.common {

font-weight: bold;

</style>

</head>

<body>

<p id="unique">This paragraph has a unique ID.</p>

<p class="common">This paragraph shares a common class.</p>

<p class="common">This is another paragraph with the same class.</p>

</body>

</html>

In this example, the paragraph with the ID unique is styled with blue text, while paragraphs with the
class common are bold.

6. Z-Index
The z-index property determines the stacking order of positioned elements.
The z-index property specifies the stack order of an element (which element should be placed in front
of, or behind, the others).
An element can have a positive or negative stack order:
Default value is 0.
Syntax:
element {

posi on: rela ve | absolute | fixed | s cky;

z-index: number;

Example:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

< tle>Z-Index Example</ tle>

<style>

.box1 {

posi on: absolute;

le : 50px;

top: 50px;

width: 100px;

height: 100px;

background-color: red;

z-index: 1;

.box2 {

posi on: absolute;

le : 80px;

top: 80px;

width: 100px;

height: 100px;
background-color: blue;

z-index: 2;

</style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

</body>

</html>

In this example, .box2 overlaps .box1 because it has a higher z-index value.

7. Opacity
The opacity property sets the transparency level of an element.
Syntax:
element {

opacity: value; /* 0 (fully transparent) to 1 (fully opaque) */

Example:
<!DOCTYPE html>

<head>

< tle>Opacity Example</ tle>

<style>

.transparent {

opacity: 0.5;

background-color: purple;

width: 100px;

height: 100px;

</style>

</head>
<body>

<div class="transparent"></div>

</body>

</html>

In this example, the .transparent element has 50%

Certainly! Let's delve into each of the specified CSS topics, providing detailed explanations and
examples for each.

8. Position
The position property in CSS specifies how an element is positioned in the document. It accepts the
following values:
 static: The default value. Elements are positioned according to the normal flow of the
document.
 relative: The element is positioned relative to its normal position.
 absolute: The element is positioned relative to its nearest positioned ancestor. If none exists,
it's positioned relative to the initial containing block.
 fixed: The element is positioned relative to the viewport and doesn't move when scrolled.
 sticky: The element toggles between relative and fixed positioning based on the user's scroll
position
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

< tle>Posi on Example</ tle>

<style>

.container {

posi on: rela ve;

width: 300px;

height: 200px;

background-color: lightgray;

.box1 {

posi on: absolute;

top: 20px;
le : 20px;

width: 100px;

height: 100px;

background-color: coral;

.box2 {

posi on: fixed;

bo om: 10px;

right: 10px;

width: 100px;

height: 100px;

background-color: lightblue;

</style>

</head>

<body>

<div class="container">

<div class="box1">Absolute</div>

</div>

<div class="box2">Fixed</div>

</body>

</html>

In this example, .box1 is positioned absolutely within the .container, while .box2 is fixed relative to
the viewport.

9. Flexbox
he Flexible Box Layout (flexbox) is a layout model that allows responsive elements within a container
to be automatically arranged depending on screen size.t is particularly useful for creating complex
layouts and aligning items.
Key Properties:
 display: flex; Defines a flex container.
 flex-direction: Specifies the direction of the flex items (row, row-reverse, column, column-
reverse).
 justify-content: Aligns items along the main axis (flex-start, flex-end, center, space-between,
space-around).
 align-items: Aligns items along the cross axis (flex-start, flex-end, center, stretch).
 flex-wrap: Specifies whether items should wrap (nowrap, wrap, wrap-reverse).
Example:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

< tle>Flexbox Example</ tle>

<style>

.container {

display: flex;

flex-direc on: row;

jus fy-content: space-around;

align-items: center;

height: 200px;

background-color: lightgray;

.box {

width: 100px;

height: 100px;

background-color: coral;

</style>

</head>

<body>

<div class="container">

<div class="box">Box 1</div>

<div class="box">Box 2</div>

<div class="box">Box 3</div>

</div>
</body>

</html>

In this example, the .container is a flex container with three child .box elements. The boxes are spaced
evenly with justify-content: space-around and centered along the cross axis with align-items: center.

10. Inline and Block Elements


In HTML, elements are categorized as either inline or block-level:
 Block-level elements: Start on a new line and take up the full width available. Examples
include <div>, <p>, <h1>-<h6>, and <section>.-
 Inline elements: o not start on a new line and only take up as much width as necessary.
Examples include <span>, <a>, and <img>.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline and Block Elements</title>
<style>
.block {
display: block;
width: 100%;
background-color: lightblue;
}
.inline {
display: inline;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="block">This is a block-level element.</div>
<span class="inline">This is an inline element.</span>
<span class="inline">This is another inline element.</span>
</body>
</html>
In this example, the .block class is applied to a <div>, making it a block-level element that spans the
full width. The .inline class is applied to <span> elements, which are inline and only take up as much
space as needed.

11. Grid
CSS Grid Layout is a two-dimensional layout system for the web, allowing developers to create
complex layouts with rows and columns.
Key Properties:
 display: grid; Defines a grid container.
 grid-template-columns: Specifies the number and size of columns.
 grid-template-rows: Specifies the number and size of rows.
 grid-gap: Sets the gap between rows and columns.
 grid-column: Specifies how many columns an item spans.
 grid-row: Specifies how many rows an item spans.
Example:
<!DOCTYPE html>

<html>

<head>

<style>

.container {

display: grid;

grid-template-columns: auto auto auto;

background-color: dodgerblue;

padding: 10px;

.container > div {

background-color: #f1f1f1;

border: 1px solid black;

padding: 10px;

font-size: 30px;

text-align: center;

}
</style>

</head>

<body>

<div class="container">

<div>1</div>

<div>2</div>

<div>3</div>

<div>4</div>

<div>5</div>

<div>6</div>

<div>7</div>

<div>8</div>

</div>

</body>

</html>

We can adjust the gap size by using one of the following properties:
 column-gap
 row-gap
 gap

12. Columns
The CSS columns property is a shorthand for setting both the column-width and column-count
properties, allowing for the creation of multi-column layouts.his property enables content to flow into
multiple columns, similar to newspaper layouts.
Key Properties:
 column-count: Specifies the number of columns an element should be divided into.
 column-width: Specifies the ideal width of each column.
 column-gap: Sets the gap between columns.
 column-rule: A shorthand property for setting the width, style, and color of the line drawn
between columns.
Example:
<!DOCTYPE html>

<html>

<head>

<style>

.newspaper {

column-count: 3;

column-gap: 40px;

</style>

</head>

<body>

<h1>Specify the Gap Between Columns</h1>

<div class="newspaper">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod ncidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
ta on ullamcorper suscipit lobor s nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse moles e consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend op on congue
nihil imperdiet doming id quod mazim placerat facer possim assum.

</div>

</body>

</html>
13. Overflow
The overflow property in CSS controls what happens to content that exceeds the boundaries of its
container.It determines whether the content should be clipped, display scrollbars, or be visible outside
the container.
Values:
The overflow property has the following values:
 visible - Default. The overflow is not clipped. The content renders outside the element's box
 hidden - The overflow is clipped, and the rest of the content will be invisible
 scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
 auto - Similar to scroll, but it adds scrollbars only when necessary

Example:
div {
width: 200px;
height: 65px;
background-color: coral;
overflow: visible;
}

In this example, the .box class has a fixed width and height. If the content exceeds these dimensions,
scrollbars will appear due to the overflow: auto; property.

14. Pseudo-Classes
Pseudo-classes are keywords added to selectors that specify a special state of the selected elements.
They allow styling elements based on their state, position, or user interaction.
Common Pseudo-Classes:
 :hover: Applies when the user designates an element (with a pointing device), but does not
activate it.
 :active: Applies when an element is being activated by the user.
 :focus: Applies when an element has received focus.
 :nth-child(n): Matches elements based on their position in a group of siblings.
 :first-child: Matches an element that is the first child of its parent.
Example
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

< tle>Pseudo-Classes Example</ tle>

<style>

a:hover {

color: red;

p:first-child {

font-weight: bold;

</style>

</head>

<body>

<p>This paragraph is the first child and will be bold.</p>

<p>This paragraph is not the first child.</p>

<a href="#">Hover over this link to change its color.</a>

</body>

</html>

In this example, the link changes color when hovered over, and the first paragraph is bold due to the
:first-child pseudo-class.

15. Font Size: px, rem, vw


Font size in CSS can be specified using various units, each with its own behavior:
 px (Pixels): An absolute unit representing a fixed size.
 rem (Root Em): A relative unit that refers to the font size of the root element (<html>).
 vw (Viewport Width): A relative unit that is a percentage of the viewport's width.
Example:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

< tle>Font Size Units Example</ tle>

<style>

html {

font-size: 16px;

.px-size {

font-size: 24px;

.rem-size {

font-size: 1.5rem;

.vw-size {

font-size: 5vw;

</style>

</head>

<body>

<p class="px-size">This text is 24 pixels.</p>

<p class="rem-size">This text is 1.5 rem (24 pixels).</p>

<p class="vw-size">This text is 5% of the viewport width.</p>

</body>

</html>

16. Borders
Borders in CSS define the edges of an element. They can have different styles, widths, and colors.
Syntax:
selector {

border: width style color;

Example:
div {

border: 2px solid black;

This example applies a solid black border of 2px width to a <div> element.
Border Properties:
 border-width: Specifies the thickness of the border.
 border-style: Defines the style (solid, dashed, dotted, etc.).
 border-color: Sets the color of the border.
 border-radius: Rounds the corners of an element.

17. Fonts
Fonts define the text appearance in CSS. They can be customized using different font families, sizes,
weights, and styles.
Syntax:
selector {

font-family: "Arial", sans-serif;

font-size: 16px;

font-weight: bold;

font-style: italic;

Example:
p{

font-family: "Times New Roman", serif;

font-size: 18px;

font-weight: 700;

font-style: italic;

}
This applies the "Times New Roman" font to paragraphs with a size of 18px, bold weight, and italic
style.
Font Properties:
 font-family: Specifies the typeface.
 font-size: Determines the text size.
 font-weight: Controls the thickness of the text (e.g., normal, bold, bolder, lighter).
 font-style: Defines the text style (e.g., normal, italic, oblique).

18. Media Queries


Media queries allow developers to apply styles based on device characteristics like screen width,
height, or resolution.
Syntax:
@media (max-width: 600px) {

selector {

property: value;

Example:
<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, ini al-scale=1.0">

<style>

body {

background-color: lightgreen;

@media only screen and (max-width: 600px) {

body {

background-color: lightblue;

}
</style>

</head>

<body>

<p>Resize the browser window. When the width of this document is 600 pixels or less, the
background-color is "lightblue", otherwise it is "lightgreen".</p>

</body>

</html>

This changes the background color of the body to lightblue when the screen width is 600px or less.
Common Media Features:
 max-width: Targets devices with widths up to the specified value.
 min-width: Applies styles for screen sizes above a given width.
 orientation: Adjusts styles based on device orientation (portrait or landscape).
 resolution: Modifies styles based on screen resolution.

19. Animations
CSS animations bring motion to elements, enhancing user experience.
Syntax:
@keyframes anima on-name {

from {

property: value;

to {

property: value;

selector {

anima on: anima on-name dura on ming-func on delay itera on-count direc on;

Example:
@keyframes fadeIn {

from {

opacity: 0;

to {

opacity: 1;

div {

anima on: fadeIn 2s ease-in-out;

This makes a <div> fade in over 2 seconds.


Animation Properties:
 animation-name: Specifies the keyframes.
 animation-duration: Sets the time the animation takes to complete.
 animation-timing-function: Controls the speed curve (ease, linear, ease-in, etc.).
 animation-delay: Delays the start of the animation.
 animation-iteration-count: Defines how many times the animation runs (or infinite).

20. Layout
CSS layout techniques define how elements are arranged on the page.
Common Layout Techniques:
1. Flexbox:
.container {

display: flex;

jus fy-content: center;

align-items: center;

This centers items inside a container both horizontally and vertically.


2. Grid:
.grid-container {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 10px;

This creates a two-column grid with equal widths and a 10px gap.
3. Positioning:
.absolute-box {

posi on: absolute;

top: 50px;

le : 100px;

This places an element at an absolute position relative to its nearest positioned ancestor.
Layout Properties:
 display: Defines how an element is rendered (block, inline, flex, grid, etc.).
 position: Specifies how an element is positioned (static, relative, absolute, fixed, sticky).
 margin & padding: Control spacing around and inside elements.
 width & height: Set the dimensions of elements.

You might also like