CHAPTER-1

CSS rule consists of:

• Selector: Specifies the HTML element(s) to be styled.

• Declaration Block: Contains one or more style declarations enclosed in curly braces {}.

Each declaration includes:

• Property: The aspect of the element you want to style (e.g., color, font-size).
• Value: The specific value for the property (e.g., red, 16px).

Structure of a CSS Rule:

selector {

property: value;

property: value;

CSS SELECTOR:
1. Universal Selector (*)

• Description: Selects all elements on a webpage.

• Syntax: * { property: value; }
• Example:
*{
margin: 0;
padding: 0;
}

This removes default margin and padding from all elements.

2. Type Selector (Element Selector)

• Description: Selects all elements of a specific type (tag name).

• Syntax: elementName { property: value; }
• Example:
h1 {
color: blue;
}

All <h1> elements will have blue text.

3. Class Selector

• Description: Targets elements with a specific class attribute.

• Syntax: .className { property: value; }
• Example:

.highlight {
background-color: yellow;
}

Any element with the class highlight will have a yellow background.

Usage in HTML:

<p class="highlight">This text is highlighted.</p>

4. ID Selector

• Description: Targets a single element with a specific id attribute.

• Syntax: #idName { property: value; }
• Example:

#header {
font-size: 24px;
}
<div id="header">Welcome to My Website</div>
The element with id="header" will have a font size of 24px.

4. Grouping Selector
Description: Applies the same style to multiple selectors by separating them with commas.
Syntax: selector1, selector2 { property: value; }
Example:
h1, h2, h3 {
font-family: Arial, sans-serif;
}

All <h1>, <h2>, and <h3> elements will use the same font.

5. Descendant Selector

• Description: Targets elements nested within another element (any level of nesting).
• Syntax: ancestor descendant { property: value; }
Example:
div p {
color: green;
}

All <p> elements inside <div> elements will have green text.

6. Child Selector:
The child selector in CSS is used to select elements that are direct children of a specified parent

Syntax:
parent > child {
/* styles */
}

• parent: The element that contains one or more direct child elements.
• child: The element that is a direct child of the specified parent.

A direct child means that the child element is nested immediately inside the parent element, without
any intermediary elements.

For example:

<div class="parent">
<div class="child">I am a direct child</div>
<div>
<div class="child">I am NOT a direct child</div>
 </div>
</div>
In this case:
• The first .child is a direct child of .parent.
• The second .child is not a direct child because it is inside another <div>.

Using the selector .parent > .child will only target the first .child.

A descendant selector (parent child) selects all elements that are nested inside the parent at any level,
while a child selector (parent > child) selects only the immediate children.

7. General Sibling Selector

used to select all elements that are siblings of a specified element and appear after it in the
document structure, regardless of their immediate proximity.
Syntax:
element1 ~ element2 {
/* styles */
}

Html:
<div class="container">
<h1>Heading 1</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>
Css:
h1 ~ p {
color: green;
font-style: italic;
}

Output:

• The <h1> is the reference element.

• All <p> elements that are siblings of <h1> and come after it (Paragraph 1, Paragraph 2, and
Paragraph 3) are styled with color: green and font-style: italic.
8. Adjacent Sibling Selector

The adjacent sibling selector in CSS is used to select an element that is immediately preceded by a
specific sibling element. It targets elements that are at the same level (siblings) in the HTML document.

Syntax:

element1 + element2 {

property: value;

• element1: The first sibling element.

• element2: The second sibling element, which immediately follows element1.
• Only the immediately next sibling of element1 is selected.

Html:

<h1>Heading 1</h1>

<p>This paragraph is styled because it is the adjacent sibling of the h1.</p>

<p>This paragraph is NOT styled because it is not an adjacent sibling.</p>

Css:

h1 + p {

color: blue;

font-style: italic;

Result

• The first <p> immediately following <h1> is styled.

• The second <p> is unaffected.

9.ATTRIBUTE SELECTOR:
1. [attribute=value] Selector
Selects elements with an attribute that matches an exact value.

Syntax:

[attribute=value] {
property: value;
}

Example:

<input type="text">
<input type="password">
<input type="submit">

[type="password"] {
border: 2px solid red;
}

Explanation:

Only the <input type="password"> element is styled.

2. [attribute^=value] Selector
Selects elements whose attribute value starts with a specific value.

Syntax:

[attribute^=value] {
property: value;
}

Example:

<a href="https://example.com">Example</a>
<a href="http://example.org">Another Example</a>
<a href="ftp://example.net">FTP Example</a>
[href^="https"] {
color: green;
}

Explanation:

Only the links starting with https will be styled.

3. [attribute$=value] Selector
Selects elements whose attribute value ends with a specific value.

Syntax:

[attribute$=value] {
property: value;
}

Example:

<a href="file.doc">Document</a>
<a href="presentation.ppt">Presentation</a>
<a href="image.jpg">Image</a>

[href$=".doc"] {
font-weight: bold;
}

Explanation:

Only the <a href="file.doc"> element is styled because its href ends with .doc.

4. [attribute*=value] Selector
Selects elements whose attribute value contains a specific value.
Syntax:

[attribute*=value] {
property: value;
}

Example:

<a href="https://docs.example.com">Docs</a>
<a href="https://example.com/download">Download</a>
<a href="https://support.example.com">Support</a>

[href*="example"] {
color: black;
}

Explanation:

All links containing example in their href attribute are styled.

------------------------------------------------------------------------------------------------------------------------------

CHAPTER-2

MEASUREMENT UNIT:

Absolute Units in CSS

Absolute units are fixed and represent physical measurements. They remain constant regardless of the
screen size, resolution, or zoom level.
1. px (Pixels)

• Description: A single dot on the screen, scaled based on the device's resolution.
• Usage:

div {
width: 200px;
height: 100px;
}

• Explanation: This defines a box that is 200 pixels wide and 100 pixels tall. Pixels are the most
commonly used unit in web design for consistent sizing across devices.

2. cm (Centimeters), mm (Millimeters), in (Inches)

• Description:
o 1in = 96px (on standard displays)
o 1cm = 37.8px
o 1mm = 3.78px
• Usage:

div {
width: 10cm;
height: 5mm;
}

• Explanation: These units are often used for print stylesheets. For example, a div with width: 10cm
will appear exactly 10 centimeters wide in print.

3. pt (Points)

• Description: Traditionally used in print.

o 1pt = 1/72 of an inch.
o 1 inch = 96 pixels
o Therefore, 1pt= 96/72=1.333px

• Usage
p{
font-size: 12pt;
}

• Explanation: A font-size of 12pt corresponds to 12/72 of an inch, or 1/6 of an inch. Points are
ideal for maintaining consistent text sizes in print media.

4. pc (Picas)

• Description: A pica is another print measurement.

• 1 pica = 12 points
• 1 point = 1.333px (standard at 96 DPI)
• Therefore, 1 pica = 16px.

Usage:

p{
padding: 2pc;
}

• Explanation: Padding of 2pc equals 24pt (or 2/6 of an inch). Picas are less commonly used but
are helpful for precise layouts in print design.

RELATIVE UNITS IN CSS:

CSS Measurement Units: In-Depth Explanation

1. em (Element Relative Measurement)

What is em?

• em is relative to the font size of the parent element.

• If the parent has a font size of 16px:
o 1em = 16px
o 2em = 32px (twice the parent size)

Key Characteristics:
 • Cascades in nested elements.
• Multiplies with nested elements, so use carefully to avoid unexpected sizes.

Usage Example:

/* Parent font size is 16px */

div {
font-size: 1.5em; /* 16px * 1.5 = 24px */
}

Nested Example (Cascading Effect):

/* Parent font size is 16px */

.parent {
font-size: 2em; /* 16px * 2 = 32px */
}
.child {
font-size: 0.5em; /* 32px * 0.5 = 16px */
}

2. rem (Root em)

What is rem?

• rem is relative to the font size of the root element (html).

• Unlike em, it does not cascade; it’s always based on the root size.

Default Root Size:

• Most browsers default the root (html) font size to 16px.

• If you set html { font-size: 10px; }, then 1rem = 10px.

Usage Example:

html {
font-size: 16px; /* Default */
}
h1 {
font-size: 2rem; /* 16px * 2 = 32px */
}
3. % (Percentage)

What is %?

• Percentage-based measurements depend on the size of the parent element.

o width: 50%; is half the width of the parent.
o font-size: 150%; is 1.5 times the parent’s font size.

Usage Example:

.container {
width: 80%; /* 80% of parent’s width */
}
.child {
font-size: 120%; /* 1.2 times the parent font size */
}

Height and Percentage:

• Percentage height requires the parent to have a defined height.

.parent {
height: 500px;
}
.child {
height: 50%; /* 250px */
}

4. vw (Viewport Width)

What is vw?

• vw is relative to the width of the viewport.

o 1vw = 1% of the viewport width.
o If the viewport width is 1000px, 1vw = 10px.

Usage Example:

div {
width: 50vw; /* 50% of the viewport width */
}

Practical Application:

• Full-screen layouts:
section {
width: 100vw; /* Full width */
height: 100vh; /* Full height */
}

5. vh (Viewport Height)

What is vh?

• vh is relative to the height of the viewport.

o 1vh = 1% of the viewport height.
o If the viewport height is 800px, 1vh = 8px.

Usage Example:

header {
height: 20vh; /* 20% of the viewport height */
}

6. fr (Fraction Unit)

What is fr?

• fr is a flexible unit used in CSS Grid.

• It divides space into proportional parts:
o 1fr = one part of the available space.
o 2fr = twice as much as 1fr.

Usage Example:

.container {
display: grid;
grid-template-columns: 1fr 2fr; /* Two columns: 1/3 and 2/3 of space */
}

Combining fr with Fixed Units:

.container {
grid-template-columns: 200px 1fr 2fr;
}
 • First column: fixed 200px.
• Remaining space is divided into 1:2 proportions.

Practical Application:

• Flexible layouts with dynamic resizing.

Example: Create a grid with equal columns:

.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Three equal columns */
}

----------------------------------------------------------------------------------------------------------------------------

BACKGROUND-CHAPTER-3

1)background-color:
-Sets the background color of an element.
Syntax: background-color: lightblue;
2)background-image:
-set an image as a background
Syntax: background-image: url('image.jpg');

3)background-position:
- used to specify the starting position of a background image within an element.
Syntax: background-position: value;

Values

1. Keyword values:
a. left top: Positions the background image at the top-left corner.
b. left center: Positions the background image at the left and vertically centered.
c. left bottom: Positions the background image at the bottom-left corner.
d. right top: Positions the background image at the top-right corner.
e. right center: Positions the background image at the right and vertically centered.
f. right bottom: Positions the background image at the bottom-right corner.
g. center top: Positions the background image at the top and horizontally centered.
h. center center : Centers the background image both horizontally and vertically.
i. center bottom: Positions the background image at the bottom and horizontally centered.
2. Length values:
a. You can specify exact positions using length units such as px, em, %, etc.
Example:
background-position: 50px 20px; /* 50px from the left and 20px from the top */

3. Percentage values:
a. Percentages define the position relative to the dimensions of the container.
Example:
background-position: 50% 50%; /* Center the image */

4. Combination of keyword and length/percentage:

Example:
background-position: left 20px top 10px;

4)background-size:
Values

1. Keyword values:
a. auto: Keeps the original size of the background image.
background-size: auto; /* Default value */

b. cover: Scales the background image to cover the entire container while maintaining its
aspect ratio. Some parts of the image may be cropped.
background-size: cover;

c. contain: Scales the background image to fit entirely within the container while maintaining
its aspect ratio. Some empty space may be left.
background-size: contain;

2. Length values:
a. Specify exact dimensions using units like px, em, rem, etc.
background-size: 200px 100px; /* Width: 200px, Height: 100px */

3. Percentage values:
a. Specify dimensions as a percentage of the container.
background-size: 50% 50%; /* Half the width and height of the container */

4. Single Value:
a. If only one value is specified, it sets the width, and the height is calculated automatically to
maintain the aspect ratio.
background-size: 100px; /* Width: 100px, Height: auto */
5)background-repeat:
The background-repeat property determines how a background image is repeated (tiled) within an
element. It helps create patterns or control how images fill the background area.
Syntax:
background-repeat: value;

Values

1. repeat (default):
a. Repeats the background image both horizontally and vertically.
background-repeat: repeat;

2. repeat-x:
a. Repeats the background image only horizontally.
background-repeat: repeat-x;

3. repeat-y:
a. Repeats the background image only vertically.
background-repeat: repeat-y;

4. no-repeat:
a. Displays the background image once without repeating.
background-repeat: no-repeat;

5. space:
a. Distributes the background images evenly with equal spacing between them. The first and
last images align with the container edges.
background-repeat: space;

6. round:
a. Repeats the background images to fill the container, adjusting their size (stretching or
shrinking) to avoid clipping.
background-repeat: round;
6)backround-attachment:

specifies whether a background image should scroll with the content, stay fixed, or scroll within its
containing element.

Syntax:

background-attachment: value;

Values

1. scroll (default)
a. The background image scrolls along with the element’s content.
b. This means the background moves as you scroll down or across the page.
body {
background-image: url('example.jpg');
background-attachment: scroll;
}

2. fixed
a. The background image stays fixed in place relative to the viewport, even when the content
of the element scrolls.
body {
background-image: url('example.jpg');
background-attachment: fixed;
}

3. local
a. The background image scrolls with the content of the element, including when the element
has a scrollbar.
b. In contrast to scroll, local keeps the background in sync with the scrolling of the content
inside an element.
div {
height: 200px;
overflow: auto;
background-image: url('example.jpg');
background-attachment: local;
}
Key Notes

• The background-attachment property only applies to block-level elements and is not applicable for inline
elements.
• The property works best when combined with background-size, background-position, and background-
repeat for complete control over the background.

7)background-clip:

specifies how far the background (color or image) should extend within an element. It determines
whether the background covers the content box, padding box, or border box of the element.

Syntax:

background-clip: value;

Values

1. border-box (default)
a. The background extends to the outer edge of the border (includes content, padding, and
border areas).
b. The background is visible under the border (if the border is transparent or semi-
transparent).
div {
background: url('example.jpg') no-repeat center center;
background-clip: border-box;
}

2. padding-box
a. The background extends only to the outer edge of the padding (excludes the border).
b. The background does not appear under the border.
div {
background: url('example.jpg') no-repeat center center;
background-clip: padding-box;
}

3. content-box
a. The background is confined to the content area (excludes the border and padding).
div {
background: url('example.jpg') no-repeat center center;
background-clip: content-box;
}
8)background-orgin:
specifies the starting area (origin) for the background image or background position. It determines
whether the background image positioning is calculated relative to the border box, padding box, or
content box of an element.
Syntax:
background-origin: value;

Values

1. padding-box (default)
a. The background image starts relative to the padding box (inside the padding).
b. The background does not cover the border area.
div {
background-image: url('example.jpg');
background-origin: padding-box;
}

2. border-box
a. The background image starts relative to the border box (outer edge of the element,
including the border).
div {
background-image: url('example.jpg');
background-origin: border-box;
}

3. content-box
a. The background image starts relative to the content box (inside the padding).
div {
background-image: url('example.jpg');
background-origin: content-box;
}
9)background-blend-mode;
defines how an element’s background layers should blend with each other and the element's
background color. It’s useful for creating artistic effects by combining multiple backgrounds or colors.
Syntax:
background-blend-mode: blend-mode;

Blend Modes

1. normal
a. Default mode. No blending occurs; layers appear as they are.
2. multiply
a. Multiplies the background layers’ colors, resulting in darker tones.
3. screen
a. Multiplies the inverse of the colors, resulting in lighter tones.
4. overlay
a. Combines multiply and screen, giving brighter highlights and darker shadows.
5. darken
a. Retains the darkest color by comparing each background layer.
6. lighten
a. Retains the lightest color by comparing each background layer.
7. color-dodge
a. Brightens the background based on the top layer's color.
8. color-burn
a. Darkens the background based on the top layer's color.
9. hard-light
a. Combines multiply and screen, depending on the top layer's brightness.
10. soft-light
a. Similar to hard-light, but with softer effects.
11. difference
a. Subtracts the lighter color from the darker one, creating a high-contrast effect.
12. exclusion
a. Similar to difference, but with lower contrast.
13. hue
 a. Applies the hue (color) of the top layer to the luminosity and saturation of the bottom layer.
14. saturation
a. Applies the saturation of the top layer to the luminosity and hue of the bottom layer.
15. color
a. Applies the hue and saturation of the top layer while preserving the luminosity of the
bottom layer.
16. luminosity
a. Applies the luminosity of the top layer while preserving the hue and saturation of the
bottom layer.