Scribd
Upload
4 views39 pages

CSS Session Plan v2

The document is a comprehensive guide to Cascading Style Sheets (CSS), covering its definition, purpose, and application in web design. It explains various methods of applying CSS, including inline, internal, and external styles, as well as concepts like specificity, selectors, pseudo-classes, and custom properties. Additionally, it includes practical tasks and real-world applications to reinforce learning and demonstrate the importance of CSS in modern web development.

Uploaded by

pamaka6503
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
4 views39 pages

CSS Session Plan v2

The document is a comprehensive guide to Cascading Style Sheets (CSS), covering its definition, purpose, and application in web design. It explains various methods of applying CSS, including inline, internal, and external styles, as well as concepts like specificity, selectors, pseudo-classes, and custom properties. Additionally, it includes practical tasks and real-world applications to reinforce learning and demonstrate the importance of CSS in modern web development.

Uploaded by

pamaka6503
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

Complete Session Plan


Cascading Style Sheets
Introduction to CSS
What is CSS? Why do we need it? How do we apply it to HTML?

Concepts Syntax Examples Real-World Tasks


What is CSS?

CSS = Cascading Style Sheets Why 'Cascading'?

CSS is a language that describes the visual presentation of Styles flow (cascade) from multiple sources — browser defaults,
HTML. HTML creates the structure (skeleton), CSS adds the style your stylesheet, inline styles. When two rules target the same
(clothes, colours, layout). Without CSS, every webpage would element, CSS has a clear system to decide which wins. This is
look like a plain text document. called Specificity.

The Separation Principle What Can CSS Do?

HTML = Content | CSS = Presentation • Colours & backgrounds


Keeping them separate lets one CSS file style hundreds of pages. • Fonts & text styling
Change the CSS file → every page updates instantly. This is why • Spacing, sizing, borders
Google, Netflix, etc. use external CSS. • Positioning & layout (Flexbox, Grid)
• Animations & transitions
• Responsive design for all screen sizes
Method 1 — Inline CSS

[Link]
📋 What This Does
<!-- Inline: style written directly
inside the HTML tag --> The style="" attribute accepts any CSS property.
Each property is separated by a semicolon.
<h1 style="color: red;
font-size: 36px;"> ✅ Good for: Quick one-off overrides, email
Hello World templates, testing a single style.
</h1>
❌ Avoid for: Real projects — styles are scattered
<p style="color: blue; across 100s of HTML tags. Changing the color
background: yellow; means editing every single tag.
padding: 10px;">
This paragraph is styled inline.
</p>

⚡ Pro Tip

Inline CSS has the HIGHEST specificity (priority =


1000). It will always override external or internal CSS
for the same element.
Method 2 — Internal CSS

[Link]
📋 What This Does
<!-- Internal: <style> block inside
the <head> of your HTML file --> All CSS is written inside <style> tags in the <head>.

<!DOCTYPE html> ✅ Good for: Single-page apps, email newsletters,


<html> demos where one file is needed.
<head>
<style> ❌ Avoid for: Multi-page websites — you'd have
h1 { to copy-paste the same CSS into every HTML file.
color: red; A change to one button means editing 50 files.
font-size: 36px;
}
p {
color: blue;
background: yellow;
padding: 10px;
} ⚡ Pro Tip
.highlight {
font-weight: bold; Internal CSS is scoped to one HTML file. It does NOT
} get cached by the browser, so each page load re-
</style> downloads those styles.
</head>
<body>
<h1>Hello World</h1>
<p>Styled paragraph</p>
</body>
</html>
Method 3 — External CSS (Professional Standard)

[Link]
📋 What This Does
<!-- HTML file ([Link]) -->
<!DOCTYPE html> The <link> tag connects an HTML file to an
<html> external .css file.
<head>
<!-- Link to external CSS file --> ✅ Best for: ALL real websites
<link rel="stylesheet" • One CSS file styles EVERY page
href="[Link]"> • Browser caches the file — pages load faster on
</head> repeat visits
<body> • Team collaboration — developer edits CSS,
<h1>Hello World</h1> designer edits HTML
<p>Styled paragraph</p> • Easy maintenance — change one file, update
</body> everything
</html>

/* Separate CSS file ([Link]) */


h1 { ⚡ Pro Tip
color: red;
font-size: 36px; Use relative paths: href="[Link]" for same folder,
} href="css/[Link]" for a subfolder. NEVER use
p { absolute paths in production.
color: blue;
padding: 10px;
}
The Cascade — Which Style Wins?

[Link]
📋 What This Does
/* When multiple rules target same element,
CSS picks the MOST SPECIFIC one */ The cascade has 4 levels, highest wins:
1. Inline style (1000 pts) → wins
/* Specificity: element = 1 point */ 2. ID selector (100 pts)
p { 3. Class selector (10 pts)
color: blue; /* specificity: 1 */ 4. Element selector (1 pt)
}
When specificity is EQUAL, the rule written LAST in
/* Specificity: class = 10 points */ the CSS file wins.
.intro {
color: green; /* specificity: 10 */ This is why your styles sometimes don't seem to
} work — an earlier more specific rule is overriding
them!
/* Specificity: id = 100 points */
#main-text {
color: red; /* specificity: 100 */ ⚡ Pro Tip
}
Use browser DevTools (F12 → Elements → Styles) to
/* Inline style = 1000 points */ see exactly which CSS rules are applied or crossed
/* <p style="color: purple"> */ out due to the cascade.

/* HTML element that matches all: */


<p id="main-text" class="intro"
style="color: purple">
What color am I? → PURPLE (wins!)
</p>
CSS Custom Properties (Variables)

[Link]
📋 What This Does
/* Define variables in :root
(available everywhere) */ CSS variables store reusable values. Define once at
:root { the top, use everywhere.
--primary-color: #7C3AED;
--secondary-color: #06B6D4; Real scenario: Your client says "Change the brand
--font-size-base: 16px; color from purple to orange."
--border-radius: 8px;
--spacing: 16px; WITHOUT variables: Hunt through 500 lines,
} change color in 40 places. Miss some → broken
design.
/* USE them anywhere with var() */
h1 { WITH variables: Change --primary-color: #7C3AED
color: var(--primary-color); to --primary-color: #F97316 in ONE place. Done.
font-size: calc(var(--font-size-base) * 2.5); Every button, heading, and border updates
}
automatically.
.btn { ⚡ Pro Tip
background: var(--primary-color);
border-radius: var(--border-radius); Variables also enable Dark Mode! Define --bg: white;
padding: var(--spacing); --text: black; normally, then override inside a .dark-
} mode class.
.card {
border: 2px solid var(--secondary-color);
border-radius: var(--border-radius);
}
Day 4 — CSS Introduction: Tasks

🎯 Practice Tasks 🌐 Real-World Use

Netflix: One [Link] controls dark


1 Create [Link]. Write inline CSS to make an <h1> red and a <p> blue. Open backgrounds, red buttons, and card layouts
in browser. across millions of pages. Change red → a new
color = all pages update.
2 Move those styles to an internal <style> block. Does it look identical? Use
DevTools to confirm. GitHub: External CSS is cached by the browser.
After first visit, pages load near-instantly
3 Create [Link]. Link it to your HTML. Move all styles there. Add 3 more rules because the CSS is already saved locally.
of your choice.
Bootstrap: An entire CSS framework (4000+
4 Create 3 CSS variables (--primary, --bg, --font-size). Apply them to 5 different lines) delivered as one external .css file that
elements. developers link into their projects.

5 Create two conflicting rules for the same <p>: one using element selector, one Airbnb: CSS variables control the entire brand
using class. Observe which wins. color system. Rebranding = changing ~5
variable values.
6 Bonus: Create a second HTML page ([Link]) that links to the SAME
[Link]. Both pages should look consistent.
CSS Selectors
Precisely target any HTML element — Universal, Type, Class, ID and beyond

Concepts Syntax Examples Real-World Tasks


The 4 Core Selectors

Universal Selector * Type Selector (element name)

Selects EVERY element on the page. Selects all elements of that HTML tag.
* { box-sizing: border-box; margin: 0; } h1 { } selects ALL <h1> tags.
Most common use: a CSS reset at the top of your stylesheet to p { } selects ALL <p> tags.
remove browser default spacing. Use when you want a consistent style across ALL occurrences of
a tag.

Class Selector .classname ID Selector #idname

Selects elements with that class attribute. Selects the element with that id.
.card { } matches <div class="card"> #navbar { } matches <nav id="navbar">
REUSABLE — multiple elements can share a class. IDENTIFIER — must be UNIQUE per page.
One element can have MULTIPLE classes. Highest specificity (100 pts). Creates maintenance problems if
<div class="card featured"> overused.
Class vs ID — Real Difference
Classes are the backbone of scalable CSS. Amazon, Flipkart, and
Zomato all use .card or .product-item classes to style thousands of
product cards from a single CSS rule. IDs are reserved for JavaScript ✅ With CSS

<!--hooks andID
Using unique
for page
eachsections
card -->like #navbar or #footer. <!-- Using Class for each card -->
<div id="card1">Product A</div> <div class="card">Product A</div>
<div id="card2">Product B</div> <div class="card featured">Product B</div>
<div id="card3">Product C</div> <div class="card">Product C</div>

/* Must write separate CSS for each! */ /* Write CSS ONCE, applies to all */
#card1 { background: white; .card {
padding: 20px; background: white;
border-radius: 8px; } padding: 20px;
#card2 { background: white; border-radius: 8px;
padding: 20px; }
border-radius: 8px; }
#card3 { background: white; /* Extra style for special card */
padding: 20px; .[Link] {
border-radius: 8px; } border: 2px solid #7C3AED;
/* Repeating same CSS 3 times = bad! */ transform: scale(1.05);
}

/* Product B gets BOTH styles */


Combining Selectors — Targeting Precisely

[Link]
📋 What This Does
/* Descendant: ALL <a> inside ANY <nav> */
nav a { color: white; text-decoration: none; } Descendant (space): nav a targets links inside
navbars specifically, without affecting all links on
/* Child: ONLY direct <li> inside <ul> */ the page.
ul > li { list-style: none; padding: 8px; }
Child (>): ul > li skips nested lists — only the direct
/* Adjacent sibling: <p> immediately after <h2> */ children get styled.
h2 + p { font-size: 1.1em; color: #555; }
Grouping (,): Instead of writing font-family three
/* General sibling: ALL <p> after an <h2> */ times, one rule applies to all headings.
h2 ~ p { margin-left: 20px; }
Attribute []: Perfect for forms — style password
/* Grouping: apply same rule to multiple selectors */ fields differently from email fields without adding
h1, h2, h3 { font-family: Georgia, serif; } classes.
/* Chaining classes: element must have BOTH */ ⚡ Pro Tip
.[Link] { background: #7C3AED; color: white; }
Chaining .[Link] (no space between) means the
/* Attribute selector */ element must have BOTH classes. .btn .active (with
input[type="email"] { border: 2px solid blue; } space) would mean an .active inside a .btn — totally
a[href^="https"] { color: green; } different!
a[href*="github"] { font-weight: bold; }
Pseudo-classes — Style Based on State

[Link]
📋 What This Does
/* LINK STATES — must be in this order */
a:link { color: #7C3AED; } /* unvisited */ Pseudo-classes select elements based on their
a:visited { color: gray; } /* already clicked */ STATE or POSITION — no extra HTML needed.
a:hover { color: #06B6D4; /* mouse over */
text-decoration: underline; } :hover enables interactive menus, button effects,
a:active { color: #EF4444; } /* being clicked */ card highlights without JavaScript.

/* FORM STATES */ :nth-child(2n) = every even row → zebra striping


input:focus { for tables, purely in CSS.
outline: 3px solid #7C3AED;
border-color: #7C3AED; :focus is crucial for accessibility — users navigating
} by keyboard need to see which field is active.
input:disabled { background: #f0f0f0; opacity: 0.6; }
input:checked + label { color: green; font-weight: bold; } :not() is powerful for "style everything EXCEPT this
class."
/* STRUCTURAL */ ⚡ Pro Tip
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; } The link state order matters: LoVe HAte = :link
li:nth-child(2n){ background: #f8f8f8; } /* even rows */ :visited :hover :active. Wrong order = hover never
li:nth-child(3n+1){ color: red; } /* every 3rd from 1 */ shows.

/* NEGATION */
li:not(.active) { opacity: 0.5; }
Pseudo-elements — Style Parts of Elements

[Link]
📋 What This Does
/* ::before and ::after inject virtual content */
::before and ::after create virtual elements INSIDE
/* Add decorative arrow before each list item */ the targeted element — first child and last child
li::before { respectively.
content: "→ ";
color: #7C3AED; They REQUIRE the content: "" property (can be
font-weight: bold; empty string).
}
Use case: notification badges, decorative icons,
/* Add a colored underline after headings */ quote marks around blockquotes, custom list
h2::after { bullets — all without adding extra HTML tags.
content: ""; /* required, even if empty */
display: block; ::first-letter creates a newspaper-style drop-cap
width: 60px; effect used on news sites and blogs like Medium.
height: 3px;
background: #06B6D4; ⚡ Pro Tip
margin-top: 8px;
} Pseudo-elements use :: (double colon). Older
browsers used single : — both work for
/* Style just the first letter (newspaper drop-cap) */ compatibility, but :: is the modern standard.
[Link]::first-letter {
font-size: 3.5em;
float: left;
line-height: 0.8;
color: #7C3AED;
margin-right: 6px;
Day 5 — Selectors: Tasks

🎯 Practice Tasks 🌐 Real-World Use

Amazon: .product-card class styles thousands


1 Create a navigation bar. Use type selector for <nav>, class .nav-link for links, of product tiles from one CSS rule. Each card
#logo for the logo. Style all three differently. getting unique styling uses class chaining.
2 Build a product card grid (6 cards). Use .card for all. Make every 3rd card using Google Forms: input:focus applies a blue
:nth-child(3n) have a purple border. border glow to the active field — critical UX
for accessibility.
3 Create a form with 4 inputs. Use :focus to add a glowing blue outline to the
active field. Use :disabled to grey out one field. Zomato: Restaurant cards use :hover to reveal
a 'Order Now' overlay — pure CSS, no
4 Add ::before to every <h3> on the page to show a colored bar. Use ::after to JavaScript needed.
add a subtle underline decoration.
Notion: ::before pseudo-element adds custom
5 Create a navigation menu. Use :hover to show a dropdown submenu (display: bullet icons to different heading levels in their
none → display: block) — no JavaScript. sidebar navigation.

6 Challenge: Style a table with zebra rows (:nth-child), bold header (:first-child),
no border on last row (:last-child), and highlight on :hover.
Properties: Text, Font & Color
Typography and color — the two biggest factors in a website's readability and brand

Concepts Syntax Examples Real-World Tasks


Core Font Properties

font-family — Which font to use font-size — How big

font-family: 'Roboto', Arial, sans-serif; font-size: 16px; /* pixels — fixed */


Always list 2-3 fallbacks. If Roboto isn't installed, browser tries font-size: 1rem; /* relative to root (16px) */
Arial, then any sans-serif. The last value should ALWAYS be a font-size: 1.5em; /* relative to parent font-size */
generic family: serif, sans-serif, or monospace. BEST PRACTICE: Use rem for accessibility — browser zoom
works correctly.

font-weight — How bold font-style & text-transform

font-weight: normal; /* = 400 */ font-style: italic; /* slanted */


font-weight: bold; /* = 700 */ font-style: normal; /* back to upright */
font-weight: 300; /* light */ text-transform: uppercase; /* ALL CAPS */
font-weight: 900; /* black/extra bold */ text-transform: capitalize; /* Title Case */
Note: Only weights the font actually HAS will render. text-transform: lowercase; /* all lowercase */
Text Layout Properties — Line Height, Spacing, Alignment

[Link]
📋 What This Does
/* Text alignment */
.left { text-align: left; } /* default */ line-height: 1.6 means the line height = 1.6 × the
.center { text-align: center; } font size. For a 16px font, that's 25.6px of vertical
.right { text-align: right; } space per line. This dramatically improves
.justify { text-align: justify; } /* newspaper-style */ readability for long paragraphs.

/* Line height — space between lines */ text-overflow: ellipsis is used everywhere: product
p { line-height: 1.6; } /* 1.6 × font-size */ titles on e-commerce that might be too long,
/* Unitless values are BEST — scale with font */ notification text in apps, file names in dashboards.

/* Letter spacing — space between characters */ Letter spacing: Tight (-0.02em) on large headings
.heading { letter-spacing: -0.02em; } /* tight */ looks professional. Wide (0.1em+) on small
.btn-text { letter-spacing: 0.08em; } /* spaced */ uppercase labels (like button text) improves
.label { letter-spacing: 0.15em; } /* wide */ legibility.
/* Word spacing */ ⚡ Pro Tip
.quote { word-spacing: 0.1em; }
For body text: line-height: 1.5 to 1.7 is the sweet
/* Text decoration */ spot. Below 1.3 = cramped, above 2.0 = too airy.
a { text-decoration: none; } /* remove
underline */
.strike { text-decoration: line-through; }
.mark { text-decoration: underline
underline-offset: 4px; }

/* Overflow — what to do with long text */


Google Fonts — Using Web Fonts

[Link]
📋 What This Does
<!-- Step 1: Add to <head> of HTML BEFORE your CSS -->
<link rel="preconnect" Google Fonts provides 1400+ free fonts. The
href="[Link] browser downloads them on first page load.
<link
href="[Link] Pairing strategy:
family=Inter:wght@400;600;700& • Sans-serif body + serif heading = editorial feel
family=Playfair+Display:wght@700& (like Medium, New Yorker)
display=swap" • Sans-serif body + sans-serif heading = modern,
rel="stylesheet"> tech feel (like Google, Stripe)
• Monospace for all = developer tool feel (like
/* Step 2: Use in CSS */ GitHub)
body {
font-family: 'Inter', sans-serif; The display=swap parameter shows your fallback
font-size: 16px; font immediately while Google Font loads,
}
preventing flash of invisible text.
⚡ Pro Tip
h1, h2, h3 {
font-family: 'Playfair Display', serif; Only load font WEIGHTS you actually use. Loading all
font-weight: 700; 9 weights of a font (100–900) adds 500KB+ to your
} page. Load only 400 and 700 unless you need others.

/* Good font pairing strategy:


Headings = Serif (elegant, editorial)
Body = Sans-serif (clean, readable) */
CSS Color Formats — All 4 Ways

HEX — #RRGGBB RGB — rgb(red, green, blue)

#FF0000 = red #00FF00 = green #0000FF = blue rgb(255, 0, 0) = red


#000000 = black #FFFFFF = white #888888 = grey rgb(0, 128, 255) = bright blue
Shorthand: #F00 = #FF0000, #FFF = #FFFFFF rgba(0, 0, 0, 0.5) = semi-transparent black overlay
Most common in web design. Copy directly from Figma/tools. The 'a' in rgba = alpha (0 = invisible, 1 = fully opaque)

HSL — hsl(hue, saturation%, lightness%) Named Colors

hsl(0, 100%, 50%) = red color: red; color: navy; color: tomato;
hsl(240, 100%, 50%) = blue color: cornflowerblue; color: limegreen;
hsl(270, 60%, 50%) = purple (like #7C3AED) 148 named colors exist. Fine for learning and quick demos, but
INTUITIVE: Hue=colour wheel, Saturation=vivid vs grey, use HEX/HSL for real projects (more control, exact brand colors).
Lightness=dark vs light
Color Properties — Background, Border, Opacity

[Link]
📋 What This Does
/* Text color */
h1 { color: #1E293B; } opacity vs rgba: This is a common mistake.
p { color: rgba(0, 0, 0, 0.7); } /* 70% black */
opacity: 0.5 on a div makes EVERYTHING inside it
/* Background */ (text, images, children) 50% transparent.
body { background-color: #F8FAFC; }
background: rgba(0,0,0,0.5) only makes the
.hero { background semi-transparent — the text inside
background-color: #0F172A; stays fully visible.
/* Gradient background */
background: linear-gradient( Gradients: linear-gradient(direction, color1,
135deg, color2). Widely used for hero sections, cards,
#7C3AED 0%, buttons.
#06B6D4 100%
);
Focus ring: The box-shadow trick (0 0 0 3px)
} ⚡ Pro aTip
creates soft glow without affecting layout —
used by Stripe, Tailwind, and most modern design
.card { For accessible color contrast, text on background
background: white;
systems.
needs a minimum 4.5:1 contrast ratio. Use tools like
/* Semi-transparent overlay */ WebAIM Contrast Checker.
background: rgba(255, 255, 255, 0.9);
}

/* Opacity vs rgba */
.overlay { background: black;
opacity: 0.5; } /* EVERYTHING fades */
Day 8 — Text, Font & Color: Tasks

🎯 Practice Tasks 🌐 Real-World Use

[Link]: Body font-size: 21px with line-


1 Import two Google Fonts: one sans-serif for body, one serif for headings. Apply height: 1.58 — carefully tuned for reading 5-
them throughout a sample page. minute+ articles comfortably.
2 Create a typographic scale: set font-size for h1 through h6 and body text using Spotify: --color-green: #1DB954 is a single CSS
rem values. Print the scale on screen. variable. Changing it rebrand every button and
icon across the entire app in one edit.
3 Create a --primary, --secondary, --text, --bg CSS variable system. Apply across
buttons, headings, and backgrounds. Stripe: rgba() semi-transparent backgrounds
create depth in their card overlays without
4 Build a hero section: gradient background, white centered text with a text- blocking content underneath.
shadow, a call-to-action button.
Notion: text-overflow: ellipsis on sidebar page
5 Implement text-overflow: ellipsis on a product title card that cuts off at 1 line. titles keeps the layout clean regardless of how
Show the full title on :hover. long page names are.

6 Bonus: Create a dark/light mode toggle. In JavaScript, toggle a .dark class on


<body>. In CSS, override variables inside .dark { }
Box Model: Margin, Border,
Padding
Every HTML element is a box. Understanding its layers is the key to mastering layout

Concepts Syntax Examples Real-World Tasks


The Box Model — Visual Anatomy

MARGIN (space outside — pushes other elements away)


Layer Guide
BORDER (visible line around the element)
CONTENT
The actual text or image. Sized by width &
PADDING (space inside — between content and border) height.

PADDING
CONTENT Inner cushion. Shares background color with
content.
(your text, image, etc.)

width: 200px | height: 80px BORDER

Visible frame. Can be solid, dashed, or dotted.

MARGIN
Outer gap. Transparent, creates space
between elements.
box-sizing: border-box — The Most Important CSS Reset

[Link]
📋 What This Does
/* DEFAULT behavior (box-sizing: content-box) */
.card { This is the #1 layout confusion for beginners.
width: 300px;
padding: 20px; Without border-box: You say width: 300px but the
border: 2px solid gray; browser renders 344px because padding and
} border are added ON TOP of the width.

With border-box: You say width: 300px, you get


.card { 300px. Always. Padding and border eat INTO the
width: 300px; width instead of adding to it.
padding: 20px;
border: 2px solid gray; This is why every CSS framework (Bootstrap,
} Tailwind, etc.) starts with this exact reset. Apply it
/* Actual rendered width: 300px ✅ to * to affect every element globally — done once,
Padding & border are INCLUDED never think about it again.
Content shrinks to fit: 256px */ ⚡ Pro Tip

Always put this at the very top of your [Link]


before writing any other rules. Without it, your
layouts will constantly break in unexpected ways.

/* This is the VERY FIRST rule in


Margin, Padding & Border Shorthand

[Link]
📋 What This Does
/* Padding shorthand — 4 ways to write it */
padding: 20px; /* all 4 sides */ margin: 0 auto centers a block element
padding: 10px 20px; /* top/bottom left/right */ horizontally. It means: top/bottom margin = 0,
padding: 10px 20px 15px; /* top left/right bottom */ left/right margin = auto (equal on both sides).
padding: 5px 10px 15px 20px; /* top right bottom left */
/* Memory trick: Top → Right → Bottom → Left (clockwise) */ This ONLY works when the element has a fixed
width (width: 300px or similar). Without a width, a
/* Same shorthand works for margin */ block element already fills 100% width, so there's
margin: 0 auto; /* center block horizontally */ nothing to center.
margin: 24px 0; /* vertical gap, no horizontal */
margin-top: 0; /* individual side */ Clockwise shorthand: Think of a clock — Top (12),
Right (3), Bottom (6), Left (9). Same order for
/* Border shorthand: width style color */ padding, margin, and border-radius.
border: 2px solid #E2E8F0;
border: 3px dashed #EF4444;
border-radius: 50% on a square div = perfect
border: 0; /* remove border */ ⚡ ProThis
Tipis how profile picture circles are made
circle.
everywhere.
/* Individual border sides */ Margin collapse: Adjacent vertical margins (top of
border-top: 4px solid #7C3AED; /* top accent */ one div touching bottom of another) merge into the
border-bottom: 1px solid #E2E8F0; /* divider line */ LARGER single value. 20px margin-bottom + 16px
margin-top = 20px gap (not 36px). Horizontal
/* Border radius */ margins never collapse.
border-radius: 8px; /* all corners */
border-radius: 50%; /* perfect circle */
border-radius: 12px 4px; /* top-bottom left-right */
Display Property — How Elements Flow

[Link]
📋 What This Does
/* BLOCK — full width, stacks vertically */
/* Default: div, p, h1-h6, ul, li */ The 3 main display types you'll use constantly:
.block-demo {
display: block; block: div, sections, paragraphs. Stack on top of
width: 300px; /* can set width */ each other. Full width. Use for layout structure.
height: 50px; /* can set height */
background: #E0E7FF; inline: text-level elements (links, spans). Flow in a
} line like words. Can't set width/height.

/* INLINE — flows with text, no width/height */ inline-block: Best of both. Flows in a line like inline
/* Default: span, a, strong, em */ but accepts width, height, padding like block. Used
.inline-demo { for buttons, tags, and icon+text combos.
display: inline;
/* width: 300px; ← IGNORED */ display: none is how you show/hide modals,
/* height: 50px; ← IGNORED */
dropdowns, and menus. Add/remove a class with
background: #D1FAE5; ⚡ Pro Tipto toggle it.
JavaScript
padding: 0 8px; /* only horizontal works */
} visibility: hidden hides the element but keeps its
space in the layout (like invisible ink). display: none
/* INLINE-BLOCK — flows inline BUT accepts dimensions */ removes it completely (the next element moves up
/* Perfect for: buttons, badges, nav items */ to fill the gap).
.btn {
display: inline-block;
width: 120px; /* works! */
height: 40px; /* works! */
text-align: center;
CSS Positioning — All 5 Values Explained

[Link]
📋 What This Does
/* STATIC — default, follows normal document flow */
div { position: static; } /* top/left/right/bottom ignored */ The key to understanding absolute positioning:

/* RELATIVE — offset from where it WOULD normally be */ An absolute element is positioned relative to its
.shifted { nearest ancestor that has position: relative,
position: relative; absolute, or fixed.
top: 20px; /* moves DOWN 20px from normal spot */
left: 30px; /* moves RIGHT 30px from normal spot */ If no such ancestor exists, it positions relative to
/* Other elements don't move — gap remains */ the <body>.
}
Common pattern:
/* ABSOLUTE — positioned relative to nearest 1. Give parent div: position: relative
positioned ancestor (relative/absolute/fixed) */ 2. Give child badge/tooltip: position: absolute
.parent { position: relative; } 3. Use top/right/bottom/left to place it inside
.tooltip {
parent
position: absolute; ⚡ Pro Tip
top: -35px; right: 0;
fixed vs sticky:
/* Floats above, outside normal flow */ Always
}
• fixed:add z-index
Always to fixed/sticky
at that position onelements (z-index:
screen, even
100+) or other
when user scrolls elements will overlap them as you
scroll.
• sticky: Scrolls normally until it hits the edge, then
/* FIXED — relative to VIEWPORT, stays on scroll */
.navbar { "sticks"
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
}
element visually and a colored top border creates hierarchy. margin
creates the gap between multiple cards in a grid. border-radius softens ✅ With CSS
the design — sharp corners feel harsh, rounded feel modern. box-
/* Card
shadow without
lifts the card offproper box model
the background, */
indicating it is an interactive /* Card with proper box model */
.card { element. *, *::before, *::after {
background: white; box-sizing: border-box;
} }
/* Result: Text is pressed against .card {
all edges. No visual separation. width: 320px;
Looks broken and unfinished. background: white;
padding: 24px;
border: 1px solid #E2E8F0;
border-radius: 12px;
border-top: 4px solid #7C3AED;
*/ margin-bottom: 24px;
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
}
.card h3 {

💡 undefined
margin-top: 0;
margin-bottom: 8px;
}
.card p { margin: 0; }
Day 9 — Box Model: Tasks

🎯 Practice Tasks 🌐 Real-World Use

Every product card on Flipkart, Amazon,


1 Build a profile card: photo area, name, bio, button. Use padding, border- Zomato: padding for inner spacing, border-
radius, box-shadow to make it look polished. radius for rounded corners, box-shadow for
depth — all pure box model.
2 Create a notification badge: a numbered circle (position: absolute) on the top-
right corner of a bell icon or button. Gmail notification badge: A small absolutely
positioned circle overlaid on the email icon
3 Build a sticky header: Use position: sticky; top: 0 with a white background and shows unread count.
box-shadow. Scroll to see it stick.
Medium's sticky reading progress bar:
4 Create a tooltip: Hover over a button → an absolute-positioned box appears position: sticky at the top of the article, width
above it showing help text. grows using JavaScript.

5 Debug task: Given a card with width: 200px, padding: 30px, border: 5px — Every modal/popup on the web: position:
calculate and verify the actual rendered width in DevTools. fixed, centered using top: 50%, left: 50%,
transform: translate(-50%, -50%).
6 Bonus: Recreate a Twitter/X style tweet card with avatar (rounded), name,
handle, tweet text, action icons at bottom.
Flexbox: Basics, Alignment &
Ordering
The modern CSS layout engine — build any 1D layout with just a few properties

Concepts Syntax Examples Real-World Tasks


How Flexbox Works

The Flex Container Two Axes

Add display: flex to a PARENT element. That parent becomes Flexbox has two axes:
the 'flex container'. Its direct children automatically become • Main axis: direction items flow (default: horizontal →)
'flex items'. • Cross axis: perpendicular to main (default: vertical ↓)

<div class="container"> ← flex container flex-direction: row → main axis = horizontal


<div>Item 1</div> ← flex item flex-direction: column → main axis = vertical
<div>Item 2</div> ← flex item
</div> All alignment properties work RELATIVE to these axes.

justify-content — Main Axis align-items — Cross Axis

Controls spacing/alignment ALONG the main axis: Controls alignment PERPENDICULAR to main axis:
flex-start → items at start stretch → fill full height (default)
center → items at center flex-start → align to top
flex-end → items at end flex-end → align to bottom
space-between → equal gaps BETWEEN center → vertically center
space-around → equal space around each baseline → align by text baseline
space-evenly → equal space everywhere
Flexbox Fundamentals — The 6 Core Properties

[Link]
📋 What This Does
/* Parent (Container) Properties */
.container { These 6 properties on the CONTAINER control
display: flex; almost everything:

flex-direction: row; /* row | column | row-reverse */ display: flex — turns it on


justify-content: space-between; /* main axis */ flex-direction — which way items flow
align-items: center; /* cross axis */ justify-content — spacing on the main axis
flex-wrap: wrap; /* allow items to wrap */ align-items — alignment on the cross axis
gap: 16px; /* space between items */ flex-wrap — whether items wrap to new row
} gap — clean spacing between items (replaces
margin hacks)
/* ─── Common layout patterns ─── */
The "perfect center" pattern is one of the most
/* 1. Perfect center (vertically + horizontally) */ searched CSS questions. Before flexbox, centering
.hero {
vertically required hacks. Now: display: flex;
display: flex; ⚡ Pro Tip
justify-content: center; align-items: center; —
justify-content: center;
done.
align-items: center; gap is now universally supported and is the correct
height: 100vh; way to add spacing between flex items. The old
} approach of margin-right on every item except the
last is no longer needed.
/* 2. Navigation: logo left, links right */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
Flex Item Properties — Controlling Individual Items

[Link]
📋 What This Does
/* Child (Item) Properties */
flex: 1 is the most commonly used shorthand. It
/* flex: grow shrink basis (shorthand) */ means: "grow to fill available space, can shrink,
.item { flex: 1; } start at 0 basis."
/* = flex: 1 1 0% → can grow AND shrink equally */
The sidebar + main layout (flex: 0 0 260px on
/* Real-world: sidebar + main content */ sidebar, flex: 1 on main) is used in EVERY
.sidebar { flex: 0 0 260px; } /* fixed, never shrinks */ dashboard app — Gmail, Notion, Slack, VS Code.
.main { flex: 1; } /* takes all remaining space */
align-self is powerful for "break out" elements. In
/* flex-grow: how much to grow relative to siblings */ a card row where all cards stretch to equal height,
.col-1 { flex-grow: 1; } /* gets 1 share */ use align-self: flex-start on a card to make it
.col-2 { flex-grow: 2; } /* gets 2 shares (twice as wide) */ shrink-wrap its content instead.
.col-3 { flex-grow: 1; } /* gets 1 share */
/* total shares: 4. col-2 gets 50%, others get 25% */
order lets you rearrange items on mobile without
⚡ Pro Tip
changing HTML structure — the image can show
/* align-self: override container's align-items */
before the text on small screens using media
.card-featured { flex: 0 0 260px means: don't grow (0), don't shrink
queries + order.
align-self: flex-start; /* while others stretch */ (0), always be 260px. Perfect for fixed sidebars.
}

/* order: reorder visually without changing HTML */


.item-3 { order: -1; } /* jumps to front */
/* default order = 0 for all items */
around images — using them for page layouts caused constant bugs
with collapsing containers, clearfix hacks, and broken equal-height ✅ With CSS
columns. Flexbox was designed specifically for UI layouts. It handles
/* BEFORE
vertical FLEXBOX
centering, equal—heights,
painful hacks
flexible */ widths, and item
column /* WITH FLEXBOX — clean and simple */
ordering natively with clean, readable code.
/* Centering vertically was hard */ /* Vertical + horizontal center */
.center { .center {
position: absolute; display: flex;
top: 50%; justify-content: center;
left: 50%; align-items: center;
margin-top: -50px; /* half the height */ /* Works regardless of content size! */
margin-left: -100px; /* half the width */ }
/* Breaks if content size changes! */
} /* Equal-height columns — automatic */
.container {
/* Equal-height columns were impossible */ display: flex;
.col { float: left; width: 33%; } gap: 20px;
/* Heights differ based on content */ }

💡 undefined
.col { flex: 1; }
/* Clearing floats was required */ /* All columns same height by default */
.container::after {
content: ""; /* Sidebar + main content */
display: table; .layout {
clear: both; display: flex;
} }
.sidebar { flex: 0 0 250px; }
.content { flex: 1; }
/* No floats, no clears needed! */
Real-World Flexbox Patterns

[Link]
📋 What This Does
/* Pattern 1: Responsive card grid */
.cards { flex: 1 1 280px is the most powerful responsive
display: flex; pattern in CSS:
flex-wrap: wrap; • flex-grow: 1 — item expands to fill available
gap: 20px; space
} • flex-shrink: 1 — item can compress when
.card { needed
flex: 1 1 280px; • flex-basis: 280px — never smaller than 280px
/* Grows and shrinks, minimum 280px
3 per row on desktop, 2 on tablet, On a 1200px container with 20px gaps: 4 cards fit
1 on mobile — automatically! */ (4×280 + 3×20 = 1180px)
} On a 600px container: 2 cards fit
On a 300px container: 1 card
/* Pattern 2: Navigation bar */
.nav {
This gives you responsive layouts WITHOUT media
display: flex; ⚡ Pro Tip
queries for the grid logic.
align-items: center;
justify-content: space-between; The
The flex:
nav 1pattern
1 280px(space-between
approach is howforAirbnb,
logo+links,
padding: 0 32px; [Link],
height: 64px;
align-items: center for vertical alignment)that
and Zomato build listing grids is the
gracefully reflow recreated
most commonly at any screen width.
UI component in CSS.
}
.nav-links {
display: flex;
gap: 32px;
list-style: none;
}
Day 10 — Flexbox: Tasks

🎯 Practice Tasks 🌐 Real-World Use

Airbnb listing grid: flex-wrap: wrap with flex: 1


1 Build a navigation bar: logo on the left, 4 links in center, login button on the 1 300px on each listing card — the grid
right. All vertically centered. automatically adjusts from 4 columns on
desktop to 1 column on mobile.
2 Create a card grid: 6 cards using flex: 1 1 280px. Resize the browser window —
cards should reflow automatically. Slack: The entire app is a flex layout — fixed
sidebar (flex: 0 0 250px) + flexible chat area
3 Build a pricing section: 3 pricing cards. Make the middle 'Pro' card taller and (flex: 1) + optional detail panel.
highlighted using align-self.
Gmail: Three-panel layout (sidebar + inbox list
4 Recreate a social media profile header: circular avatar on left, name + bio + + email viewer) is a nested flexbox structure.
follow button on the right. Use flex with gap.
YouTube homepage: The video thumbnail grid
5 Build a footer with 4 columns (About, Links, Contact, Social) using flexbox. uses flex-wrap. When the browser window
Should stack to 2 columns on narrower screens. narrows, thumbnails automatically drop to
fewer columns.
6 Bonus: Build the full-page layout — sticky header, sidebar (250px) + main
content area, footer that sticks to bottom.
CSS Session Plan — What You've Learned

T1 T2 T3 T4 T5

CSS Intro Selectors Text & Color Box Model Flexbox

Inline/Internal/External Universal/Type/Class/ID Font properties & Content/Padding/Borde Container & item


The Cascade & Combinators & Google Fonts r/Margin properties
Specificity Grouping RGB/HEX/HSL color box-sizing: border-box Alignment patterns
CSS Variables Pseudo-classes & systems Positioning (5 values) Real-world layouts
elements Typographic best
practices
→ → → →

You might also like