🧠 PHASE 2: SELECTORS & SPECIFICITY

(This is where CSS becomes powerful)

1️⃣ Element Selector

p {
                color: blue;
                }

Targets all <p> tags.

2️⃣ Class Selector (Most Used)

HTML:

<p class="highlight">Hello</p>

CSS:

.highlight {
                color: red;
                }

Class uses .

3️⃣ ID Selector

HTML:

<p id="main">Hello</p>

CSS:

#main {
                color: green;
                }

ID uses #

🚨 Rule:

ID should be unique per page.

4️⃣ Group Selector

h1, h2, p {
                color: blue;
                }

5️⃣ Descendant Selector

div p {
                color: red;
                }

Targets <p> inside <div>.

6️⃣ Child Selector

div > p {
                color: blue;
                }

Only direct children.

7️⃣ Pseudo Classes

a:hover {
                color: red;
                }

Used for:

• hover
• focus
• active
• first-child

8️⃣ Specificity (VERY IMPORTANT)

Priority order:

Inline > ID > Class > Element

Example:

#id { color: red; }
                .class { color: blue; }
                p { color: green; }

ID wins.

🧠 PHASE 3: BOX MODEL (VERY IMPORTANT)

Everything in CSS is a box.

Every element has:

• Content
• Padding
• Border
• Margin

1️⃣ Box Structure

| Margin |
                | Border |
                | Padding |
                | Content |

2️⃣ Content

Actual text or image.

3️⃣ Padding

Space inside border.

padding: 20px;

4️⃣ Border

border: 2px solid black;

5️⃣ Margin

Space outside element.

margin: 10px;

6️⃣ Total Width Formula

Total width = Content + Padding + Border

Margin is outside.

7️⃣ box-sizing (INTERVIEW FAVORITE)

Default:

box-sizing: content-box;

Better:

box-sizing: border-box;

Why?

Because width includes padding & border.

Professional developers always use:

* {
                box-sizing: border-box;
                }

🟣 PHASE 4: DISPLAY & POSITIONING

(This is where layout control begins)

1️⃣ Display Property

Every HTML element has a default display value.

🔹 Block Elements

Examples:

• div
• p
• h1
• section

They:

• Take full width
• Start on new line

🔹 Inline Elements

Examples:

• span
• a
• strong

They:

• Take only required width
• Stay in same line

🔹 Inline-Block

display: inline-block;

Behaves like:

• Inline (same row)
• But allows width & height

Used a LOT in layout.

🔹 None

display: none;

Element disappears completely.

(Not hidden. Removed from layout.)

2️⃣ Position Property (VERY IMPORTANT)

This controls element placement.

There are 5 types.

🔹 static (default)

Normal document flow.

🔹 relative

position: relative;
                top: 20px;

Moves relative to its original position.

Does NOT remove it from flow.

🔹 absolute

position: absolute;
                top: 0;
                left: 0;

Removed from normal flow.

Positioned relative to nearest positioned ancestor.

If no ancestor → relative to page.

🔹 fixed

position: fixed;
                top: 0;

Fixed to screen.

Used for:

• Navbar
• Chat button

🔹 sticky

position: sticky;
                top: 0;

Behaves like relative until scroll reaches threshold.

Then becomes fixed.

Used in:

• Sticky headers
• Table headers

💡 Engineering Analogy

• static → normal placement
• relative → adjust slightly
• absolute → floating object
• fixed → glued to screen
• sticky → intelligent positioning

🟣 PHASE 5: FLEXBOX (INDUSTRY CORE)

Flexbox changed CSS forever.

Before flexbox: Layout = pain.

After flexbox: Layout = easy.

1️⃣ What is Flexbox?

Used for:

• Aligning items
• Creating rows & columns
• Centering content
• Responsive layout

2️⃣ Basic Flex Container

.container {
                display: flex;
                }

Now children become flex items.

3️⃣ Direction

flex-direction: row;
                flex-direction: column;

Row = horizontal

Column = vertical

4️⃣ Main Axis vs Cross Axis

If direction = row:

• Main axis → horizontal
• Cross axis → vertical

5️⃣ justify-content (Main Axis)

Controls horizontal alignment.

justify-content: center;
                justify-content: space-between;
                justify-content: space-around;

6️⃣ align-items (Cross Axis)

Controls vertical alignment.

align-items: center;
                align-items: flex-start;
                align-items: flex-end;

7️⃣ Centering Like a Pro

display: flex;
                justify-content: center;
                align-items: center;

This perfectly centers content.

Interview favorite.

8️⃣ flex-wrap

flex-wrap: wrap;

Allows items to move to next line.

Important for responsiveness.

🟣 PHASE 6: CSS GRID (ADVANCED)

Flexbox = 1D layout
Grid = 2D layout

Grid handles rows + columns together.

1️⃣ Activate Grid

.container {
                display: grid;
                }

2️⃣ Define Columns

grid-template-columns: 1fr 1fr 1fr;

Creates 3 equal columns.

3️⃣ Define Rows

grid-template-rows: 100px 200px;

4️⃣ Gap

gap: 20px;

Adds spacing between grid items.

5️⃣ Grid Areas (Power Feature)

grid-template-areas:
                "header header"
                "sidebar content"
                "footer footer";

Professional layout control.

🟣 PHASE 7: RESPONSIVE DESIGN

Modern websites must work on:

• Desktop
• Tablet
• Mobile

1️⃣ What is Responsive Design?

Website adapts to screen size.

2️⃣ Media Query

@media (max-width: 768px) {
                body {
                    background: red;
                }
                }

Applies style when screen is small.

3️⃣ Mobile-First Approach

Write mobile styles first.

Then expand for desktop.

Professional method.

4️⃣ Relative Units Matter

Use:

• %
• rem
• vw
• vh

Instead of fixed px.

🟣 PHASE 8: CSS IN REAL WORLD

1️⃣ Avoid Inline CSS

2️⃣ Use Classes Properly

Don't overuse IDs.

3️⃣ Naming Convention

Use clean names:

.card
                .navbar
                .button-primary

4️⃣ CSS Reset

Remove default browser styles:

* {
                margin: 0;
                padding: 0;
                }

5️⃣ Performance Tip

Avoid:

• Too many nested selectors
• !important everywhere