CSS – CASCADING STYLE SHEETS
LEVEL 1: CSS BASICS (FOUNDATION)
1. CSS Fundamentals
1.1 What is CSS?
CSS (Cascading Style Sheets) is used to style and layout web pages.
• HTML → structure (what’s on the page)
• CSS → appearance (how it looks)
• JavaScript → behavior (how it acts)
Example:
• HTML: “This is a button”
• CSS: “Make it blue, centered, rounded”
How CSS Works (Behind the Scenes)
1. Browser loads HTML
2. Browser loads CSS
3. Browser matches CSS rules to HTML elements
4. Styles are applied using cascade rules
5. Page is rendered on screen
If multiple styles apply, the browser decides using:
• Specificity
• Order
1.2 CSS Syntax (Selectors, Properties, Values)
p → selector (what to style)
• color, font-size → properties
• blue, 16px → values
• ; → ends a declaration
• { } → declaration block
Multiple Properties Example
h1 {
color: red;
text-align: center;
font-family: Arial, sans-serif;
}
1.3 Types of CSS (VERY IMPORTANT)
1️⃣ Inline CSS
Applied directly inside an HTML tag.
<p style="color: red; font-size: 18px;">Hello World</p>
Quick testing
Bad for large projects
Hard to maintain
2️⃣ Internal CSS
Written inside <style> tag in <head>.
Good for small pages
Not reusable across pages
3️⃣ External CSS (BEST PRACTICE)
Written in a .css file and linked.
Clean
Reusable
Professional standard
🔥 Priority Order (Important)
If multiple CSS types exist:
1. Inline (highest)
2. Internal
3. External (lowest)
(Later overridden by specificity rules)
1.4 CSS Comments
Used to explain code or disable styles.
HTML comments (<!-- -->) do NOT work in CSS
🔹 How Browsers Render CSS (Simplified)
Rendering Steps:
1. HTML parsed → DOM
2. CSS parsed → CSSOM
3. DOM + CSSOM → Render Tree
4. Layout (positions & sizes)
5. Paint (colors, borders, text)
6. Composite (GPU optimization)
Why this matters:
• Some CSS properties are expensive
• Bad CSS can cause slow pages
• Clean CSS improves performance
2️⃣ Selectors (Core)
🔹 What is a CSS Selector?
A selector tells the browser which HTML elements should receive the CSS styles.
selector {
property: value;
}
1️⃣ Universal Selector *
What it does
Selects ALL elements on the page.
*{
margin: 0;
padding: 0;
}
Common Uses
• CSS reset
• Remove default browser spacing
• Apply global styles
⚠️ Warning
• Can affect performance on large pages
• Use carefully
2️⃣ Element Selector
Targets HTML elements by tag name.
p{
color: blue;
}
h1 {
font-size: 32px;
}
Applies to:
✔ All <p> tags
✔ All <h1> tags
Simple but low specificity
3️⃣ Class Selector .class
Targets elements with a specific class.
HTML
<p class="text">Hello</p>
<p class="text">World</p>
CSS
.text {
color: green;
font-size: 18px;
}
Key Points
• Starts with .
• Reusable
• Can be applied to multiple elements
• Most commonly used selector in real projects
4️⃣ ID Selector #id
Targets a single unique element.
HTML
<h1 id="title">Main Title</h1>
CSS
#title {
color: red;
}
Rules
✔ IDs must be unique
Don’t reuse IDs
High specificity → hard to override
5️⃣ Grouping Selectors
Apply same styles to multiple selectors.
h1, h2, h3 {
font-family: Arial, sans-serif;
}
Why use it?
✔ Avoid duplicate code
✔ Cleaner CSS
✔ Easier maintenance
6️⃣ Attribute Selectors [type="text"]
Targets elements based on attributes.
Example: Input Type
input[type="text"] {
border: 2px solid blue;
}
More Examples
a[target="_blank"] {
color: red;
}
img[alt] {
border: 1px solid black;
}
Common Patterns
• [attr] → attribute exists
• [attr="value"] → exact match
• [attr^="val"] → starts with
• [attr$="val"] → ends with
• [attr*="val"] → contains
Awesome, you’re building a strong foundation now
This topic shows up everywhere in real projects and interviews—so let’s lock it in.
3️⃣ Colors & Units
🎨 COLORS IN CSS
CSS supports multiple color formats. They all do the same job—just in different ways.
1️⃣ Color Names
Predefined names supported by browsers.
p{
color: red;
}
Examples:
• red
• blue
• black
• white
• green
Easy
Limited control
Not used in professional designs much
2️⃣ HEX Colors (#RRGGBB)
Most commonly used format.
h1 {
color: #ff0000;
}
How it works
• #ff → Red
• 00 → Green
• 00 → Blue
Examples:
#000000 /* black */
#ffffff /* white */
#3498db /* blue */
Short Hex
#fff /* white */
#000 /* black */
3️⃣ RGB Colors
Uses Red, Green, Blue values (0–255).
p{
color: rgb(255, 0, 0);
}
• rgb(0, 0, 0) → black
• rgb(255, 255, 255) → white
Very flexible
Easy to tweak
4️⃣ RGBA (With Transparency)
Same as RGB + alpha (opacity).
div {
background-color: rgba(0, 0, 0, 0.5);
}
• Alpha value: 0 (transparent) → 1 (solid)
5️⃣ HSL Colors
Stands for Hue, Saturation, Lightness.
h1 {
color: hsl(240, 100%, 50%);
}
• Hue: 0–360
• Saturation: %
• Lightness: %
hsl(0, 100%, 50%) /* red */
hsl(120, 100%, 50%) /* green */
Very designer-friendly
Easy to create color themes
📏 CSS UNITS
Units define size, spacing, and responsiveness.
6️⃣ Absolute Unit: px
Fixed-size unit.
p{
font-size: 16px;
}
✔ Predictable
Not responsive
Doesn’t scale well on different screens
Still useful for:
• Borders
• Small UI elements
7️⃣ Relative Units (IMPORTANT)
% (Percentage)
Relative to parent element.
div {
width: 50%;
}
✔ Responsive
✔ Layout-friendly
em
Relative to parent’s font size.
div {
font-size: 20px;
}
p{
font-size: 1.5em; /* 30px */
}
Can compound (nesting issue)
rem (Root em)
Relative to <html> font size.
html {
font-size: 16px;
}
p{
font-size: 1.5rem; /* 24px */
}
Predictable
Best for typography
Industry standard
vh (Viewport Height)
Relative to screen height.
section {
height: 100vh;
}
• 100vh = full screen height
vw (Viewport Width)
Relative to screen width.
div {
width: 50vw;
}
• 100vw = full screen width
Used for full-screen layouts
🌫️ Opacity
Controls transparency of an element.
div {
opacity: 0.5;
}
• Range: 0 → 1
Affects entire element + children
Opacity vs RGBA (IMPORTANT)
opacity: 0.5;
⬇ Affects text + child elements
background-color: rgba(0,0,0,0.5);
⬆ Affects background only (preferred)
You’re doing great—this is where your pages start looking clean and professional
Let’s cover Text & Fonts properly, the way it’s used in real projects.
4️⃣ Text & Fonts
> font-family
Defines which font is used.
p{
font-family: Arial, Helvetica, sans-serif;
}
Font Stack (IMPORTANT)
Always add fallback fonts:
font-family: "Roboto", Arial, sans-serif;
2️⃣ font-size
Controls text size.
p{
font-size: 16px;
}
Better practice:
p{
font-size: 1rem;
}
✔ rem scales better
✔ Accessible
✔ Responsive-friendly
3️⃣ font-weight
Controls thickness of text.
p{
font-weight: normal;
}
Common values:
• 100–900
• normal (400)
• bold (700)
h1 {
font-weight: 700;
}
Some fonts don’t support all weights.
📐 Spacing Properties
4️⃣ line-height
Controls space between lines.
p{
line-height: 1.6;
}
✔ Best value: 1.4 – 1.8
✔ Improves readability
Use unitless values
5️⃣ letter-spacing
Controls space between characters.
h1 {
letter-spacing: 2px;
}
• Often used in headings
• Avoid large values in body text
🧭 Text Alignment & Transform
6️⃣ text-align
Aligns text horizontally.
text-align: left;
text-align: center;
text-align: right;
text-align: justify;
7️⃣ text-transform
Controls text casing.
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
✏️ Text Decoration
8️⃣ text-decoration
Adds decorative lines.
a{
text-decoration: none;
}
Values:
• underline
• overline
• line-through
• none
Advanced:
text-decoration: underline dotted red;
Google Fonts (Modern Standard)
Free fonts hosted by Google.
Step 1: Choose Font
Visit: [Link]
Step 2: Link Font (HTML)
<link href="[Link]
rel="stylesheet">
Step 3: Use in CSS
body {
font-family: 'Roboto', sans-serif;
}
You’re right—this is VERY IMPORTANT
If you truly understand the CSS Box Model, layout bugs stop being scary.
Let’s lock it in clearly, visually, and practically.
Box Model (VERY IMPORTANT)
📦 What is the CSS Box Model?
Every HTML element is a rectangular box made of layers.
From inside → outside:
CONTENT
PADDING
BORDER
MARGIN
The browser calculates size & spacing using this model.
1️⃣ Content
This is the actual content:
• Text
• Image
• Video
div {
width: 200px;
height: 100px;
}
By default, width & height apply to content only.
2️⃣ Padding
Space inside the element, between content & border.
div {
padding: 20px;
}
Individual sides
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
Shorthand
padding: 10px 20px; /* top/bottom | left/right */
padding: 10px 15px 20px; /* top | left-right | bottom */
padding: 10px 20px 30px 40px;
Padding increases the visible size of the element.
3️⃣ Border
Wraps padding and content.
div {
border: 2px solid black;
}
Border Properties
border-width: 2px;
border-style: solid;
border-color: red;
4️⃣ Margin
Space outside the element, separating it from others.
div {
margin: 20px;
}
Margin Shorthand
margin: 10px 20px;
margin: 10px 15px 20px;
margin: 10px 20px 30px 40px;
Margin Collapsing (IMPORTANT)
Vertical margins can collapse:
h1 {
margin-bottom: 20px;
}
p{
margin-top: 20px;
}
Actual gap = 20px, not 40px
5️⃣ box-sizing (GAME CHANGER)
Default Behavior
box-sizing: content-box;
Total width:
width + padding + border
Better Approach (BEST PRACTICE)
box-sizing: border-box;
Now:
width includes padding & border
Global Reset (Industry Standard)
*{
box-sizing: border-box;
}
Makes layouts predictable
Avoids width calculation bugs
6️⃣ Border Styles & Radius
Border Styles
border-style: solid;
border-style: dashed;
border-style: dotted;
border-style: double;
Border Radius (Rounded Corners)
div {
border-radius: 10px;
}
Circle
img {
border-radius: 50%;
}
Individual Corners
border-top-left-radius: 10px;
border-bottom-right-radius: 20px;
🧠 Visual Example
.card {
width: 300px;
padding: 20px;
border: 2px solid #333;
margin: 30px;
box-sizing: border-box;
}
Card stays 300px wide, no surprises.
⚠️ Common Mistakes
Forgetting box-sizing
Using margin instead of padding
Not understanding margin collapse
Hardcoding widths without padding logic
Nice
Backgrounds are where plain boxes turn into real UI sections. Let’s cover this cleanly and
practically.
Backgrounds
🎨 background-color
Sets the background color of an element.
div {
background-color: #3498db;
}
Works with:
• color names
• hex
• rgb / rgba
• hsl
section {
background-color: rgba(0, 0, 0, 0.7);
}
🖼️ background-image
Adds an image as background.
div {
background-image: url("[Link]");
}
✔ Image sits behind content
✔ Does not affect element size
background-repeat
Controls how background images repeat.
background-repeat: repeat; /* default */
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
Most layouts use:
background-repeat: no-repeat;
📍 background-position
Controls image placement.
background-position: center;
Common values:
center
top
bottom
left
right
More precise:
background-position: 50% 50%;
background-position: 20px 40px;
Order:
background-position: x y;
📐 background-size
Controls image scaling.
background-size: auto; /* default */
Common & Important Values
cover
background-size: cover;
✔ Fills entire element
May crop image
contain
background-size: contain;
✔ Shows full image
May leave empty space
Custom Size
background-size: 100% 100%;
Background Shorthand (PRO TIP)
Instead of writing multiple lines:
div {
background-color: #000;
background-image: url("[Link]");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
Use shorthand:
div {
background: #000 url("[Link]") no-repeat center / cover;
}
LEVEL 1: CSS BASICS COMPLETE!
Perfect
LEVEL 2 is where CSS stops being “styling” and starts being layout control.
I’ll explain this conceptually + practically, exactly how it’s used in real projects.
🟡 LEVEL 2: CSS INTERMEDIATE
(LAYOUT & CONTROL)
7️⃣ Display & Visibility
🔹 display Property
Controls how an element behaves in the layout.
display: block
• Takes full width
• Starts on a new line
div {
display: block;
}
Examples:
• div
• p
• h1
✔ Width & height work
✔ Margin & padding work
display: inline
• Takes only content width
• No new line
span {
display: inline;
}
Examples:
• span
• a
• strong
Width & height don’t work
Vertical margin ignored
display: inline-block
Best of both worlds
.button {
display: inline-block;
}
✔ Sits inline
✔ Width & height work
✔ Margin & padding work
Used for buttons, badges, nav items
display: none
Removes element completely.
div {
display: none;
}
Element not visible
Takes no space
Not accessible
🔹 visibility
Controls visibility without removing space.
visibility: hidden;
• Element is invisible
• Space remains
visibility: visible;
opacity
Controls transparency.
opacity: 0.5;
• Range: 0 → 1
• Affects children too
Element still clickable even at opacity: 0
🔥 Quick Comparison
Property Visible Takes Space Clickable
display: none
visibility: hidden
opacity: 0
8️⃣ Positioning
Positioning controls where elements live on the page.
🔹 position: static (Default)
div {
position: static;
}
• Normal document flow
• top, left don’t work
🔹 position: relative
Moves element relative to itself.
div {
position: relative;
top: 10px;
left: 20px;
}
✔ Original space remains
✔ Used as reference for absolute children
Most common positioning type
🔹 position: absolute
Removed from normal flow.
.child {
position: absolute;
top: 0;
right: 0;
}
Positioned relative to nearest positioned ancestor
(ancestor with relative, absolute, fixed)
If none → relative to viewport
🔹 position: fixed
Relative to viewport.
header {
position: fixed;
top: 0;
}
✔ Stays while scrolling
✔ Used for navbars, chat icons
🔹 position: sticky
Hybrid of relative + fixed.
nav {
position: sticky;
top: 0;
}
✔ Scrolls normally
✔ Sticks at a point
Requires scrollable parent
🔹 z-index
Controls stacking order.
div {
z-index: 10;
}
Rules:
• Works only on positioned elements
• Higher value = on top
Common bug source
9️⃣ Overflow
Controls what happens when content overflows container.
overflow values
overflow: hidden;
overflow: scroll;
overflow: auto;
Common Uses
Hide overflow
overflow: hidden;
Scroll only if needed
overflow: auto;
Axis Control
overflow-x: hidden;
overflow-y: scroll;
Used in modals, cards, tables
10️⃣ Lists & Tables
🔹 list-style
Controls bullet or number style.
ul {
list-style: none;
}
Other values:
disc
circle
square
decimal
🔹 list-style-position
Controls bullet placement.
list-style-position: inside;
list-style-position: outside;
Most designs remove bullets entirely.
🔹 Table Styling
Basic example:
table {
width: 100%;
}
th, td {
padding: 10px;
border: 1px solid #ccc;
}
🔹 border-collapse
Very important for tables.
table {
border-collapse: collapse;
}
✔ Removes double borders
✔ Cleaner tables
You’re right on track
This section is where your UI starts to feel interactive and polished. Let’s break it down
cleanly, with real-world usage.
1️⃣ Pseudo-classes & Pseudo-elements
🔹 Pseudo-classes vs Pseudo-elements
• Pseudo-class (:) → element state
• Pseudo-element (::) → part of an element
a:hover { }
p::before { }
🖱️ Common Pseudo-classes
:hover
When mouse is over element.
button:hover {
background-color: black;
color: white;
}
✔ Used for links, buttons, cards
:active
When element is being clicked.
button:active {
transform: scale(0.95);
}
Very short-lived state
:focus
When element is focused (keyboard or click).
input:focus {
outline: none;
border-color: blue;
}
CRITICAL for accessibility
Never remove focus without replacing it
🔢 Structural Pseudo-classes
:nth-child()
Selects elements by position.
li:nth-child(2) {
color: red;
}
Patterns:
li:nth-child(odd)
li:nth-child(even)
li:nth-child(3n)
Counts all children, not just same type.
:first-child
p:first-child {
font-weight: bold;
}
:last-child
p:last-child {
color: gray;
}
Common mistake: element must be the first child of its parent
🧩 Pseudo-elements
::before
Adds content before element content.
h1::before {
content: " ";
}
::after
Adds content after element content.
h1::after {
content: "";
display: block;
width: 50px;
height: 4px;
background: red;
}
Used for:
• Decorative lines
• Icons
• Overlays
• Clearfix
content property is REQUIRED
::placeholder
Styles input placeholder text.
input::placeholder {
color: gray;
font-size: 14px;
}
Affects placeholder only, not input value
12️⃣ Forms Styling
Forms are ugly by default—CSS fixes that
✍️ Input Styling
input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
Remove default outline (carefully):
input {
outline: none;
}
🎯 Focus States (VERY IMPORTANT)
input:focus {
border-color: #3498db;
box-shadow: 0 0 0 2px rgba(52,152,219,0.3);
}
✔ Improves usability
✔ Required for keyboard users
🔘 Buttons
button {
padding: 10px 20px;
border: none;
background-color: #3498db;
color: white;
border-radius: 5px;
cursor: pointer;
}
Hover + Active:
button:hover {
background-color: #2980b9;
}
button:active {
transform: scale(0.97);
}
☑️ Custom Checkboxes & Radios (Basic)
Hide Default Input
input[type="checkbox"] {
display: none;
}
Custom Checkbox
label {
display: flex;
align-items: center;
cursor: pointer;
}
label::before {
content: "";
width: 16px;
height: 16px;
border: 2px solid #333;
margin-right: 8px;
}
input:checked + label::before {
background-color: #3498db;
}
This is the basic concept—advanced versions come later.
🧠 Pro Tips
✔ Always style :focus
✔ Don’t remove accessibility
✔ Use pseudo-elements for decoration, not content
✔ Combine hover + focus for buttons
This is the most important level in modern CSS.
If you master Flexbox + Grid, you can build any layout without fear.
I’ll explain this step-by-step + visual thinking + real-world usage.
🔵 LEVEL 3: CSS LAYOUT MASTERY
13️⃣ Flexbox (MUST MASTER)
🔹 Flexbox Basics
Flexbox is a 1-dimensional layout system:
• Row or column at a time
Flex Container vs Flex Items
.container {
display: flex;
}
• .container → flex container
• Direct children → flex items
Only direct children become flex items.
🔹 flex-direction
Controls main axis direction.
flex-direction: row; /* default */
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
• Row → horizontal
• Column → vertical
🔹 Main Axis vs Cross Axis
• Main axis → defined by flex-direction
• Cross axis → perpendicular to main axis
This decides how alignment works.
🔹 justify-content (Main Axis)
Controls alignment along main axis.
justify-content: flex-start;
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
Used for:
• Navbars
• Button alignment
• Card spacing
🔹 align-items (Cross Axis)
Aligns items perpendicular to main axis.
align-items: stretch; /* default */
align-items: center;
align-items: flex-start;
align-items: flex-end;
Used to vertically center elements (very common).
🔹 align-content (Multiple Rows)
Works only when:
• flex-wrap: wrap
• Multiple rows exist
align-content: space-between;
align-content: center;
Does NOT work for single row.
🔹 flex-wrap
Controls wrapping behavior.
flex-wrap: nowrap; /* default */
flex-wrap: wrap;
flex-wrap: wrap-reverse;
Essential for responsive layouts.
🔹 Flex Item Properties
flex-grow
Controls how much an item grows.
.item {
flex-grow: 1;
}
flex-shrink
Controls shrinking.
flex-shrink: 0;
flex-basis
Initial size of item.
flex-basis: 200px;
Shorthand (IMPORTANT)
flex: grow shrink basis;
Example:
flex: 1 0 200px;
Most common:
flex: 1;
🔹 Real-World Flexbox Layouts
Center Anything
.container {
display: flex;
justify-content: center;
align-items: center;
}
Navbar
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
Card Layout
.cards {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
14️⃣ CSS Grid (ADVANCED LAYOUT)
🔹 Grid Basics
CSS Grid is a 2-dimensional layout system:
• Rows and columns
.container {
display: grid;
}
🔹 grid-template-columns
Defines columns.
grid-template-columns: 200px 200px 200px;
Responsive version:
grid-template-columns: repeat(3, 1fr);
🔹 grid-template-rows
Defines rows.
grid-template-rows: auto 1fr auto;
🔹 fr Unit
Represents fraction of available space.
grid-template-columns: 1fr 2fr;
Second column is twice as wide.
🔹 gap
Controls spacing between grid items.
gap: 20px;
Replaces:
grid-row-gap
grid-column-gap
🔹 Grid Lines & Areas
Grid Lines
.item {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
Grid Areas (VERY POWERFUL)
.container {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
Perfect for full page layouts.
🔹 Auto-fit vs Auto-fill
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
Difference:
• auto-fit → stretches items
• auto-fill → preserves empty tracks
Use auto-fit in most cases.
🔹 Responsive Grids (No Media Queries!)
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
Industry-level responsive layout.
🧠 Flexbox vs Grid (Interview Favorite)
Flexbox Grid
1D layout 2D layout
Content-based Layout-based
Navbars, cards Pages, dashboards
This level is where your CSS becomes modern, responsive, and production-ready.
We’ll go concept → syntax → real-world usage → best practices.
🟣 LEVEL 4: RESPONSIVE & MODERN
CSS
15️⃣ Responsive Design
Responsive design means your UI adapts to all screen sizes (mobile, tablet, desktop).
📱 Mobile-First Design (BEST PRACTICE)
Design for mobile first, then scale up.
/* Mobile styles (default) */
body {
font-size: 16px;
}
/* Tablet and above */
@media (min-width: 768px) {
body {
font-size: 18px;
}
}
✔ Faster
✔ Cleaner CSS
✔ Industry standard
🔹 Media Queries
Used to apply CSS based on screen conditions.
@media (max-width: 600px) {
.card {
width: 100%;
}
}
Common conditions:
min-width
max-width
orientation
🔹 Breakpoints (Common, Not Fixed)
Mobile: < 576px
Tablet: 576px – 768px
Laptop: 768px – 1024px
Desktop: > 1024px
Breakpoints depend on design, not devices.
🔹 Fluid Layouts
Avoid fixed widths.
Bad:
.container {
width: 1200px;
}
Good:
.container {
max-width: 1200px;
width: 90%;
}
✔ Scales smoothly
✔ No horizontal scroll
🔹 Responsive Typography
Using rem
html {
font-size: 16px;
}
Using clamp() (modern way)
h1 {
font-size: clamp(1.5rem, 4vw, 3rem);
}
Scales automatically with screen size
16️⃣ Advanced Units & Functions
🔹 clamp()
Defines min, preferred, max values.
font-size: clamp(14px, 2vw, 20px);
Format:
clamp(min, preferred, max)
✔ Perfect for typography
✔ No media queries needed
🔹 min()
Uses the smallest value.
width: min(90%, 600px);
🔹 max()
Uses the largest value.
height: max(300px, 50vh);
🔹 calc()
Performs calculations.
width: calc(100% - 40px);
Very useful for layouts
17️⃣ Transitions
Transitions animate property changes smoothly.
🔹 Transition Properties
transition-property: background-color;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0s;
Shorthand (MOST USED)
transition: all 0.3s ease;
🔹 Example
button {
background: blue;
transition: background 0.3s ease;
}
button:hover {
background: darkblue;
}
Only animates changed properties.
🔹 Timing Functions
ease
linear
ease-in
ease-out
ease-in-out
18️⃣ Transforms
Transforms change shape, size, position, rotation.
🔹 translate()
Moves element.
transform: translate(20px, 10px);
✔ Better than margins for animations
✔ No layout reflow
🔹 scale()
Resizes element.
transform: scale(1.1);
Used for hover zoom effects.
🔹 rotate()
Rotates element.
transform: rotate(45deg);
🔹 skew()
Tilts element.
transform: skew(10deg);
🔹 2D vs 3D Transforms
2D:
transform: translateX(20px);
3D:
transform: translateZ(50px);
transform: rotateY(180deg);
3D needs:
perspective: 1000px;
19️⃣ Animations
Animations run automatically, not on interaction.
🔹 @keyframes
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
🔹 Animation Properties
animation-name: slideIn;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
Shorthand
animation: slideIn 1s ease infinite alternate;
🔹 Infinite & Alternate Animations
animation-iteration-count: infinite;
animation-direction: alternate;
Used for:
✔ Loaders
✔ Pulsing icons
✔ Attention indicators
⚡ Performance Basics (VERY IMPORTANT)
✔ Animate only:
• transform
• opacity
Avoid animating:
• width
• height
• top
• left
These cause reflow → slow UI
🧠 Best Practices Summary
✔ Mobile-first always
✔ Use clamp() for fonts
✔ Prefer Grid + Flex for responsiveness
✔ Use transitions for interaction
✔ Use animations sparingly
