Scribd
Upload
7 views31 pages

CSS_Notes

CSS, or Cascading Style Sheets, is used to style HTML elements, controlling aspects like colors, fonts, and layouts. It allows for separation of content and design, promotes consistency across multiple pages, and improves loading speed. Various types of CSS include inline, internal, and external styles, with selectors and properties that define how elements are displayed.

Uploaded by

roopa170121
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views31 pages

CSS_Notes

CSS, or Cascading Style Sheets, is used to style HTML elements, controlling aspects like colors, fonts, and layouts. It allows for separation of content and design, promotes consistency across multiple pages, and improves loading speed. Various types of CSS include inline, internal, and external styles, with selectors and properties that define how elements are displayed.

Uploaded by

roopa170121
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

CSS

1. What is CSS ?
CSS stands for Cascading Style Sheets.
It’s used to style HTML elements — control colors, fonts, spacing, layout, and more.
Example:
<p style="color: blue;">This is a blue paragraph.</p>

2. Why use CSS? (Advantages)


• Separation of content & design – HTML for structure, CSS for styling.
• Consistency – One CSS file can style multiple pages.
• Faster changes – Change style in one place and apply everywhere.
• Better look & feel – More control over fonts, colors, layouts.
• Improves loading speed – Less repeated styling in HTML.

3. CSS Syntax
selector {
property: value;
}
Example:
h1 {
color: red;
font-size: 24px;
}
Selector: Which element to style (e.g., h1)
Property: What to style (e.g., color)
Value: The setting for the property (e.g., red)

4. Types of CSS / Style specification formats


• Inline Style
• Internal Style
• External Style

4.1 Inline StyleSheet


Written directly inside the HTML tag using the style attribute.
Used for quick styling of a single element.
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: red; text-align: center;">This is Inline CSS</h1>
<p style="font-size: 18px; color: blue;">This paragraph is styled using Inline CSS.</p>
</body>
</html>
4.2 Internal / Document StyleSheet
Written inside the <style> tag in the HTML <head> section.
Used when you want styles for a single webpage only.
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
h1 {
color: green;
text-align: center;
}
p{
font-size: 18px;
color: purple;
}
</style>
</head>
<body>
<h1>This is Internal CSS</h1>
<p>This paragraph is styled using Internal CSS.</p>
</body>
</html>

4.3 External StyleSheet


Written in a separate .css file, then linked using <link> tag in <head>.
Used when you want one stylesheet for multiple pages (best for real projects).

Example:

HTML File ([Link])


<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>This is External CSS</h1>
<p>This paragraph is styled using External CSS.</p>
</body>
</html>
CSS File ([Link])
h1 {
color: orange;
text-align: center;
}
p{
font-size: 18px;
color: navy;
}

🎯 Quick Comparison

Type Where Written When to Use Example Use Case

Inline Inside tag Small, quick fixes Color one word

Internal <style> in head Styling single page Portfolio page

External .css file Large/multiple pages College website

5. Selector forms
1. Element Selector / Type Selector
2. ID Selector
3. Class Selector
4. Universal Selector
5. Group Selector
6. Descendant Selector
7. Child Selector
1. Element Selector
Definition: Selects all elements of a specific type (tag name). \

Example Program :
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: blue;
}
</style>
</head>
<body>
<p>This paragraph will appear in blue color.</p>
</body>
</html>
2. ID Selector
Definition: Selects a single unique element by its ID.

Example Program :

<!DOCTYPE html>
<html>
<head>
<style>
#main-header {
color: green;
}
</style>
</head>
<body>
<h1 id="main-header">This is a green header</h1>
</body>
</html>

3. Class Selector
Definition: Selects elements with a specific class name.

Example Program :

<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p class="highlight">This paragraph has a yellow background.</p>
<p>This paragraph has normal background.</p>
</body>
</html>

4. Universal Selector
Definition: Selects all elements in the document.

Example Program :

<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph with no margin or padding.</p>
</body>
</html>

5. Group Selector

Definition: Apply the same styles to multiple selectors at once.

Example Program:

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
color: purple;
}
</style>
</head>
<body>
<h1>Heading 1 in purple</h1>
<h2>Heading 2 in purple</h2>
<p>Paragraph in purple</p>
</body>
</html>

6. Descendant Selector
Definition: Selects elements inside another element (at any depth).

Example Program :

<!DOCTYPE html>
<html>
<head>
<style>
div p {
color: red;
}
</style>
</head>
<body>
<div>
<p>This paragraph is inside div and red.</p>
</div>
<p>This paragraph is outside div and normal color.</p>
</body>
</html>
7. Child Selector
Definition: Selects only direct child elements of a parent.

Example Program:

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
font-weight: bold;
}
</style>
</head>
<body>
<div>
<p>This is a bold paragraph (direct child).</p>
<section>
<p>This is a normal paragraph (not direct child).</p>
</section>
</div>
</body>
</html>
6. Box Model
What is the CSS Box Model?

Every HTML element is treated like a box, and it’s made up of 4 layers around the content.

Layers of the Box Model

1. Content – The actual text, image, or HTML inside the element.

2. Padding – Space between content and border (inside background).

3. Border – The edge or outline around the padding and content.

4. Margin – Space outside the border, separating the element from others.

Each element’s content, padding, border and margin properties can be adjusted. All the time, padding, border
and margin properties are applied to each element implicitly or explicitly.

Example Program:

<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 300px;
padding: 20px;
border: 5px solid blue;
margin: 30px;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="box">
This is a box demonstrating the CSS Box Model.<br> Content → Padding → Border →
Margin
</div>
</body>
</html>
HTML elements are categorized as block-level elements and inline elements.

What is Block-level element?

Block-level elements by default start on a new line and occupies full page width. Width and height properties
are respected to block-level elements. Using display property, block-level elements can be converted to block-
inline, inline, etc., elements, Few block-level elements are <div>, <p>, <pre>, <h1>,<h2>,<ul>,<ol>.

What is inline element?

Inline elements by default occupies only required width based on content size. Width and height properties are
not respected/applicable to inline elements. Using display property, inline elements can be converted to block,
block-inline, etc., elements. Few inline elements are <a>, <span>, <img>, <i>.

Block-level vs Inline elements.

1. Block-level elements by default start on a new line and occupies full page width. But, Inline elements by
default occupies only required width based on content size.

2. Width and height properties are applicable to block-level element but not to inline elements.

3. Inline elements can be placed inside the block-level element, but block-level elements can not be
placed inside the inline element.

4. All padding and margin properties affect block-level elements.

5. Following padding and margin properties don’t affect inline elements.

[Link]-top

[Link]-bottom

[Link]-top

[Link]-bottom

Remaining padding and margin properties only affects inline elements.

Following example shows box model (on right side top) diagram for left side specified code.
7. CSS Text

1. Text Color

Sets the color of the text.

p{
color: blue;
}
2. Text Alignment

• Aligns text left, right, center, or justify.

h1 {
text-align: center;
}
p{
text-align: justify;
}
3. Text Decoration

• Adds or removes decorations (underline, line-through, etc.).

a{
text-decoration: none; /* removes underline */
}
h2 {
text-decoration: underline;
}
p{
text-decoration: line-through;
}
4. Text Transformation

• Controls uppercase, lowercase, capitalize.

h1 {
text-transform: uppercase;
}
p{
text-transform: capitalize;
}
5. Text Spacing

• Letter spacing: space between letters.


• Word spacing: space between words.
• Line height: vertical spacing between lines.
• Text indent: first-line indentation.
p{
letter-spacing: 2px;
word-spacing: 5px;
line-height: 1.8;
text-indent: 50px;
}
6. Text Shadow

• Adds shadow effect to text.

h1 {
text-shadow: 2px 2px 5px gray; /* horizontal, vertical, blur, color */
}
Example Program (All in One)

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: darkblue;
text-align: center;
text-transform: uppercase;
text-shadow: 2px 2px 5px gray;
}

h2 {
text-decoration: underline;
text-align: left;
color: darkgreen;
}

p{
color: purple;
text-align: justify;
letter-spacing: 2px;
word-spacing: 5px;
line-height: 1.6;
text-indent: 40px;
}
</style>
</head>
<body>
<h1>CSS Text Example</h1>
<h2>Subheading Styled with CSS</h2>
<p>
This is a paragraph to demonstrate different CSS text properties.
Notice the spacing, alignment, indentation, and decoration applied
to the content using CSS.
</p>
</body>
</html>
8. CSS Font Properties
Fonts make text readable and attractive. CSS gives us control over type, size, style, and weight.

1. font-family

• Defines the type of font used.

• You can use:

o Generic fonts: serif, sans-serif, monospace, cursive, fantasy

o Specific fonts: Arial, Times New Roman, Verdana

p{
font-family: Arial, sans-serif;
}
2. font-size

• Sets the size of the font.

• Units: px, em, %, rem

h1 {
font-size: 36px;
}
p{
font-size: 18px;
}
3. font-style

• Controls normal, italic, or oblique style.

p{
font-style: italic;
}
4. font-weight

• Controls the thickness (boldness) of text.

• Values: normal, bold, lighter, bolder, or numeric (100–900).

h2 {
font-weight: bold;
}
p{
font-weight: 300;
}
5. font-variant

• Displays text in small-caps (uppercase but smaller).

p{
font-variant: small-caps;
}
Example Program (All Font Properties)

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-family: "Times New Roman", serif;
font-size: 36px;
font-style: italic;
font-weight: bold;
text-align: center;
}

h2 {
font-family: Verdana, sans-serif;
font-size: 28px;
font-weight: 600;
color: darkblue;
}

p{
font-family: Arial, sans-serif;
font-size: 18px;
font-style: normal;
font-variant: small-caps;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>CSS Font Example</h1>
<h2>Subheading Styled with Fonts</h2>
<p>
This is a paragraph demonstrating different CSS font properties.
Notice the font family, size, weight, and variant applied to the content.
</p>
</body>
</html>
9. CSS List Properties
1. list-style-type

• Defines the type of bullet or numbering.

Unordered list options:

• disc (●) – default


• circle (○)
• square (■)
• none (no bullet)
Ordered list options:

• decimal (1, 2, 3) – default


• lower-alpha (a, b, c)
• upper-alpha (A, B, C)
• lower-roman (i, ii, iii)
• upper-roman (I, II, III)
ul {
list-style-type: square;
}

ol {
list-style-type: upper-roman;
}
2. list-style-position

• Controls whether the bullet/number appears inside or outside the text block.

ul {
list-style-position: inside;
}
3. list-style-image

• Replaces bullets with a custom image.

ul {
list-style-image: url("[Link]");
}
Example Program (CSS Lists)

<html>
<head>
<style>
/* Unordered List */
ul {
list-style-type: square;
list-style-position: inside;
color: darkblue;
font-size: 18px;
}
/* Ordered List */
ol {
list-style-type: upper-roman;
list-style-position: outside;
color: darkgreen;
font-size: 18px;
}
</style>
</head>
<body>
<h2>Unordered List Example</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h2>Ordered List Example</h2>
<ol>
<li>Introduction</li>
<li>Chapters</li>
<li>Conclusion</li>
</ol>
</body>
</html>

10. CSS Links


Links can be styled in different states using pseudo-classes:
a:link { color: blue; } /* Normal link */
a:visited { color: purple; } /* After clicking */
a:hover { color: red; } /* On mouse hover */
a:active { color: green; } /* While clicking */

11. CSS Positioning


Controls how elements are placed:
• static → default, normal flow
• relative → relative to its normal position
• absolute → positioned relative to nearest ancestor
• fixed → fixed on screen (doesn’t scroll)
• sticky → behaves like relative, but sticks when scrolling
static (Default)
• Elements are positioned according to the normal flow of the document.
• No special positioning applied.
position: static;

relative
• The element is positioned relative to its normal position.
• You can use top, left, right, and bottom to move it from the default spot.

position: relative;
top: 20px; /* Moves element 20px down */
left: 30px; /* Moves element 30px to the right */
absolute
• The element is positioned relative to its nearest positioned ancestor (non-static).
• If no ancestor has a position, it is relative to the document body.
position: absolute;
top: 50px;
left: 100px;
fixed
• The element is positioned relative to the browser window (viewport).
• Stays fixed when the page scrolls.
position: fixed;
top: 10px;
right: 10px;
Example Program – All Position Types
<!DOCTYPE html>
<html>
<head>
<style>
.static-box {
position: static;
background-color: lightblue;
padding: 10px;
margin-bottom: 20px;
}
.relative-box {
position: relative;
top: 20px;
left: 30px;
background-color: lightgreen;
padding: 10px;
margin-bottom: 20px;
}
.absolute-box {
position: absolute;
top: 150px;
left: 50px;
background-color: lightcoral;
padding: 10px;
}
.fixed-box {
position: fixed;
top: 10px;
right: 10px;
background-color: lightgoldenrodyellow;
padding: 10px;
}
</style>
</head>
<body>
<div class="static-box">
Static Position (Normal Flow)
</div>
<div class="relative-box">
Relative Position (Moved from normal position)
</div>
<div class="absolute-box">
Absolute Position (Based on document or nearest positioned parent)
</div>
<div class="fixed-box">
Fixed Position (Stays at top-right even when scrolling)
</div>
</body>
</html>

12. CSS Z-Index


1. The z-index property controls the stacking order of overlapping elements.
2. Elements with a higher z-index appear in front of those with a lower z-index.
3. Only works on elements with a position value other than static (e.g., relative, absolute, fixed).
• Controls which element appears in front.
• Higher z-index = on top.
.box1 { position: absolute; z-index: 1; }
.box2 { position: absolute; z-index: 2; }
<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
position: absolute;
top: 50px;
left: 50px;
width: 200px;
height: 200px;
background-color: red;
z-index: 1;
}
.box2 {
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: blue;
z-index: 2;
}
.box3 {
position: absolute;
top: 150px;
left: 150px;
width: 200px;
height: 200px;
background-color: green;
z-index: 3;
}
</style>
</head>
<body>
<div class="box1">Box 1 (Red)</div>
<div class="box2">Box 2 (Blue)</div>
<div class="box3">Box 3 (Green)</div>
</body>
</html>
Advanced CSS
1. CSS Rounded Corners

➤ What is it?

By default, HTML elements have sharp (square) corners.


Using CSS, we can make the corners rounded using the border-radius property.

Syntax:

selector {
border-radius: value;
}
• value → Can be in pixels (px) or percentage (%).

Example 1 – Simple Rounded Corners

<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightblue;
border: 2px solid blue;
border-radius: 15px; /* Rounded corners */
}
</style>
</head>
<body>
<h2>CSS Rounded Corners Example</h2>
<div class="box">
This box has rounded corners.
</div>
</body>
</html>

Example 2 – Fully Rounded (Circle) - This creates a perfect circle.


CSS
.circle {
width: 150px;
height: 150px;
background-color: pink;
border-radius: 50%;
}
HTML
<div class="circle"></div>
Example 3 – Different Radius for Each Corner

.custom-box {
width: 200px;
height: 100px;
background-color: lightgreen;
border: 2px solid green;
border-radius: 10px 20px 30px 40px;
}
ORDER ---> top-left top-right bottom-right bottom-left

Summary – Border Radius Effects

Value Result

border-radius: 0; Sharp corners (default)

border-radius: 10px; Slightly rounded corners

border-radius: 50%; Circle (if width = height)

border-radius: 10px 20px 30px 40px; Custom corners


2. CSS Shadow Effect

CSS allows us to add shadow effects to both text and boxes (elements) using two main properties:

1. box-shadow

Adds shadow around any element (like <div>, <img>, etc.).

➤ Syntax:

selector {
box-shadow: horizontal-offset vertical-offset blur-radius color;
}
➤ Example:

div {
width: 200px;
height: 100px;
background-color: lightblue;
box-shadow: 5px 5px 10px gray;
}
The box gets a shadow 5px to the right, 5px down, with a blur of 10px.

Example Program – Box Shadow

<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightgreen;
box-shadow: 10px 10px 15px rgba(0,0,0,0.5);
margin: 20px;
}
</style>
</head>
<body>
<h2>CSS Box Shadow Example</h2>
<div class="box">
This box has a shadow effect.
</div>
</body>
</html>
3. text-shadow
Adds shadow to text.

➤ Syntax:

selector {
text-shadow: horizontal-offset vertical-offset blur-radius color;
}

➤ Example:

h1 {
text-shadow: 2px 2px 5px gray;
}

Example Program – Text Shadow

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 3px 3px 5px black;
color: orange;
}
</style>
</head>
<body>
<h1>Shadowed Text Example</h1>
</body>
</html>
Summary – Shadow Effects

Property Purpose

box-shadow Adds shadow to element boxes

text-shadow Adds shadow to text content


4. CSS 2D Transforms

What are CSS 2D Transforms?

2D Transforms let us move, rotate, scale, or skew HTML elements in 2-dimensional space.

1. translate() – Move Element

Moves the element along X and Y axes.

div {
transform: translate(50px, 30px); /* Moves right by 50px and down by 30px */
}
2. rotate() – Rotate Element

Rotates the element by an angle.

div {
transform: rotate(45deg); /* Rotates by 45 degrees */
}
3. scale() – Resize Element

Scales the element by a factor.

div {
transform: scale(1.5); /* Increases size by 1.5x */
}
4. skew() – Skew Element

Tilts the element along X and Y axes.

div {
transform: skew(20deg, 10deg); /* Skews horizontally by 20°, vertically by 10° */
}
Example Program (All Transforms Together)

<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: lightcoral;
margin: 20px;
text-align: center;
line-height: 100px;
color: white;
}

/* Translate Example */
.translate {
transform: translate(50px, 30px);
}

/* Rotate Example */
.rotate {
transform: rotate(45deg);
}

/* Scale Example */
.scale {
transform: scale(1.5);
}

/* Skew Example */
.skew {
transform: skew(20deg, 10deg);
}
</style>
</head>
<body>
<h2>CSS 2D Transform Examples</h2>
<div class="box translate">Translate</div>
<div class="box rotate">Rotate</div>
<div class="box scale">Scale</div>
<div class="box skew">Skew</div>

</body>
</html>

✅ Summary – 2D Transforms Effects

Transform Property Purpose

translate(x, y) Moves element by X and Y pixels

rotate(angle) Rotates element by degrees

scale(factor) Enlarges or shrinks element

skew(x-angle, y-angle) Tilts element horizontally or vertically


5. What are CSS 3D Transforms?

3D Transforms let us move, rotate, or scale HTML elements in 3-dimensional space (along X, Y, and Z axes).

1. rotateX() – Rotate around X-axis

div {
transform: rotateX(45deg);
}
Rotates the element around the horizontal (X) axis.

2. rotateY() – Rotate around Y-axis

div {
transform: rotateY(45deg);
}
Rotates the element around the vertical (Y) axis.

3. rotateZ() – Rotate around Z-axis

div {
transform: rotateZ(45deg);
}
Rotates the element around the depth (Z) axis (similar to 2D rotation).

4. perspective

• Sets the distance between the viewer and the 3D object → important for realistic 3D effect.

.container {
perspective: 500px;
}

Example Program – CSS 3D Transform

<!DOCTYPE html>
<html>
<head>
<style>
.container {
perspective: 600px;
}

.box {
width: 150px;
height: 150px;
background-color: lightcoral;
margin: 50px;
text-align: center;
line-height: 150px;
color: white;
font-size: 20px;
}

/* Rotate X */
.box1 {
transform: rotateX(45deg);
}

/* Rotate Y */
.box2 {
transform: rotateY(45deg);
}

/* Rotate Z */
.box3 {
transform: rotateZ(45deg);
}
</style>
</head>
<body>
<h2>CSS 3D Transforms Example</h2>
<div class="container">
<div class="box box1">RotateX</div>
<div class="box box2">RotateY</div>
<div class="box box3">RotateZ</div>
</div>

</body>
</html>

✅ Summary Table

Transform Effect
rotateX(45deg) Tilts element forward or backward

rotateY(45deg) Turns element left or right

rotateZ(45deg) Rotates element around its center (like 2D rotation)

perspective Controls how deep the 3D effect appears


6. CSS Transitions

What are CSS Transitions?

CSS Transitions allow properties of an element to change smoothly over time instead of changing instantly.

✅ Basic Syntax

selector {
transition: property duration timing-function delay;
}
• property → Which CSS property to animate (e.g., color, width, background-color, etc.).
• duration → Time the transition takes (e.g., 1s, 0.5s).
• timing-function → Speed curve (ease, linear, ease-in, ease-out).
• delay → Time before the transition starts (optional).

Example 1 – Smooth Background Color Change

<!DOCTYPE html>
<html>
<head>
<style>
button {
background-color: lightblue;
padding: 15px 30px;
font-size: 18px;
border: none;
cursor: pointer;

transition: background-color 0.5s ease;


}

button:hover {
background-color: lightgreen;
}
</style>
</head>

<body>
<h2>CSS Transition Example</h2>
<button>Hover Me!</button>
</body>
</html>
When you hover the button, the background color changes smoothly from lightblue to lightgreen in 0.5
seconds.
Example 2 – Smooth Width Change

div {
width: 150px;
height: 100px;
background-color: tomato;
transition: width 1s ease;
}

div:hover {
width: 300px;
}
<div></div>
On hover, the box’s width grows from 150px to 300px smoothly over 1 second.

✅ Quick Summary

Property Example Use

transition Makes changes happen smoothly

hover state Often used together for animations

Timing ease, linear, ease-in, ease-out control speed curve


7. CSS Animations
What are CSS Animations?
CSS Animations allow us to animate HTML elements by changing their properties over time with
keyframes.
Unlike transitions, animations are more powerful because they allow multiple steps and can run
automatically or infinitely.

1. Key Concepts
• @keyframes → Defines the animation steps (from → to or percentage steps).
• animation-name → Name of the keyframes animation.
• animation-duration → How long the animation takes (e.g., 2s).
• animation-iteration-count → Number of times the animation runs (e.g., infinite for continuous
animation).
• animation-timing-function → Speed curve (ease, linear, etc.).
Example 1 – Simple Animation (Move a Box)
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes slide {
from { left: 0px; }
to { left: 300px; }
}

.box {
width: 100px;
height: 100px;
background-color: orange;
position: relative;
animation-name: slide;
animation-duration: 3s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<h2>CSS Animation Example</h2>
<div class="box"></div>
</body>
</html>
The box will slide from left to right repeatedly.
Example 2 – Changing Color Animation
@keyframes colorChange {
0% { background-color: red; }
50% { background-color: yellow; }
100% { background-color: green; }
}

.box {
width: 150px;
height: 150px;
animation: colorChange 5s infinite;
}
<div class="box"></div>
The box will change colors smoothly every 5 seconds.

2. Shorthand Animation Property


animation: animation-name duration timing-function delay iteration-count direction fill-mode;

Example:
.box {
animation: slide 3s linear 1s infinite alternate;
}

Summary Table

Property Purpose

@keyframes Defines animation steps

animation-name Keyframes animation name

animation-duration Time taken for one cycle

animation-iteration-count Number of repeats (e.g., infinite)

animation-timing-function Speed of animation curve


8. CSS Masking
What is CSS Masking?
CSS Masking allows you to hide or show parts of an element using a mask image or gradient.
Think of it like cutting out a shape through which the content is visible, and the rest is hidden.

How Does It Work?


• Use the property:
mask-image: url('[Link]');
• You can also use gradients as masks:
mask-image: linear-gradient(to right, black, transparent);

Example 1 – Mask Image


<!DOCTYPE html>
<html>
<head>
<style>
.masked-image {
width: 300px;
height: 300px;
mask-image: url('[Link] /* Mask shape */
mask-size: cover;
background-image: url('[Link]
background-size: cover;
}
</style>
</head>
<body>
<h2>CSS Masking Example</h2>
<div class="masked-image"></div>
</body>
</html>
The image will appear only through the shape of the mask image (like a circle or star).

Example 2 – Mask with Gradient


.mask-gradient {
width: 300px;
height: 300px;
background: url('[Link] no-repeat center;
background-size: cover;
mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}
<div class="mask-gradient"></div>
The top half of the image is fully visible, and the bottom half fades out.

Summary – Masking Properties

Property Purpose

mask-image Defines the mask image or gradient

mask-size Sets size of the mask (e.g., cover, contain)

mask-repeat Controls repeating of mask image

mask-position Sets position of the mask

You might also like