What is the CSS box model?

It describes how elements take space: content, padding, border, and margin.

Flexbox is best for 1D layouts (row/column). Grid is best for 2D layouts (rows and columns together).

CSS Tutorial for Beginners

∙ Chapter 001

CSS HOME

Start here: what CSS is, how it works, and how this tutorial is organized.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-home.html

📝 Edit Code

/* Topic CSS */
/* Tiny reset (recommended) */
*,*::before,*::after {
  box-sizing:border-box
}
body {
  margin:0;
  font-family:system-ui,Arial,sans-serif
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">HOME</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`,::before,*::after {`	Targets elements matching: ,::before,*::after.
`box-sizing:border-box`	Sets `box-sizing` to `border-box`.
`}`	Ends the current rule block.
`body {`	Targets elements matching: body.
`margin:0;`	Sets `margin` to `0`.
`font-family:system-ui,Arial,sans-serif`	Sets `font-family` to `system-ui,Arial,sans-serif`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css tutorial css basics learn css stylesheets web design

∙ Chapter 002

CSS Introduction

CSS (Cascading Style Sheets) controls how HTML looks: colors, spacing, typography, and layout.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-introduction.html

📝 Edit Code

/* Topic CSS */
h1 {
  color:rebeccapurple
}
p {
  line-height:1.7
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Introduction</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`h1 {`	Targets elements matching: h1.
`color:rebeccapurple`	Sets `color` to `rebeccapurple`.
`}`	Ends the current rule block.
`p {`	Targets elements matching: p.
`line-height:1.7`	Sets `line-height` to `1.7`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

what is css css introduction css basics html css stylesheet

∙ Chapter 003

CSS Syntax

A CSS rule is: selector + { property: value; }. Multiple rules cascade together.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-syntax.html

📝 Edit Code

/* Topic CSS */
.card {
    padding:16px;
    border:1px solid #e5e7eb;
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Syntax</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.card {`	Targets elements matching: .card.
`padding:16px;`	Sets `padding` to `16px`.
`border:1px solid #e5e7eb;`	Sets `border` to `1px solid #e5e7eb`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css syntax selectors properties values rules

∙ Chapter 004

CSS Selectors

Selectors target elements (by tag, class, id, attributes, states) so you can style them.

📝Syntax

.btn { ... }
#hero { ... }
input[type="email"] { ... }
.btn:hover { ... }
.btn::before { ... }

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-selectors.html

📝 Edit Code

/* Topic CSS */
button.primary {
  background:#0ea5e9;
  color:#fff
}
#hero {
  padding:24px
}
input[type="email"] {
  border:1px solid #94a3b8
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Selectors</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`button.primary {`	Targets elements matching: button.primary.
`background:#0ea5e9;`	Sets `background` to `#0ea5e9`.
`color:#fff`	Sets `color` to `#fff`.
`}`	Ends the current rule block.
`#hero {`	Targets elements matching: #hero.
`padding:24px`	Sets `padding` to `24px`.
`}`	Ends the current rule block.
`input[type="email"] {`	Targets elements matching: input[type="email"].
`border:1px solid #94a3b8`	Sets `border` to `1px solid #94a3b8`.
`}`	Ends the current rule block.

🏢Real-world

1Target buttons/links/forms precisely without adding extra HTML.
2Build reusable component classes instead of styling every tag globally.

⚠Common Mistakes

1Using IDs everywhere (high specificity, hard to override).
2Writing overly long selectors that are fragile.

✅Best Practices

1Prefer class selectors for components.
2Keep specificity low; override by placing rules later or using a parent class.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css selectors class selector id selector attribute selector pseudo class

∙ Chapter 005

CSS How To

Use CSS inline, in a <style> tag, or in an external .css file (best for real websites).

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-how-to.html

📝 Edit Code

/* Topic CSS */
<link rel="stylesheet" href="styles.css">

<style> .btn {
  padding:10px 14px
}
 </style>
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">How To</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`<link rel="stylesheet" href="styles.css">`	CSS statement.
`<!-- OR -->`	CSS statement.
`<style> .btn {`	Targets elements matching: <style> .btn.
`padding:10px 14px`	Sets `padding` to `10px 14px`.
`}`	Ends the current rule block.
`</style>`	CSS statement.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

add css external stylesheet internal css inline css link css

∙ Chapter 006

CSS Comments

Comments help you document styles and temporarily disable rules while testing.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-comments.html

📝 Edit Code

/* Topic CSS */
/* Primary button */
.btn {
  background:#22c55e
}
/* .btn{background:red}  (disabled) */
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Comments</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.btn {`	Targets elements matching: .btn.
`background:#22c55e`	Sets `background` to `#22c55e`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css comments comment css debug css disable css readable css

∙ Chapter 007

CSS Errors

Most CSS “bugs” come from typos, invalid values, missing units, and specificity conflicts.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-errors.html

📝 Edit Code

/* Topic CSS */
/* Wrong: missing unit */
.box {
  width:200
}
    /* should be 200px */
/* Wrong: typo */
.title {
  colorr:tomato
}
 /* should be color */
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Errors</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.box {`	Targets elements matching: .box.
`width:200`	Sets `width` to `200`.
`}`	Ends the current rule block.
`.title {`	Targets elements matching: .title.
`colorr:tomato`	Sets `colorr` to `tomato`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css errors css debugging invalid property specificity devtools

∙ Chapter 008

CSS Colors

CSS supports named colors, hex, rgb/rgba, hsl/hsla, and modern color functions.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-colors.html

📝 Edit Code

/* Topic CSS */
.badge {
  color:#0f172a;
  background:#ffd54f
}
.overlay {
  background:rgba(2,6,23,.6)
}
.brand {
  color:hsl(190 95% 45%)
}
</style>
<div class="card">
  <h3 style="margin:0 0 8px">Colors</h3>
  <p style="margin:0;opacity:.9">Edit the CSS to change background, colors, and contrast.</p>
  <div class="panel" style="margin-top:12px;padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,.12)">Color panel</div>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.badge {`	Targets elements matching: .badge.
`color:#0f172a;`	Sets `color` to `#0f172a`.
`background:#ffd54f`	Sets `background` to `#ffd54f`.
`}`	Ends the current rule block.
`.overlay {`	Targets elements matching: .overlay.
`background:rgba(2,6,23,.6)`	Sets `background` to `rgba(2,6,23,.6)`.
`}`	Ends the current rule block.
`.brand {`	Targets elements matching: .brand.
`color:hsl(190 95% 45%)`	Sets `color` to `hsl(190 95% 45%)`.
`}`	Ends the current rule block.

🏢Real-world

1Create visual hierarchy: backgrounds, contrast, and subtle shadows.
2Gradients and shadows can replace image assets for simple UI depth.

⚠Common Mistakes

1Low contrast text (hard to read).
2Overusing heavy shadows and making UI look blurry.

✅Best Practices

1Aim for readable contrast; test quickly by lowering screen brightness.
2Prefer soft, low-opacity shadows and avoid stacking many effects.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css colors hex color rgb hsl rgba

∙ Chapter 009

CSS Backgrounds

Backgrounds can be solid, gradients, or images, and you control size, repeat, and position.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-backgrounds.html

📝 Edit Code

/* Topic CSS */
.hero {
    background:linear-gradient(135deg,#1d4ed8,#0ea5e9);
    background-size:cover;
}
</style>
<div class="card">
  <h3 style="margin:0 0 8px">Backgrounds</h3>
  <p style="margin:0;opacity:.9">Edit the CSS to change background, colors, and contrast.</p>
  <div class="panel" style="margin-top:12px;padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,.12)">Color panel</div>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.hero {`	Targets elements matching: .hero.
`background:linear-gradient(135deg,#1d4ed8,#0ea5e9);`	Sets `background` to `linear-gradient(135deg,#1d4ed8,#0ea5e9)`.
`background-size:cover;`	Sets `background-size` to `cover`.
`}`	Ends the current rule block.

🏢Real-world

1Create visual hierarchy: backgrounds, contrast, and subtle shadows.
2Gradients and shadows can replace image assets for simple UI depth.

⚠Common Mistakes

1Low contrast text (hard to read).
2Overusing heavy shadows and making UI look blurry.

✅Best Practices

1Aim for readable contrast; test quickly by lowering screen brightness.
2Prefer soft, low-opacity shadows and avoid stacking many effects.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css background background image background size background position cover

∙ Chapter 010

CSS Borders

Borders surround elements; you can change width, style, color, and radius.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-borders.html

📝 Edit Code

/* Topic CSS */
.card {
    border:1px solid rgba(148,163,184,.5);
    border-radius:14px;
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Borders</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.card {`	Targets elements matching: .card.
`border:1px solid rgba(148,163,184,.5);`	Sets `border` to `1px solid rgba(148,163,184,.5)`.
`border-radius:14px;`	Sets `border-radius` to `14px`.
`}`	Ends the current rule block.

🏢Real-world

1Consistent spacing and borders make layouts feel clean and professional.
2Focus outlines improve keyboard usability.

⚠Common Mistakes

1Forgetting `box-sizing: border-box` and getting unexpected widths.
2Using large fixed padding on small screens.

✅Best Practices

1Set `*,*::before,*::after{box-sizing:border-box}` early.
2Use `gap` for layout spacing (Flex/Grid) and padding for internal spacing.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css border border radius border styles outline box model

∙ Chapter 011

CSS Margins

Margin is the space outside an element. Use it to separate components.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-margins.html

📝 Edit Code

/* Topic CSS */
.stack > * + * {
  margin-top:12px
}
.center {
  margin:0 auto;
  max-width:900px
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Margins</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.stack > * + * {`	Targets elements matching: .stack > * + *.
`margin-top:12px`	Sets `margin-top` to `12px`.
`}`	Ends the current rule block.
`.center {`	Targets elements matching: .center.
`margin:0 auto;`	Sets `margin` to `0 auto`.
`max-width:900px`	Sets `max-width` to `900px`.
`}`	Ends the current rule block.

🏢Real-world

1Consistent spacing and borders make layouts feel clean and professional.
2Focus outlines improve keyboard usability.

⚠Common Mistakes

1Forgetting `box-sizing: border-box` and getting unexpected widths.
2Using large fixed padding on small screens.

✅Best Practices

1Set `*,*::before,*::after{box-sizing:border-box}` early.
2Use `gap` for layout spacing (Flex/Grid) and padding for internal spacing.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css margin margin shorthand spacing layout box model

∙ Chapter 012

CSS Padding

Padding is the space inside an element, between its content and border.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-padding.html

📝 Edit Code

/* Topic CSS */
.btn {
  padding:10px 14px
}
.card {
  padding:18px 20px
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Padding</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.btn {`	Targets elements matching: .btn.
`padding:10px 14px`	Sets `padding` to `10px 14px`.
`}`	Ends the current rule block.
`.card {`	Targets elements matching: .card.
`padding:18px 20px`	Sets `padding` to `18px 20px`.
`}`	Ends the current rule block.

🏢Real-world

1Consistent spacing and borders make layouts feel clean and professional.
2Focus outlines improve keyboard usability.

⚠Common Mistakes

1Forgetting `box-sizing: border-box` and getting unexpected widths.
2Using large fixed padding on small screens.

✅Best Practices

1Set `*,*::before,*::after{box-sizing:border-box}` early.
2Use `gap` for layout spacing (Flex/Grid) and padding for internal spacing.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css padding padding shorthand spacing box model ui spacing

∙ Chapter 013

CSS Height / Width

Set explicit sizes with width/height, or use responsive sizing with %, vw, and max-width.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-height-width.html

📝 Edit Code

/* Topic CSS */
.panel {
  width:min(92vw,720px);
  min-height:220px
}
.avatar {
  width:48px;
  height:48px;
  border-radius:999px
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Height / Width</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.panel {`	Targets elements matching: .panel.
`width:min(92vw,720px);`	Sets `width` to `min(92vw,720px)`.
`min-height:220px`	Sets `min-height` to `220px`.
`}`	Ends the current rule block.
`.avatar {`	Targets elements matching: .avatar.
`width:48px;`	Sets `width` to `48px`.
`height:48px;`	Sets `height` to `48px`.
`border-radius:999px`	Sets `border-radius` to `999px`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css width css height responsive sizing max width min height

∙ Chapter 014

CSS Box Model

Every element is a box: content → padding → border → margin. This affects layout and sizing.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-box-model.html

📝 Edit Code

/* Topic CSS */
/* Common: include padding in width */
*,*::before,*::after {
  box-sizing:border-box
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Box Model</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`,::before,*::after {`	Targets elements matching: ,::before,*::after.
`box-sizing:border-box`	Sets `box-sizing` to `border-box`.
`}`	Ends the current rule block.

🏢Real-world

1Consistent spacing and borders make layouts feel clean and professional.
2Focus outlines improve keyboard usability.

⚠Common Mistakes

1Forgetting `box-sizing: border-box` and getting unexpected widths.
2Using large fixed padding on small screens.

✅Best Practices

1Set `*,*::before,*::after{box-sizing:border-box}` early.
2Use `gap` for layout spacing (Flex/Grid) and padding for internal spacing.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css box model margin padding border content

∙ Chapter 015

CSS Outline

Outline does not take layout space. It’s perfect for focus styles and accessibility.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-outline.html

📝 Edit Code

/* Topic CSS */
a:focus-visible {
    outline:3px solid #ffd54f;
    outline-offset:4px;
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Outline</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`a:focus-visible {`	Targets elements matching: a:focus-visible.
`outline:3px solid #ffd54f;`	Sets `outline` to `3px solid #ffd54f`.
`outline-offset:4px;`	Sets `outline-offset` to `4px`.
`}`	Ends the current rule block.

🏢Real-world

1Consistent spacing and borders make layouts feel clean and professional.
2Focus outlines improve keyboard usability.

⚠Common Mistakes

1Forgetting `box-sizing: border-box` and getting unexpected widths.
2Using large fixed padding on small screens.

✅Best Practices

1Set `*,*::before,*::after{box-sizing:border-box}` early.
2Use `gap` for layout spacing (Flex/Grid) and padding for internal spacing.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css outline focus visible accessibility keyboard navigation ui

∙ Chapter 016

CSS Text

Text styling covers alignment, spacing, decoration, and overflow handling.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-text.html

📝 Edit Code

/* Topic CSS */
.title {
  letter-spacing:-.5px
}
.center {
  text-align:center
}
.ellipsis {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Text</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.title {`	Targets elements matching: .title.
`letter-spacing:-.5px`	Sets `letter-spacing` to `-.5px`.
`}`	Ends the current rule block.
`.center {`	Targets elements matching: .center.
`text-align:center`	Sets `text-align` to `center`.
`}`	Ends the current rule block.
`.ellipsis {`	Targets elements matching: .ellipsis.
`white-space:nowrap;`	Sets `white-space` to `nowrap`.
`overflow:hidden;`	Sets `overflow` to `hidden`.
`text-overflow:ellipsis`	Sets `text-overflow` to `ellipsis`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css text text align line height letter spacing text overflow

∙ Chapter 017

CSS Fonts

Choose readable fonts, control size/weight, and use fallbacks for reliability.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-fonts.html

📝 Edit Code

/* Topic CSS */
body {
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif
}
code {
  font-family:ui-monospace,Consolas,monospace
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Fonts</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`body {`	Targets elements matching: body.
`font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif`	Sets `font-family` to `system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif`.
`}`	Ends the current rule block.
`code {`	Targets elements matching: code.
`font-family:ui-monospace,Consolas,monospace`	Sets `font-family` to `ui-monospace,Consolas,monospace`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css fonts font family font weight typography web fonts

∙ Chapter 018

CSS Icons

Icons are commonly delivered via SVG or icon fonts; style them with color and size.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-icons.html

📝 Edit Code

/* Topic CSS */
.icon {
  width:18px;
  height:18px;
  fill:currentColor
}
.icon-btn {
  display:inline-flex;
  gap:8px;
  align-items:center
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Icons</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.icon {`	Targets elements matching: .icon.
`width:18px;`	Sets `width` to `18px`.
`height:18px;`	Sets `height` to `18px`.
`fill:currentColor`	Sets `fill` to `currentColor`.
`}`	Ends the current rule block.
`.icon-btn {`	Targets elements matching: .icon-btn.
`display:inline-flex;`	Sets `display` to `inline-flex`.
`gap:8px;`	Sets `gap` to `8px`.
`align-items:center`	Sets `align-items` to `center`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css icons svg icon icon font font awesome inline svg

∙ Chapter 019

CSS Links

Style links for normal/hover/visited/focus states. Keep enough contrast and underline on hover.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-links.html

📝 Edit Code

/* Topic CSS */
a {
  color:#00e5ff;
  text-decoration:none
}
a:hover {
  text-decoration:underline
}
a:focus-visible {
  outline:2px solid #ffd54f;
  outline-offset:3px
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Links</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`a {`	Targets elements matching: a.
`color:#00e5ff;`	Sets `color` to `#00e5ff`.
`text-decoration:none`	Sets `text-decoration` to `none`.
`}`	Ends the current rule block.
`a:hover {`	Targets elements matching: a:hover.
`text-decoration:underline`	Sets `text-decoration` to `underline`.
`}`	Ends the current rule block.
`a:focus-visible {`	Targets elements matching: a:focus-visible.
`outline:2px solid #ffd54f;`	Sets `outline` to `2px solid #ffd54f`.
`outline-offset:3px`	Sets `outline-offset` to `3px`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css links hover visited focus visible underline

∙ Chapter 020

CSS Lists

Control markers, spacing, and make modern menus by removing default list styles.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-lists.html

📝 Edit Code

/* Topic CSS */
ul.nav {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:12px
}
ul.nav a {
  padding:8px 10px;
  border-radius:10px
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Lists</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`ul.nav {`	Targets elements matching: ul.nav.
`list-style:none;`	Sets `list-style` to `none`.
`margin:0;`	Sets `margin` to `0`.
`padding:0;`	Sets `padding` to `0`.
`display:flex;`	Sets `display` to `flex`.
`gap:12px`	Sets `gap` to `12px`.
`}`	Ends the current rule block.
`ul.nav a {`	Targets elements matching: ul.nav a.
`padding:8px 10px;`	Sets `padding` to `8px 10px`.
`border-radius:10px`	Sets `border-radius` to `10px`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css lists list style ul li navigation markers

∙ Chapter 021

CSS Tables

Tables need spacing, borders, and zebra rows to be readable.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-tables.html

📝 Edit Code

/* Topic CSS */
table {
  border-collapse:collapse;
  width:100%
}
th,td {
  border:1px solid #334155;
  padding:10px
}
tr:nth-child(even) {
  background:rgba(148,163,184,.08)
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Tables</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`table {`	Targets elements matching: table.
`border-collapse:collapse;`	Sets `border-collapse` to `collapse`.
`width:100%`	Sets `width` to `100%`.
`}`	Ends the current rule block.
`th,td {`	Targets elements matching: th,td.
`border:1px solid #334155;`	Sets `border` to `1px solid #334155`.
`padding:10px`	Sets `padding` to `10px`.
`}`	Ends the current rule block.
`tr:nth-child(even) {`	Targets elements matching: tr:nth-child(even).
`background:rgba(148,163,184,.08)`	Sets `background` to `rgba(148,163,184,.08)`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css tables table styling border collapse zebra rows responsive table

∙ Chapter 022

CSS Display

display controls layout behavior: block, inline, inline-block, flex, grid, none.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-display.html

📝 Edit Code

/* Topic CSS */
.pill {
  display:inline-block;
  padding:6px 10px;
  border-radius:999px
}
.hidden {
  display:none
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Display</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.pill {`	Targets elements matching: .pill.
`display:inline-block;`	Sets `display` to `inline-block`.
`padding:6px 10px;`	Sets `padding` to `6px 10px`.
`border-radius:999px`	Sets `border-radius` to `999px`.
`}`	Ends the current rule block.
`.hidden {`	Targets elements matching: .hidden.
`display:none`	Sets `display` to `none`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css display block inline inline-block none

∙ Chapter 023

CSS Max-width

max-width prevents content from stretching too wide and improves readability.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-max-width.html

📝 Edit Code

/* Topic CSS */
.container {
  max-width:1100px;
  margin:0 auto;
  padding:0 16px
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Max-width</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.container {`	Targets elements matching: .container.
`max-width:1100px;`	Sets `max-width` to `1100px`.
`margin:0 auto;`	Sets `margin` to `0 auto`.
`padding:0 16px`	Sets `padding` to `0 16px`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css max width responsive layout readability container fluid

∙ Chapter 024

CSS Position

position lets you offset elements relative to normal flow (relative/absolute/fixed/sticky).

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-position.html

📝 Edit Code

/* Topic CSS */
.badge {
  position:absolute;
  top:10px;
  right:10px
}
.sticky {
  position:sticky;
  top:0
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Position</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.badge {`	Targets elements matching: .badge.
`position:absolute;`	Sets `position` to `absolute`.
`top:10px;`	Sets `top` to `10px`.
`right:10px`	Sets `right` to `10px`.
`}`	Ends the current rule block.
`.sticky {`	Targets elements matching: .sticky.
`position:sticky;`	Sets `position` to `sticky`.
`top:0`	Sets `top` to `0`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css position relative absolute fixed sticky

∙ Chapter 025

CSS Position Offsets

Offsets are top/right/bottom/left (or inset). They work when position is not static.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-position-offsets.html

📝 Edit Code

/* Topic CSS */
.box {
  position:relative;
  left:12px;
  top:6px
}
.box2 {
  position:absolute;
  inset:12px
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Position Offsets</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.box {`	Targets elements matching: .box.
`position:relative;`	Sets `position` to `relative`.
`left:12px;`	Sets `left` to `12px`.
`top:6px`	Sets `top` to `6px`.
`}`	Ends the current rule block.
`.box2 {`	Targets elements matching: .box2.
`position:absolute;`	Sets `position` to `absolute`.
`inset:12px`	Sets `inset` to `12px`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css top css left inset offsets position

∙ Chapter 026

CSS Z-index

z-index controls stacking order, but only works on positioned elements/stacking contexts.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-z-index.html

📝 Edit Code

/* Topic CSS */
.modal {
  position:fixed;
  inset:0;
  z-index:50
}
.toast {
  position:fixed;
  bottom:16px;
  right:16px;
  z-index:60
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Z-index</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.modal {`	Targets elements matching: .modal.
`position:fixed;`	Sets `position` to `fixed`.
`inset:0;`	Sets `inset` to `0`.
`z-index:50`	Sets `z-index` to `50`.
`}`	Ends the current rule block.
`.toast {`	Targets elements matching: .toast.
`position:fixed;`	Sets `position` to `fixed`.
`bottom:16px;`	Sets `bottom` to `16px`.
`right:16px;`	Sets `right` to `16px`.
`z-index:60`	Sets `z-index` to `60`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css z-index stacking context position overlay modal

∙ Chapter 027

CSS Overflow

overflow controls clipping and scrolling for content that exceeds its box.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-overflow.html

📝 Edit Code

/* Topic CSS */
.scroller {
  max-height:180px;
  overflow:auto
}
.clip {
  overflow:hidden
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Overflow</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.scroller {`	Targets elements matching: .scroller.
`max-height:180px;`	Sets `max-height` to `180px`.
`overflow:auto`	Sets `overflow` to `auto`.
`}`	Ends the current rule block.
`.clip {`	Targets elements matching: .clip.
`overflow:hidden`	Sets `overflow` to `hidden`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css overflow scroll hidden auto clip

∙ Chapter 028

CSS Float

Float is mainly for wrapping text around images. Use Flexbox/Grid for layouts.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-float.html

📝 Edit Code

/* Topic CSS */
.pic {
  float:left;
  margin:0 12px 10px 0;
  width:120px
}
.clearfix::after {
  content:"";
  display:block;
  clear:both
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Float</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.pic {`	Targets elements matching: .pic.
`float:left;`	Sets `float` to `left`.
`margin:0 12px 10px 0;`	Sets `margin` to `0 12px 10px 0`.
`width:120px`	Sets `width` to `120px`.
`}`	Ends the current rule block.
`.clearfix::after {`	Targets elements matching: .clearfix::after.
`content:"";`	Sets `content` to `""`.
`display:block;`	Sets `display` to `block`.
`clear:both`	Sets `clear` to `both`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css float clear legacy layout wrap text clearfix

∙ Chapter 029

CSS Inline-block

inline-block flows inline like text but keeps block sizing (width/height).

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-inline-block.html

📝 Edit Code

/* Topic CSS */
.tag {
  display:inline-block;
  padding:6px 10px;
  border:1px solid #334155;
  border-radius:999px
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Inline-block</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.tag {`	Targets elements matching: .tag.
`display:inline-block;`	Sets `display` to `inline-block`.
`padding:6px 10px;`	Sets `padding` to `6px 10px`.
`border:1px solid #334155;`	Sets `border` to `1px solid #334155`.
`border-radius:999px`	Sets `border-radius` to `999px`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

inline-block css display inline block layout

∙ Chapter 030

CSS Align

Alignment depends on layout mode: text-align for inline content; flex/grid for layouts.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-align.html

📝 Edit Code

/* Topic CSS */
.center-text {
  text-align:center
}
.row {
  display:flex;
  justify-content:center;
  align-items:center
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Align</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.center-text {`	Targets elements matching: .center-text.
`text-align:center`	Sets `text-align` to `center`.
`}`	Ends the current rule block.
`.row {`	Targets elements matching: .row.
`display:flex;`	Sets `display` to `flex`.
`justify-content:center;`	Sets `justify-content` to `center`.
`align-items:center`	Sets `align-items` to `center`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css align justify-content align-items text-align center

∙ Chapter 031

CSS Combinators

Combinators select elements by relationship: descendant, child, adjacent sibling, general sibling.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-combinators.html

📝 Edit Code

/* Topic CSS */
.card a {
  color:#00e5ff
}
      /* descendant */
ul > li {
  margin-top:6px
}
  /* child */
h2 + p {
  margin-top:0
}
     /* adjacent */
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Combinators</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.card a {`	Targets elements matching: .card a.
`color:#00e5ff`	Sets `color` to `#00e5ff`.
`}`	Ends the current rule block.
`ul > li {`	Targets elements matching: ul > li.
`margin-top:6px`	Sets `margin-top` to `6px`.
`}`	Ends the current rule block.
`h2 + p {`	Targets elements matching: h2 + p.
`margin-top:0`	Sets `margin-top` to `0`.
`}`	Ends the current rule block.

🏢Real-world

1Target buttons/links/forms precisely without adding extra HTML.
2Build reusable component classes instead of styling every tag globally.

⚠Common Mistakes

1Using IDs everywhere (high specificity, hard to override).
2Writing overly long selectors that are fragile.

✅Best Practices

1Prefer class selectors for components.
2Keep specificity low; override by placing rules later or using a parent class.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css combinators descendant selector child selector adjacent sibling general sibling

∙ Chapter 032

CSS Pseudo-classes

Pseudo-classes target states: :hover, :focus-visible, :checked, :nth-child() and more.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-pseudo-classes.html

📝 Edit Code

/* Topic CSS */
button:hover {
  filter:brightness(1.05)
}
input:checked + label {
  font-weight:800
}
li:nth-child(odd) {
  opacity:.9
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Pseudo-classes</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`button:hover {`	Targets elements matching: button:hover.
`filter:brightness(1.05)`	Sets `filter` to `brightness(1.05)`.
`}`	Ends the current rule block.
`input:checked + label {`	Targets elements matching: input:checked + label.
`font-weight:800`	Sets `font-weight` to `800`.
`}`	Ends the current rule block.
`li:nth-child(odd) {`	Targets elements matching: li:nth-child(odd).
`opacity:.9`	Sets `opacity` to `.9`.
`}`	Ends the current rule block.

🏢Real-world

1Target buttons/links/forms precisely without adding extra HTML.
2Build reusable component classes instead of styling every tag globally.

⚠Common Mistakes

1Using IDs everywhere (high specificity, hard to override).
2Writing overly long selectors that are fragile.

✅Best Practices

1Prefer class selectors for components.
2Keep specificity low; override by placing rules later or using a parent class.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

pseudo class hover focus visible nth-child checked

∙ Chapter 033

CSS Pseudo-elements

Pseudo-elements style parts of elements: ::before, ::after, ::first-line, ::marker.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-pseudo-elements.html

📝 Edit Code

/* Topic CSS */
.pill::before {
  content:"#";
  opacity:.7;
  margin-right:6px
}
li::marker {
  color:#ff4081
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Pseudo-elements</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.pill::before {`	Targets elements matching: .pill::before.
`content:"#";`	Sets `content` to `"#"`.
`opacity:.7;`	Sets `opacity` to `.7`.
`margin-right:6px`	Sets `margin-right` to `6px`.
`}`	Ends the current rule block.
`li::marker {`	Targets elements matching: li::marker.
`color:#ff4081`	Sets `color` to `#ff4081`.
`}`	Ends the current rule block.

🏢Real-world

1Target buttons/links/forms precisely without adding extra HTML.
2Build reusable component classes instead of styling every tag globally.

⚠Common Mistakes

1Using IDs everywhere (high specificity, hard to override).
2Writing overly long selectors that are fragile.

✅Best Practices

1Prefer class selectors for components.
2Keep specificity low; override by placing rules later or using a parent class.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

pseudo element before after marker first-line

∙ Chapter 034

CSS Opacity

opacity affects an entire element (including children). For only background, use rgba().

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-opacity.html

📝 Edit Code

/* Topic CSS */
.muted {
  opacity:.65
}
.overlay {
  background:rgba(2,6,23,.55)
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Opacity</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.muted {`	Targets elements matching: .muted.
`opacity:.65`	Sets `opacity` to `.65`.
`}`	Ends the current rule block.
`.overlay {`	Targets elements matching: .overlay.
`background:rgba(2,6,23,.55)`	Sets `background` to `rgba(2,6,23,.55)`.
`}`	Ends the current rule block.

🏢Real-world

1Create visual hierarchy: backgrounds, contrast, and subtle shadows.
2Gradients and shadows can replace image assets for simple UI depth.

⚠Common Mistakes

1Low contrast text (hard to read).
2Overusing heavy shadows and making UI look blurry.

✅Best Practices

1Aim for readable contrast; test quickly by lowering screen brightness.
2Prefer soft, low-opacity shadows and avoid stacking many effects.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css opacity rgba transparent alpha overlay

∙ Chapter 035

CSS Navigation Bars

Navbars are usually flex layouts with spacing, hover styles, and a responsive toggle.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-navigation-bars.html

📝 Edit Code

/* Topic CSS */
.nav {
  display:flex;
  gap:14px;
  align-items:center
}
.nav a {
  padding:8px 10px;
  border-radius:10px;
  text-decoration:none
}
.nav a:hover {
  background:rgba(0,229,255,.08)
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Navigation Bars</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.nav {`	Targets elements matching: .nav.
`display:flex;`	Sets `display` to `flex`.
`gap:14px;`	Sets `gap` to `14px`.
`align-items:center`	Sets `align-items` to `center`.
`}`	Ends the current rule block.
`.nav a {`	Targets elements matching: .nav a.
`padding:8px 10px;`	Sets `padding` to `8px 10px`.
`border-radius:10px;`	Sets `border-radius` to `10px`.
`text-decoration:none`	Sets `text-decoration` to `none`.
`}`	Ends the current rule block.
`.nav a:hover {`	Targets elements matching: .nav a:hover.
`background:rgba(0,229,255,.08)`	Sets `background` to `rgba(0,229,255,.08)`.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css navbar navigation bar flex menu responsive navbar

∙ Chapter 036

CSS Dropdowns

Dropdowns can be built with :hover or :focus-within. Prefer keyboard-friendly patterns.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-dropdowns.html

📝 Edit Code

/* Topic CSS */
.dd {
  position:relative;
  display:inline-block
}
.dd-menu {
  display:none;
  position:absolute;
  top:100%;
  left:0
}
.dd:focus-within .dd-menu {
  display:block
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Dropdowns</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.dd {`	Targets elements matching: .dd.
`position:relative;`	Sets `position` to `relative`.
`display:inline-block`	Sets `display` to `inline-block`.
`}`	Ends the current rule block.
`.dd-menu {`	Targets elements matching: .dd-menu.
`display:none;`	Sets `display` to `none`.
`position:absolute;`	Sets `position` to `absolute`.
`top:100%;`	Sets `top` to `100%`.
`left:0`	Sets `left` to `0`.
`}`	Ends the current rule block.
`.dd:focus-within .dd-menu {`	Targets elements matching: .dd:focus-within .dd-menu.
`display:block`	Sets `display` to `block`.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css dropdown focus-within menu hover accessibility

∙ Chapter 037

CSS Image Gallery

Build a responsive gallery with CSS Grid and consistent aspect ratios.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-image-gallery.html

📝 Edit Code

/* Topic CSS */
.gallery {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px
}
.gallery img {
  width:100%;
  height:140px;
  object-fit:cover;
  border-radius:12px
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Image Gallery</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.gallery {`	Targets elements matching: .gallery.
`display:grid;`	Sets `display` to `grid`.
`grid-template-columns:repeat(auto-fit,minmax(160px,1fr));`	Sets `grid-template-columns` to `repeat(auto-fit,minmax(160px,1fr))`.
`gap:12px`	Sets `gap` to `12px`.
`}`	Ends the current rule block.
`.gallery img {`	Targets elements matching: .gallery img.
`width:100%;`	Sets `width` to `100%`.
`height:140px;`	Sets `height` to `140px`.
`object-fit:cover;`	Sets `object-fit` to `cover`.
`border-radius:12px`	Sets `border-radius` to `12px`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css gallery grid responsive images thumbnail gap

∙ Chapter 038

CSS Image Sprites

Sprites pack many icons into one image to reduce requests (less needed with modern bundling).

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-image-sprites.html

📝 Edit Code

/* Topic CSS */
.icon {
  width:24px;
  height:24px;
  background:url(sprite.png) no-repeat
}
.icon.home {
  background-position:0 0
}
.icon.user {
  background-position:-24px 0
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Image Sprites</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.icon {`	Targets elements matching: .icon.
`width:24px;`	Sets `width` to `24px`.
`height:24px;`	Sets `height` to `24px`.
`background:url(sprite.png) no-repeat`	Sets `background` to `url(sprite.png) no-repeat`.
`}`	Ends the current rule block.
`.icon.home {`	Targets elements matching: .icon.home.
`background-position:0 0`	Sets `background-position` to `0 0`.
`}`	Ends the current rule block.
`.icon.user {`	Targets elements matching: .icon.user.
`background-position:-24px 0`	Sets `background-position` to `-24px 0`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css sprite background-position icons performance sprite sheet

∙ Chapter 039

CSS Attribute Selectors

Select by attributes like type, href, or data-* for clean and predictable styling.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-attribute-selectors.html

📝 Edit Code

/* Topic CSS */
input[type="password"] {
  letter-spacing:.25em
}
a[href^="https://"]::after {
  content:" ↗";
  opacity:.7
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Attribute Selectors</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`input[type="password"] {`	Targets elements matching: input[type="password"].
`letter-spacing:.25em`	Sets `letter-spacing` to `.25em`.
`}`	Ends the current rule block.
`a[href^="https://"]::after {`	Targets elements matching: a[href^="https://"]::after.
`content:" ↗";`	Sets `content` to `" ↗"`.
`opacity:.7`	Sets `opacity` to `.7`.
`}`	Ends the current rule block.

🏢Real-world

1Target buttons/links/forms precisely without adding extra HTML.
2Build reusable component classes instead of styling every tag globally.

⚠Common Mistakes

1Using IDs everywhere (high specificity, hard to override).
2Writing overly long selectors that are fragile.

✅Best Practices

1Prefer class selectors for components.
2Keep specificity low; override by placing rules later or using a parent class.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

attribute selectors data attributes selectors css forms

∙ Chapter 040

CSS Forms

Form styling focuses on padding, borders, focus states, and spacing for readability.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-forms.html

📝 Edit Code

/* Topic CSS */
input,select,textarea {
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #334155
}
input:focus-visible {
  outline:3px solid #00e5ff;
  outline-offset:2px
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Forms</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`input,select,textarea {`	Targets elements matching: input,select,textarea.
`padding:10px 12px;`	Sets `padding` to `10px 12px`.
`border-radius:10px;`	Sets `border-radius` to `10px`.
`border:1px solid #334155`	Sets `border` to `1px solid #334155`.
`}`	Ends the current rule block.
`input:focus-visible {`	Targets elements matching: input:focus-visible.
`outline:3px solid #00e5ff;`	Sets `outline` to `3px solid #00e5ff`.
`outline-offset:2px`	Sets `outline-offset` to `2px`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css forms input styling focus form layout accessibility

∙ Chapter 041

CSS Counters

Counters generate automatic numbering without editing HTML, useful for steps and headings.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-counters.html

📝 Edit Code

/* Topic CSS */
.steps {
  counter-reset:step
}
.steps li {
  counter-increment:step
}
.steps li::before {
  content:counter(step) ". ";
  font-weight:900
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Counters</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.steps {`	Targets elements matching: .steps.
`counter-reset:step`	Sets `counter-reset` to `step`.
`}`	Ends the current rule block.
`.steps li {`	Targets elements matching: .steps li.
`counter-increment:step`	Sets `counter-increment` to `step`.
`}`	Ends the current rule block.
`.steps li::before {`	Targets elements matching: .steps li::before.
`content:counter(step) ". ";`	Sets `content` to `counter(step) ". "`.
`font-weight:900`	Sets `font-weight` to `900`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css counters counter-reset counter-increment steps numbering

∙ Chapter 042

CSS Units

Use px for fixed sizes, rem for scalable typography, and %/vw for responsive layouts.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-units.html

📝 Edit Code

/* Topic CSS */
:root {
  font-size:16px
}
h1 {
  font-size:2rem
}
.box {
  width:50vw;
  max-width:720px
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Units</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`:root {`	Targets elements matching: :root.
`font-size:16px`	Sets `font-size` to `16px`.
`}`	Ends the current rule block.
`h1 {`	Targets elements matching: h1.
`font-size:2rem`	Sets `font-size` to `2rem`.
`}`	Ends the current rule block.
`.box {`	Targets elements matching: .box.
`width:50vw;`	Sets `width` to `50vw`.
`max-width:720px`	Sets `max-width` to `720px`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css units px rem em vw

∙ Chapter 043

CSS Inheritance

Some properties inherit (like color/font), others don’t (like margin). Use inherit/initial/unset.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-inheritance.html

📝 Edit Code

/* Topic CSS */
.panel {
  color:#e2e8f0
}
.panel a {
  color:inherit
}
.reset {
  all:unset
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Inheritance</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.panel {`	Targets elements matching: .panel.
`color:#e2e8f0`	Sets `color` to `#e2e8f0`.
`}`	Ends the current rule block.
`.panel a {`	Targets elements matching: .panel a.
`color:inherit`	Sets `color` to `inherit`.
`}`	Ends the current rule block.
`.reset {`	Targets elements matching: .reset.
`all:unset`	Sets `all` to `unset`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css inheritance inherit initial unset cascade

∙ Chapter 044

CSS Specificity

When rules conflict, specificity (and source order) decides which one wins.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-specificity.html

📝 Edit Code

/* Topic CSS */
#btn {
  background:red
}
.btn {
  background:green
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Specificity</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`#btn {`	Targets elements matching: #btn.
`background:red`	Sets `background` to `red`.
`}`	Ends the current rule block.
`.btn {`	Targets elements matching: .btn.
`background:green`	Sets `background` to `green`.
`}`	Ends the current rule block.

🏢Real-world

1Debugging CSS quickly depends on understanding cascade + specificity.
2Design systems rely on predictable overrides.

⚠Common Mistakes

1Using `!important` everywhere.
2Chasing overrides by making selectors longer and longer.

✅Best Practices

1Use a component root class (ex: `.app`) to scope overrides.
2Keep a consistent order: base → components → utilities.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css specificity cascade id vs class important selectors

∙ Chapter 045

CSS !important

Use !important only as a last resort (e.g., utility overrides). Prefer better structure.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-important.html

📝 Edit Code

/* Topic CSS */
.text-muted {
  color:#94a3b8 !important
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">!important</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.text-muted {`	Targets elements matching: .text-muted.
`color:#94a3b8 !important`	Sets `color` to `#94a3b8 !important`.
`}`	Ends the current rule block.

🏢Real-world

1Debugging CSS quickly depends on understanding cascade + specificity.
2Design systems rely on predictable overrides.

⚠Common Mistakes

1Using `!important` as a default (hard to maintain).
2Forgetting that `!important` still follows specificity rules among important declarations.
3Breaking theming because important overrides tokens.

✅Best Practices

1Use `!important` only for tiny utilities/hotfixes.
2Fix the selector or cascade instead of forcing overrides.
3Document why it’s needed if you must use it.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css important !important override specificity utilities

∙ Chapter 046

CSS Math Functions

Use calc(), min(), max(), and clamp() to build fluid, responsive values.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-math-functions.html

📝 Edit Code

/* Topic CSS */
.title {
  font-size:clamp(20px,4vw,44px)
}
.card {
  padding:calc(12px + 1vw)
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Math Functions</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.title {`	Targets elements matching: .title.
`font-size:clamp(20px,4vw,44px)`	Sets `font-size` to `clamp(20px,4vw,44px)`.
`}`	Ends the current rule block.
`.card {`	Targets elements matching: .card.
`padding:calc(12px + 1vw)`	Sets `padding` to `calc(12px + 1vw)`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css calc css clamp min max responsive typography fluid spacing

∙ Chapter 047

CSS Optimization

Keep CSS fast by reducing unused styles, avoiding expensive selectors, and using modern layout tools.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-optimization.html

📝 Edit Code

/* Topic CSS */
/* Prefer class selectors */
.btn {
  ...
}
/* Avoid overly deep selectors: .a .b .c .d */
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Optimization</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.btn {`	Targets elements matching: .btn.
`...`	CSS statement.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css optimization performance critical css reduce unused css best practices

∙ Chapter 048

CSS Accessibility

Accessible CSS means readable contrast, visible focus, reduced motion options, and clear states.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-accessibility.html

📝 Edit Code

/* Topic CSS */
@media (prefers-reduced-motion: reduce) {
    * {
    animation:none !important;
    transition:none !important
  }
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Accessibility</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`@media (prefers-reduced-motion: reduce) {`	Targets elements matching: @media (prefers-reduced-motion: reduce).
`* {`	Targets elements matching: *.
`animation:none !important;`	Sets `animation` to `none !important`.
`transition:none !important`	Sets `transition` to `none !important`.
`}`	Ends the current rule block.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css accessibility focus visible contrast reduced motion a11y

∙ Chapter 049

CSS Website Layout

Modern layouts use Grid for overall page structure and Flexbox for component alignment.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-website-layout.html

📝 Edit Code

/* Topic CSS */
.layout {
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:100vh
}
@media(max-width:900px) {
  .layout {
    grid-template-columns:1fr
  }
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Website Layout</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.layout {`	Targets elements matching: .layout.
`display:grid;`	Sets `display` to `grid`.
`grid-template-columns:260px 1fr;`	Sets `grid-template-columns` to `260px 1fr`.
`min-height:100vh`	Sets `min-height` to `100vh`.
`}`	Ends the current rule block.
`@media(max-width:900px) {`	Targets elements matching: @media(max-width:900px).
`.layout {`	Targets elements matching: .layout.
`grid-template-columns:1fr`	Sets `grid-template-columns` to `1fr`.
`}`	Ends the current rule block.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css layout grid layout flexbox layout website layout responsive layout

∙ Chapter 050

CSS Rounded Corners

Use border-radius for rounded shapes; large radius creates pills and circles.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-rounded-corners.html

📝 Edit Code

/* Topic CSS */
.card {
  border-radius:16px
}
.pill {
  border-radius:999px
}
.avatar {
  border-radius:50%
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Rounded Corners</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.card {`	Targets elements matching: .card.
`border-radius:16px`	Sets `border-radius` to `16px`.
`}`	Ends the current rule block.
`.pill {`	Targets elements matching: .pill.
`border-radius:999px`	Sets `border-radius` to `999px`.
`}`	Ends the current rule block.
`.avatar {`	Targets elements matching: .avatar.
`border-radius:50%`	Sets `border-radius` to `50%`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

border-radius rounded corners pill circle ui

∙ Chapter 051

CSS Border Images

border-image lets you use an image (or gradient) as the border of an element.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-border-images.html

📝 Edit Code

/* Topic CSS */
.box {
    border:10px solid transparent;
    border-image:linear-gradient(90deg,#00e5ff,#7c4dff) 1;
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Border Images</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.box {`	Targets elements matching: .box.
`border:10px solid transparent;`	Sets `border` to `10px solid transparent`.
`border-image:linear-gradient(90deg,#00e5ff,#7c4dff) 1;`	Sets `border-image` to `linear-gradient(90deg,#00e5ff,#7c4dff) 1`.
`}`	Ends the current rule block.

🏢Real-world

1Consistent spacing and borders make layouts feel clean and professional.
2Focus outlines improve keyboard usability.

⚠Common Mistakes

1Forgetting `box-sizing: border-box` and getting unexpected widths.
2Using large fixed padding on small screens.

✅Best Practices

1Set `*,*::before,*::after{box-sizing:border-box}` early.
2Use `gap` for layout spacing (Flex/Grid) and padding for internal spacing.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

border-image css borders decorative border slice repeat

∙ Chapter 052

CSS Backgrounds (Advanced)

Backgrounds can be solid, gradients, or images, and you control size, repeat, and position.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-backgrounds.html

📝 Edit Code

/* Topic CSS */
.hero {
    background:linear-gradient(135deg,#1d4ed8,#0ea5e9);
    background-size:cover;
}
</style>
<div class="card">
  <h3 style="margin:0 0 8px">Backgrounds</h3>
  <p style="margin:0;opacity:.9">Edit the CSS to change background, colors, and contrast.</p>
  <div class="panel" style="margin-top:12px;padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,.12)">Color panel</div>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.hero {`	Targets elements matching: .hero.
`background:linear-gradient(135deg,#1d4ed8,#0ea5e9);`	Sets `background` to `linear-gradient(135deg,#1d4ed8,#0ea5e9)`.
`background-size:cover;`	Sets `background-size` to `cover`.
`}`	Ends the current rule block.

🏢Real-world

1Create visual hierarchy: backgrounds, contrast, and subtle shadows.
2Gradients and shadows can replace image assets for simple UI depth.

⚠Common Mistakes

1Low contrast text (hard to read).
2Overusing heavy shadows and making UI look blurry.

✅Best Practices

1Aim for readable contrast; test quickly by lowering screen brightness.
2Prefer soft, low-opacity shadows and avoid stacking many effects.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css background background image background size background position cover

∙ Chapter 053

CSS Colors (Advanced)

CSS supports named colors, hex, rgb/rgba, hsl/hsla, and modern color functions.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-colors.html

📝 Edit Code

/* Topic CSS */
.badge {
  color:#0f172a;
  background:#ffd54f
}
.overlay {
  background:rgba(2,6,23,.6)
}
.brand {
  color:hsl(190 95% 45%)
}
</style>
<div class="card">
  <h3 style="margin:0 0 8px">Colors</h3>
  <p style="margin:0;opacity:.9">Edit the CSS to change background, colors, and contrast.</p>
  <div class="panel" style="margin-top:12px;padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,.12)">Color panel</div>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.badge {`	Targets elements matching: .badge.
`color:#0f172a;`	Sets `color` to `#0f172a`.
`background:#ffd54f`	Sets `background` to `#ffd54f`.
`}`	Ends the current rule block.
`.overlay {`	Targets elements matching: .overlay.
`background:rgba(2,6,23,.6)`	Sets `background` to `rgba(2,6,23,.6)`.
`}`	Ends the current rule block.
`.brand {`	Targets elements matching: .brand.
`color:hsl(190 95% 45%)`	Sets `color` to `hsl(190 95% 45%)`.
`}`	Ends the current rule block.

🏢Real-world

1Create visual hierarchy: backgrounds, contrast, and subtle shadows.
2Gradients and shadows can replace image assets for simple UI depth.

⚠Common Mistakes

1Low contrast text (hard to read).
2Overusing heavy shadows and making UI look blurry.

✅Best Practices

1Aim for readable contrast; test quickly by lowering screen brightness.
2Prefer soft, low-opacity shadows and avoid stacking many effects.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css colors hex color rgb hsl rgba

∙ Chapter 054

CSS Gradients

Gradients create smooth transitions between colors without images.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-gradients.html

📝 Edit Code

/* Topic CSS */
.hero {
  background:linear-gradient(135deg,#00e5ff,#7c4dff)
}
.badge {
  background:radial-gradient(circle,#ffd54f,#ff4081)
}
</style>
<div class="card">
  <h3 style="margin:0 0 8px">Gradients</h3>
  <p style="margin:0;opacity:.9">Edit the CSS to change background, colors, and contrast.</p>
  <div class="panel" style="margin-top:12px;padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,.12)">Color panel</div>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.hero {`	Targets elements matching: .hero.
`background:linear-gradient(135deg,#00e5ff,#7c4dff)`	Sets `background` to `linear-gradient(135deg,#00e5ff,#7c4dff)`.
`}`	Ends the current rule block.
`.badge {`	Targets elements matching: .badge.
`background:radial-gradient(circle,#ffd54f,#ff4081)`	Sets `background` to `radial-gradient(circle,#ffd54f,#ff4081)`.
`}`	Ends the current rule block.

🏢Real-world

1Create visual hierarchy: backgrounds, contrast, and subtle shadows.
2Gradients and shadows can replace image assets for simple UI depth.

⚠Common Mistakes

1Low contrast text (hard to read).
2Overusing heavy shadows and making UI look blurry.

✅Best Practices

1Aim for readable contrast; test quickly by lowering screen brightness.
2Prefer soft, low-opacity shadows and avoid stacking many effects.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css gradients linear-gradient radial-gradient background design

∙ Chapter 055

CSS Shadows

box-shadow adds depth to components; text-shadow can improve contrast carefully.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-shadows.html

📝 Edit Code

/* Topic CSS */
.card {
  box-shadow:0 10px 30px rgba(0,0,0,.35)
}
.title {
  text-shadow:0 2px 12px rgba(0,0,0,.35)
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Shadows</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.card {`	Targets elements matching: .card.
`box-shadow:0 10px 30px rgba(0,0,0,.35)`	Sets `box-shadow` to `0 10px 30px rgba(0,0,0,.35)`.
`}`	Ends the current rule block.
`.title {`	Targets elements matching: .title.
`text-shadow:0 2px 12px rgba(0,0,0,.35)`	Sets `text-shadow` to `0 2px 12px rgba(0,0,0,.35)`.
`}`	Ends the current rule block.

🏢Real-world

1Create visual hierarchy: backgrounds, contrast, and subtle shadows.
2Gradients and shadows can replace image assets for simple UI depth.

⚠Common Mistakes

1Low contrast text (hard to read).
2Overusing heavy shadows and making UI look blurry.

✅Best Practices

1Aim for readable contrast; test quickly by lowering screen brightness.
2Prefer soft, low-opacity shadows and avoid stacking many effects.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

box-shadow text-shadow elevation depth ui

∙ Chapter 056

CSS Text Effects

Use text-shadow, strokes, and clipping with care so text stays readable.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-text-effects.html

📝 Edit Code

/* Topic CSS */
.glow {
  text-shadow:0 0 18px rgba(0,229,255,.55)
}
.stroke {
  -webkit-text-stroke:1px #00e5ff;
  color:transparent
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Text Effects</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.glow {`	Targets elements matching: .glow.
`text-shadow:0 0 18px rgba(0,229,255,.55)`	Sets `text-shadow` to `0 0 18px rgba(0,229,255,.55)`.
`}`	Ends the current rule block.
`.stroke {`	Targets elements matching: .stroke.
`-webkit-text-stroke:1px #00e5ff;`	Sets `-webkit-text-stroke` to `1px #00e5ff`.
`color:transparent`	Sets `color` to `transparent`.
`}`	Ends the current rule block.

🏢Real-world

1Create visual hierarchy: backgrounds, contrast, and subtle shadows.
2Gradients and shadows can replace image assets for simple UI depth.

⚠Common Mistakes

1Low contrast text (hard to read).
2Overusing heavy shadows and making UI look blurry.

✅Best Practices

1Aim for readable contrast; test quickly by lowering screen brightness.
2Prefer soft, low-opacity shadows and avoid stacking many effects.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

text effects text-shadow text stroke gradient text typography

∙ Chapter 057

CSS Custom Fonts

Load fonts using @font-face or providers. Always keep fallbacks for reliability.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-custom-fonts.html

📝 Edit Code

/* Topic CSS */
@font-face {
    font-family:MyFont;
    src:url(MyFont.woff2) format("woff2");
}
body {
  font-family:MyFont,system-ui,sans-serif
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Custom Fonts</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`@font-face {`	Targets elements matching: @font-face.
`font-family:MyFont;`	Sets `font-family` to `MyFont`.
`src:url(MyFont.woff2) format("woff2");`	Sets `src` to `url(MyFont.woff2) format("woff2")`.
`}`	Ends the current rule block.
`body {`	Targets elements matching: body.
`font-family:MyFont,system-ui,sans-serif`	Sets `font-family` to `MyFont,system-ui,sans-serif`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

custom fonts @font-face web fonts typography fallback fonts

∙ Chapter 058

CSS 2D Transforms

Transform elements with translate/rotate/scale without affecting layout.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-2d-transforms.html

📝 Edit Code

/* Topic CSS */
.btn:hover {
  transform:translateY(-2px) scale(1.02)
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">2D Transforms</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.btn:hover {`	Targets elements matching: .btn:hover.
`transform:translateY(-2px) scale(1.02)`	Sets `transform` to `translateY(-2px) scale(1.02)`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

2d transforms translate rotate scale transform

∙ Chapter 059

CSS 3D Transforms

3D transforms add perspective and depth (use sparingly).

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-3d-transforms.html

📝 Edit Code

/* Topic CSS */
.card {
  transform:perspective(900px) rotateY(12deg);
  transform-style:preserve-3d
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">3D Transforms</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.card {`	Targets elements matching: .card.
`transform:perspective(900px) rotateY(12deg);`	Sets `transform` to `perspective(900px) rotateY(12deg)`.
`transform-style:preserve-3d`	Sets `transform-style` to `preserve-3d`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

3d transforms perspective rotateY transform-style 3d

∙ Chapter 060

CSS Transitions

Transitions animate property changes smoothly (hover, focus, state classes).

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-transitions.html

📝 Edit Code

/* Topic CSS */
.btn {
  transition:transform .2s ease, filter .2s ease
}
.btn:hover {
  transform:translateY(-2px);
  filter:brightness(1.05)
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Transitions</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.btn {`	Targets elements matching: .btn.
`transition:transform .2s ease, filter .2s ease`	Sets `transition` to `transform .2s ease, filter .2s ease`.
`}`	Ends the current rule block.
`.btn:hover {`	Targets elements matching: .btn:hover.
`transform:translateY(-2px);`	Sets `transform` to `translateY(-2px)`.
`filter:brightness(1.05)`	Sets `filter` to `brightness(1.05)`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css transitions transition property ease hover animation ui

∙ Chapter 061

CSS Animations

Animations use @keyframes for repeated motion; respect reduced-motion preferences.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-animations.html

📝 Edit Code

/* Topic CSS */
@keyframes pulse {
  0% {
    transform:scale(1)
  }
  50% {
    transform:scale(1.03)
  }
  100% {
    transform:scale(1)
  }
}
.pulse {
  animation:pulse 1.2s ease-in-out infinite
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Animations</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`@keyframes pulse {`	Targets elements matching: @keyframes pulse.
`0% {`	Targets elements matching: 0%.
`transform:scale(1)`	Sets `transform` to `scale(1)`.
`}`	Ends the current rule block.
`50% {`	Targets elements matching: 50%.
`transform:scale(1.03)`	Sets `transform` to `scale(1.03)`.
`}`	Ends the current rule block.
`100% {`	Targets elements matching: 100%.
`transform:scale(1)`	Sets `transform` to `scale(1)`.
`}`	Ends the current rule block.
`}`	Ends the current rule block.
`.pulse {`	Targets elements matching: .pulse.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css animations @keyframes animation motion prefers-reduced-motion

∙ Chapter 062

CSS Tooltips

Tooltips can be built with pseudo-elements and appear on hover/focus.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-tooltips.html

📝 Edit Code

/* Topic CSS */
.tip {
  position:relative
}
.tip:hover::after,.tip:focus-visible::after {
  content:attr(data-tip);
  position:absolute;
  left:0;
  top:110%;
  padding:6px 8px;
  border-radius:8px;
  background:#111827;
  color:#fff;
  white-space:nowrap
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Tooltips</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.tip {`	Targets elements matching: .tip.
`position:relative`	Sets `position` to `relative`.
`}`	Ends the current rule block.
`.tip:hover::after,.tip:focus-visible::after {`	Targets elements matching: .tip:hover::after,.tip:focus-visible::after.
`content:attr(data-tip);`	Sets `content` to `attr(data-tip)`.
`position:absolute;`	Sets `position` to `absolute`.
`left:0;`	Sets `left` to `0`.
`top:110%;`	Sets `top` to `110%`.
`padding:6px 8px;`	Sets `padding` to `6px 8px`.
`border-radius:8px;`	Sets `border-radius` to `8px`.
`background:#111827;`	Sets `background` to `#111827`.
`color:#fff;`	Sets `color` to `#fff`.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css tooltip pseudo element hover focus ui

∙ Chapter 063

CSS Image Styling

Images often need border-radius, shadows, and object-fit to look consistent.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-image-styling.html

📝 Edit Code

/* Topic CSS */
img.thumb {
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:14px;
  box-shadow:0 10px 25px rgba(0,0,0,.25)
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Image Styling</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`img.thumb {`	Targets elements matching: img.thumb.
`width:100%;`	Sets `width` to `100%`.
`height:180px;`	Sets `height` to `180px`.
`object-fit:cover;`	Sets `object-fit` to `cover`.
`border-radius:14px;`	Sets `border-radius` to `14px`.
`box-shadow:0 10px 25px rgba(0,0,0,.25)`	Sets `box-shadow` to `0 10px 25px rgba(0,0,0,.25)`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

image styling border-radius object-fit responsive image css

∙ Chapter 064

CSS Image Modal

A modal is an overlay. Use fixed positioning and a centered panel.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-image-modal.html

📝 Edit Code

/* Topic CSS */
.overlay {
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.7);
  display:grid;
  place-items:center
}
.modal {
  background:#0f172a;
  padding:16px;
  border-radius:14px;
  max-width:92vw
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Image Modal</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.overlay {`	Targets elements matching: .overlay.
`position:fixed;`	Sets `position` to `fixed`.
`inset:0;`	Sets `inset` to `0`.
`background:rgba(2,6,23,.7);`	Sets `background` to `rgba(2,6,23,.7)`.
`display:grid;`	Sets `display` to `grid`.
`place-items:center`	Sets `place-items` to `center`.
`}`	Ends the current rule block.
`.modal {`	Targets elements matching: .modal.
`background:#0f172a;`	Sets `background` to `#0f172a`.
`padding:16px;`	Sets `padding` to `16px`.
`border-radius:14px;`	Sets `border-radius` to `14px`.
`max-width:92vw`	Sets `max-width` to `92vw`.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

image modal css modal overlay z-index dialog

∙ Chapter 065

CSS Image Centering

Center images with display:block + margin:auto or via flex/grid containers.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-image-centering.html

📝 Edit Code

/* Topic CSS */
img.center {
  display:block;
  margin:0 auto
}
.wrap {
  display:grid;
  place-items:center
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Image Centering</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`img.center {`	Targets elements matching: img.center.
`display:block;`	Sets `display` to `block`.
`margin:0 auto`	Sets `margin` to `0 auto`.
`}`	Ends the current rule block.
`.wrap {`	Targets elements matching: .wrap.
`display:grid;`	Sets `display` to `grid`.
`place-items:center`	Sets `place-items` to `center`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

center image margin auto flex center grid center css

∙ Chapter 066

CSS Image Filters

Filters adjust visuals (blur, grayscale, contrast). Use lightly to avoid readability issues.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-image-filters.html

📝 Edit Code

/* Topic CSS */
img.fx {
  filter:grayscale(1) contrast(1.1)
}
img.fx:hover {
  filter:none
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Image Filters</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`img.fx {`	Targets elements matching: img.fx.
`filter:grayscale(1) contrast(1.1)`	Sets `filter` to `grayscale(1) contrast(1.1)`.
`}`	Ends the current rule block.
`img.fx:hover {`	Targets elements matching: img.fx:hover.
`filter:none`	Sets `filter` to `none`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css filter grayscale blur brightness image effects

∙ Chapter 067

CSS Image Shapes

Use border-radius and clip-path to create circles and custom shapes.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-image-shapes.html

📝 Edit Code

/* Topic CSS */
img.circle {
  border-radius:50%
}
.cut {
  clip-path:polygon(0 0,100% 0,85% 100%,0 100%)
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Image Shapes</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`img.circle {`	Targets elements matching: img.circle.
`border-radius:50%`	Sets `border-radius` to `50%`.
`}`	Ends the current rule block.
`.cut {`	Targets elements matching: .cut.
`clip-path:polygon(0 0,100% 0,85% 100%,0 100%)`	Sets `clip-path` to `polygon(0 0,100% 0,85% 100%,0 100%)`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

clip-path image shapes circle image polygon css

∙ Chapter 068

CSS object-fit

object-fit controls how replaced content (images/videos) fill their box.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-object-fit.html

📝 Edit Code

/* Topic CSS */
img {
  width:260px;
  height:160px;
  object-fit:cover
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">object-fit</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`img {`	Targets elements matching: img.
`width:260px;`	Sets `width` to `260px`.
`height:160px;`	Sets `height` to `160px`.
`object-fit:cover`	Sets `object-fit` to `cover`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

object-fit cover contain responsive images cropping

∙ Chapter 069

CSS object-position

object-position chooses which part of an image stays visible when cropping.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-object-position.html

📝 Edit Code

/* Topic CSS */
img {
  object-fit:cover;
  object-position:top center
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">object-position</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`img {`	Targets elements matching: img.
`object-fit:cover;`	Sets `object-fit` to `cover`.
`object-position:top center`	Sets `object-position` to `top center`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

object-position image crop top center cover

∙ Chapter 070

CSS Masking

Masking hides parts of an element using an image/gradient (browser support varies).

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-masking.html

📝 Edit Code

/* Topic CSS */
.fade {
    -webkit-mask-image:linear-gradient(#000,transparent);
    mask-image:linear-gradient(#000,transparent);
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Masking</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.fade {`	Targets elements matching: .fade.
`-webkit-mask-image:linear-gradient(#000,transparent);`	Sets `-webkit-mask-image` to `linear-gradient(#000,transparent)`.
`mask-image:linear-gradient(#000,transparent);`	Sets `mask-image` to `linear-gradient(#000,transparent)`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css masking mask-image gradient mask clip effects

∙ Chapter 071

CSS Buttons

Buttons need good padding, hover/focus styles, and consistent colors.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-buttons.html

📝 Edit Code

/* Topic CSS */
.btn {
  padding:10px 14px;
  border-radius:12px;
  border:1px solid #334155;
  background:#111827;
  color:#fff
}
.btn:hover {
  filter:brightness(1.05)
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Buttons</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.btn {`	Targets elements matching: .btn.
`padding:10px 14px;`	Sets `padding` to `10px 14px`.
`border-radius:12px;`	Sets `border-radius` to `12px`.
`border:1px solid #334155;`	Sets `border` to `1px solid #334155`.
`background:#111827;`	Sets `background` to `#111827`.
`color:#fff`	Sets `color` to `#fff`.
`}`	Ends the current rule block.
`.btn:hover {`	Targets elements matching: .btn:hover.
`filter:brightness(1.05)`	Sets `filter` to `brightness(1.05)`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css button button style hover focus ui

∙ Chapter 072

CSS Pagination

Pagination is a row of links; style active and hover states clearly.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-pagination.html

📝 Edit Code

/* Topic CSS */
.pager {
  display:flex;
  gap:8px
}
.pager a {
  padding:8px 10px;
  border:1px solid #334155;
  border-radius:10px;
  text-decoration:none
}
.pager a.active {
  background:#00e5ff;
  color:#000;
  border-color:#00e5ff
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Pagination</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.pager {`	Targets elements matching: .pager.
`display:flex;`	Sets `display` to `flex`.
`gap:8px`	Sets `gap` to `8px`.
`}`	Ends the current rule block.
`.pager a {`	Targets elements matching: .pager a.
`padding:8px 10px;`	Sets `padding` to `8px 10px`.
`border:1px solid #334155;`	Sets `border` to `1px solid #334155`.
`border-radius:10px;`	Sets `border-radius` to `10px`.
`text-decoration:none`	Sets `text-decoration` to `none`.
`}`	Ends the current rule block.
`.pager a.active {`	Targets elements matching: .pager a.active.
`background:#00e5ff;`	Sets `background` to `#00e5ff`.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css pagination active page nav links ui

∙ Chapter 073

CSS Multiple Columns

Multi-column layout splits text into columns (like a newspaper).

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-multiple-columns.html

📝 Edit Code

/* Topic CSS */
.cols {
  column-count:3;
  column-gap:18px
}
@media(max-width:900px) {
  .cols {
    column-count:1
  }
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Multiple Columns</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.cols {`	Targets elements matching: .cols.
`column-count:3;`	Sets `column-count` to `3`.
`column-gap:18px`	Sets `column-gap` to `18px`.
`}`	Ends the current rule block.
`@media(max-width:900px) {`	Targets elements matching: @media(max-width:900px).
`.cols {`	Targets elements matching: .cols.
`column-count:1`	Sets `column-count` to `1`.
`}`	Ends the current rule block.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css columns multi column column-count column-gap layout

∙ Chapter 074

CSS User Interface

UI properties include cursor, resize, appearance, and accent-color for controls.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-user-interface.html

📝 Edit Code

/* Topic CSS */
:root {
  accent-color:#00e5ff
}
textarea {
  resize:vertical
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">User Interface</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`:root {`	Targets elements matching: :root.
`accent-color:#00e5ff`	Sets `accent-color` to `#00e5ff`.
`}`	Ends the current rule block.
`textarea {`	Targets elements matching: textarea.
`resize:vertical`	Sets `resize` to `vertical`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css ui accent-color appearance resize cursor

∙ Chapter 075

CSS Variables

Custom properties (variables) let you reuse values and theme a site quickly.

📝Syntax

:root { --accent: #00e5ff; }
.btn { background: var(--accent); }

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-variables.html

📝 Edit Code

/* Topic CSS */
:root {
  --brand:#00e5ff
}
.btn {
  background:var(--brand);
  color:#001018
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Variables</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`:root {`	Targets elements matching: :root.
`--brand:#00e5ff`	Sets `--brand` to `#00e5ff`.
`}`	Ends the current rule block.
`.btn {`	Targets elements matching: .btn.
`background:var(--brand);`	Sets `background` to `var(--brand)`.
`color:#001018`	Sets `color` to `#001018`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css variables custom properties :root theming design tokens

∙ Chapter 076

CSS @property

@property registers typed custom properties so transitions/animations behave correctly.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-at-property.html

📝 Edit Code

/* Topic CSS */
@property --a {
    syntax:"<angle>";
    inherits:true;
    initial-value:0deg;
}
.ring {
  background:conic-gradient(from var(--a),#00e5ff,#7c4dff);
  transition:--a .6s ease
}
.ring:hover {
  --a:180deg
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">@property</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`@property --a {`	Targets elements matching: @property --a.
`syntax:"<angle>";`	Sets `syntax` to `"<angle>"`.
`inherits:true;`	Sets `inherits` to `true`.
`initial-value:0deg;`	Sets `initial-value` to `0deg`.
`}`	Ends the current rule block.
`.ring {`	Targets elements matching: .ring.
`background:conic-gradient(from var(--a),#00e5ff,#7c4dff);`	Sets `background` to `conic-gradient(from var(--a),#00e5ff,#7c4dff)`.
`transition:--a .6s ease`	Sets `transition` to `--a .6s ease`.
`}`	Ends the current rule block.
`.ring:hover {`	Targets elements matching: .ring:hover.
`--a:180deg`	Sets `--a` to `180deg`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css @property custom properties typed variables animation houdini

∙ Chapter 077

CSS Box Sizing

box-sizing: border-box makes layouts simpler because padding/border count inside width.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-box-sizing.html

📝 Edit Code

/* Topic CSS */
*,*::before,*::after {
  box-sizing:border-box
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Box Sizing</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`,::before,*::after {`	Targets elements matching: ,::before,*::after.
`box-sizing:border-box`	Sets `box-sizing` to `border-box`.
`}`	Ends the current rule block.

🏢Real-world

1Consistent spacing and borders make layouts feel clean and professional.
2Focus outlines improve keyboard usability.

⚠Common Mistakes

1Forgetting `box-sizing: border-box` and getting unexpected widths.
2Using large fixed padding on small screens.

✅Best Practices

1Set `*,*::before,*::after{box-sizing:border-box}` early.
2Use `gap` for layout spacing (Flex/Grid) and padding for internal spacing.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

box-sizing border-box layout box model reset

∙ Chapter 078

CSS Media Queries

Media queries adapt styles based on viewport size or user preferences.

📝Syntax

@media (max-width: 600px) {
  .layout { grid-template-columns: 1fr; }
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-media-queries.html

📝 Edit Code

/* Topic CSS */
@media (max-width:700px) {
    .sidebar {
    display:none
  }
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Media Queries</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`@media (max-width:700px) {`	Targets elements matching: @media (max-width:700px).
`.sidebar {`	Targets elements matching: .sidebar.
`display:none`	Sets `display` to `none`.
`}`	Ends the current rule block.
`}`	Ends the current rule block.

🏢Real-world

1Make layouts adapt to phones, tablets, and desktops.
2Respect user preferences like reduced motion and dark mode.

⚠Common Mistakes

1Choosing breakpoints by device names (instead of where layout breaks).
2Animating layout properties causing jank on mobile.

✅Best Practices

1Build mobile-first: base styles for small screens, then `@media (min-width: ...)` enhancements.
2Add `prefers-reduced-motion` fallback for animations.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

media queries responsive breakpoints prefers-color-scheme css

∙ Chapter 079

Flexbox Intro

Flexbox is perfect for one-direction layouts (rows OR columns) with easy alignment.

📝Syntax

.row { display: flex; gap: 12px; }
.item { flex: 1; }

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

flexbox-intro.html

📝 Edit Code

/* Topic CSS */
.row {
  display:flex;
  gap:10px
}
.row > * {
  flex:1
}
</style>
<div class="card">
  <h3 style="margin:0 0 8px">Flexbox Intro</h3>
  <p style="margin:0;opacity:.9">Edit the CSS and observe alignment and wrapping.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Home</button>
    <button class="btn secondary">Docs</button>
    <button class="btn secondary">Pricing</button>
    <button class="btn secondary">Login</button>
  </div>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.row {`	Targets elements matching: .row.
`display:flex;`	Sets `display` to `flex`.
`gap:10px`	Sets `gap` to `10px`.
`}`	Ends the current rule block.
`.row > * {`	Targets elements matching: .row > *.
`flex:1`	Sets `flex` to `1`.
`}`	Ends the current rule block.

🏢Real-world

1Consistent spacing and borders make layouts feel clean and professional.
2Focus outlines improve keyboard usability.

⚠Common Mistakes

1Forgetting `box-sizing: border-box` and getting unexpected widths.
2Using large fixed padding on small screens.

✅Best Practices

1Set `*,*::before,*::after{box-sizing:border-box}` early.
2Use `gap` for layout spacing (Flex/Grid) and padding for internal spacing.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

flexbox display flex alignment layout css flex

∙ Chapter 080

Flex Container

Container properties like justify-content and align-items control how items align.

📝Syntax

.row { display: flex; gap: 12px; }
.item { flex: 1; }

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

flex-container.html

📝 Edit Code

/* Topic CSS */
.row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap
}
</style>
<div class="card">
  <h3 style="margin:0 0 8px">Flex Container</h3>
  <p style="margin:0;opacity:.9">Edit the CSS and observe alignment and wrapping.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Home</button>
    <button class="btn secondary">Docs</button>
    <button class="btn secondary">Pricing</button>
    <button class="btn secondary">Login</button>
  </div>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.row {`	Targets elements matching: .row.
`display:flex;`	Sets `display` to `flex`.
`justify-content:space-between;`	Sets `justify-content` to `space-between`.
`align-items:center;`	Sets `align-items` to `center`.
`gap:12px;`	Sets `gap` to `12px`.
`flex-wrap:wrap`	Sets `flex-wrap` to `wrap`.
`}`	Ends the current rule block.

🏢Real-world

1Navbars, toolbars, chip rows, and card footers are usually Flexbox.
2Centering and spacing items becomes simple.

⚠Common Mistakes

1Forgetting `flex-wrap` and breaking mobile layout.
2Mixing `gap` and margins randomly (inconsistent).

✅Best Practices

1Use `gap` for spacing between flex items.
2Use `flex: 1 1 ...` for responsive cards/chips.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

justify-content align-items flex container gap flex-wrap

∙ Chapter 081

Flex Items

Item properties like flex, align-self, and order control a single element’s behavior.

📝Syntax

.row { display: flex; gap: 12px; }
.item { flex: 1; }

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

flex-items.html

📝 Edit Code

/* Topic CSS */
.item {
  flex:1 1 180px
}
.item.featured {
  order:-1;
  align-self:stretch
}
</style>
<div class="card">
  <h3 style="margin:0 0 8px">Flex Items</h3>
  <p style="margin:0;opacity:.9">Edit the CSS and observe alignment and wrapping.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Home</button>
    <button class="btn secondary">Docs</button>
    <button class="btn secondary">Pricing</button>
    <button class="btn secondary">Login</button>
  </div>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.item {`	Targets elements matching: .item.
`flex:1 1 180px`	Sets `flex` to `1 1 180px`.
`}`	Ends the current rule block.
`.item.featured {`	Targets elements matching: .item.featured.
`order:-1;`	Sets `order` to `-1`.
`align-self:stretch`	Sets `align-self` to `stretch`.
`}`	Ends the current rule block.

🏢Real-world

1Navbars, toolbars, chip rows, and card footers are usually Flexbox.
2Centering and spacing items becomes simple.

⚠Common Mistakes

1Forgetting `flex-wrap` and breaking mobile layout.
2Mixing `gap` and margins randomly (inconsistent).

✅Best Practices

1Use `gap` for spacing between flex items.
2Use `flex: 1 1 ...` for responsive cards/chips.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

flex flex-basis flex-grow align-self order

∙ Chapter 082

Flex Responsive

Make flex layouts responsive with wrapping and media queries.

📝Syntax

.row { display: flex; gap: 12px; }
.item { flex: 1; }

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

flex-responsive.html

📝 Edit Code

/* Topic CSS */
.row {
  display:flex;
  gap:12px;
  flex-wrap:wrap
}
@media(max-width:700px) {
  .row {
    flex-direction:column
  }
}
</style>
<div class="card">
  <h3 style="margin:0 0 8px">Flex Responsive</h3>
  <p style="margin:0;opacity:.9">Edit the CSS and observe alignment and wrapping.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Home</button>
    <button class="btn secondary">Docs</button>
    <button class="btn secondary">Pricing</button>
    <button class="btn secondary">Login</button>
  </div>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.row {`	Targets elements matching: .row.
`display:flex;`	Sets `display` to `flex`.
`gap:12px;`	Sets `gap` to `12px`.
`flex-wrap:wrap`	Sets `flex-wrap` to `wrap`.
`}`	Ends the current rule block.
`@media(max-width:700px) {`	Targets elements matching: @media(max-width:700px).
`.row {`	Targets elements matching: .row.
`flex-direction:column`	Sets `flex-direction` to `column`.
`}`	Ends the current rule block.
`}`	Ends the current rule block.

🏢Real-world

1Navbars, toolbars, chip rows, and card footers are usually Flexbox.
2Centering and spacing items becomes simple.

⚠Common Mistakes

1Forgetting `flex-wrap` and breaking mobile layout.
2Mixing `gap` and margins randomly (inconsistent).

✅Best Practices

1Use `gap` for spacing between flex items.
2Use `flex: 1 1 ...` for responsive cards/chips.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

responsive flexbox flex-wrap breakpoints stack on mobile css

∙ Chapter 083

Grid Intro

CSS Grid is ideal for 2D layouts: rows and columns together.

📝Syntax

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cell { ... }

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

grid-intro.html

📝 Edit Code

/* Topic CSS */
.grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px
}
</style>
<div class="card">
  <h3 style="margin:0 0 8px">Grid Intro</h3>
  <p style="margin:0;opacity:.9">Edit the CSS and observe how the grid changes.</p>
  <div class="grid" style="margin-top:12px">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div><div class="cell">4</div><div class="cell">5</div><div class="cell">6</div>
  </div>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.grid {`	Targets elements matching: .grid.
`display:grid;`	Sets `display` to `grid`.
`grid-template-columns:repeat(3,1fr);`	Sets `grid-template-columns` to `repeat(3,1fr)`.
`gap:12px`	Sets `gap` to `12px`.
`}`	Ends the current rule block.

🏢Real-world

1Page layouts, galleries, dashboards, and responsive cards use Grid.
2Two-dimensional alignment is much easier than with floats.

⚠Common Mistakes

1Hardcoding column counts instead of using responsive tracks.
2Forgetting `minmax(0,1fr)` and causing overflow.

✅Best Practices

1Use `repeat(auto-fit, minmax(160px, 1fr))` for responsive grids.
2Use `grid-template-areas` for readable page layouts.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css grid grid layout rows and columns layout responsive

∙ Chapter 084

Grid Container

Define columns/rows with grid-template and control spacing using gap.

📝Syntax

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cell { ... }

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

grid-container.html

📝 Edit Code

/* Topic CSS */
.grid {
  display:grid;
  grid-template-columns:240px 1fr;
  grid-template-rows:auto 1fr;
  gap:12px
}
</style>
<div class="card">
  <h3 style="margin:0 0 8px">Grid Container</h3>
  <p style="margin:0;opacity:.9">Edit the CSS and observe how the grid changes.</p>
  <div class="grid" style="margin-top:12px">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div><div class="cell">4</div><div class="cell">5</div><div class="cell">6</div>
  </div>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.grid {`	Targets elements matching: .grid.
`display:grid;`	Sets `display` to `grid`.
`grid-template-columns:240px 1fr;`	Sets `grid-template-columns` to `240px 1fr`.
`grid-template-rows:auto 1fr;`	Sets `grid-template-rows` to `auto 1fr`.
`gap:12px`	Sets `gap` to `12px`.
`}`	Ends the current rule block.

🏢Real-world

1Page layouts, galleries, dashboards, and responsive cards use Grid.
2Two-dimensional alignment is much easier than with floats.

⚠Common Mistakes

1Hardcoding column counts instead of using responsive tracks.
2Forgetting `minmax(0,1fr)` and causing overflow.

✅Best Practices

1Use `repeat(auto-fit, minmax(160px, 1fr))` for responsive grids.
2Use `grid-template-areas` for readable page layouts.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

grid-template-columns grid-template-rows gap grid auto flow grid container

∙ Chapter 085

Grid Items

Place items using grid-column/grid-row or the shorthand grid-area.

📝Syntax

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cell { ... }

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

grid-items.html

📝 Edit Code

/* Topic CSS */
.item.hero {
  grid-column:1 / -1
}
.item.sidebar {
  grid-row:2 / 4
}
</style>
<div class="card">
  <h3 style="margin:0 0 8px">Grid Items</h3>
  <p style="margin:0;opacity:.9">Edit the CSS and observe how the grid changes.</p>
  <div class="grid" style="margin-top:12px">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div><div class="cell">4</div><div class="cell">5</div><div class="cell">6</div>
  </div>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.item.hero {`	Targets elements matching: .item.hero.
`grid-column:1 / -1`	Sets `grid-column` to `1 / -1`.
`}`	Ends the current rule block.
`.item.sidebar {`	Targets elements matching: .item.sidebar.
`grid-row:2 / 4`	Sets `grid-row` to `2 / 4`.
`}`	Ends the current rule block.

🏢Real-world

1Page layouts, galleries, dashboards, and responsive cards use Grid.
2Two-dimensional alignment is much easier than with floats.

⚠Common Mistakes

1Hardcoding column counts instead of using responsive tracks.
2Forgetting `minmax(0,1fr)` and causing overflow.

✅Best Practices

1Use `repeat(auto-fit, minmax(160px, 1fr))` for responsive grids.
2Use `grid-template-areas` for readable page layouts.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

grid-column grid-row grid-area place-items grid

∙ Chapter 086

Grid 12-column Layout

A 12-column grid is a common responsive system for dashboards and websites.

📝Syntax

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cell { ... }

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

grid-12-column-layout.html

📝 Edit Code

/* Topic CSS */
.grid12 {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px
}
.span6 {
  grid-column:span 6
}
@media(max-width:800px) {
  .span6 {
    grid-column:span 12
  }
}
</style>
<div class="card">
  <h3 style="margin:0 0 8px">Grid 12-column Layout</h3>
  <p style="margin:0;opacity:.9">Edit the CSS and observe how the grid changes.</p>
  <div class="grid" style="margin-top:12px">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div><div class="cell">4</div><div class="cell">5</div><div class="cell">6</div>
  </div>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.grid12 {`	Targets elements matching: .grid12.
`display:grid;`	Sets `display` to `grid`.
`grid-template-columns:repeat(12,1fr);`	Sets `grid-template-columns` to `repeat(12,1fr)`.
`gap:12px`	Sets `gap` to `12px`.
`}`	Ends the current rule block.
`.span6 {`	Targets elements matching: .span6.
`grid-column:span 6`	Sets `grid-column` to `span 6`.
`}`	Ends the current rule block.
`@media(max-width:800px) {`	Targets elements matching: @media(max-width:800px).
`.span6 {`	Targets elements matching: .span6.
`grid-column:span 12`	Sets `grid-column` to `span 12`.
`}`	Ends the current rule block.

🏢Real-world

1Page layouts, galleries, dashboards, and responsive cards use Grid.
2Two-dimensional alignment is much easier than with floats.

⚠Common Mistakes

1Hardcoding column counts instead of using responsive tracks.
2Forgetting `minmax(0,1fr)` and causing overflow.

✅Best Practices

1Use `repeat(auto-fit, minmax(160px, 1fr))` for responsive grids.
2Use `grid-template-areas` for readable page layouts.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

12 column grid grid system responsive grid layout css

∙ Chapter 087

CSS @supports

Feature queries let you apply styles only if the browser supports a property/value.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-supports.html

📝 Edit Code

/* Topic CSS */
@supports (backdrop-filter: blur(10px)) {
    .glass {
    backdrop-filter:blur(10px)
  }
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">@supports</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`@supports (backdrop-filter: blur(10px)) {`	Targets elements matching: @supports (backdrop-filter: blur(10px)).
`.glass {`	Targets elements matching: .glass.
`backdrop-filter:blur(10px)`	Sets `backdrop-filter` to `blur(10px)`.
`}`	Ends the current rule block.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

@supports feature queries progressive enhancement fallback css

∙ Chapter 088

RWD Intro

Responsive Web Design (RWD) makes layouts adapt to different screen sizes.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

rwd-intro.html

📝 Edit Code

/* Topic CSS */
/* Mobile-first */
.grid {
  display:grid;
  grid-template-columns:1fr
}
@media(min-width:900px) {
  .grid {
    grid-template-columns:260px 1fr
  }
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">RWD Intro</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.grid {`	Targets elements matching: .grid.
`display:grid;`	Sets `display` to `grid`.
`grid-template-columns:1fr`	Sets `grid-template-columns` to `1fr`.
`}`	Ends the current rule block.
`@media(min-width:900px) {`	Targets elements matching: @media(min-width:900px).
`.grid {`	Targets elements matching: .grid.
`grid-template-columns:260px 1fr`	Sets `grid-template-columns` to `260px 1fr`.
`}`	Ends the current rule block.
`}`	Ends the current rule block.

🏢Real-world

1Make layouts adapt to phones, tablets, and desktops.
2Respect user preferences like reduced motion and dark mode.

⚠Common Mistakes

1Choosing breakpoints by device names (instead of where layout breaks).
2Animating layout properties causing jank on mobile.

✅Best Practices

1Build mobile-first: base styles for small screens, then `@media (min-width: ...)` enhancements.
2Add `prefers-reduced-motion` fallback for animations.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

responsive web design rwd mobile first breakpoints css

∙ Chapter 089

RWD Viewport

The viewport meta tag is required so mobile browsers size the page correctly.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

rwd-viewport.html

📝 Edit Code

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`<meta name="viewport" content="width=device-width, initial-scale=1.0">`	CSS statement.

🏢Real-world

1Make layouts adapt to phones, tablets, and desktops.
2Respect user preferences like reduced motion and dark mode.

⚠Common Mistakes

1Choosing breakpoints by device names (instead of where layout breaks).
2Animating layout properties causing jank on mobile.

✅Best Practices

1Build mobile-first: base styles for small screens, then `@media (min-width: ...)` enhancements.
2Add `prefers-reduced-motion` fallback for animations.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

viewport meta mobile viewport responsive device width html head

∙ Chapter 090

RWD Grid View

Use Grid for page structure, then adjust columns at breakpoints.

📝Syntax

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cell { ... }

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

rwd-grid-view.html

📝 Edit Code

/* Topic CSS */
.grid {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px
}
.main {
  grid-column:1 / -1
}
@media(min-width:900px) {
  .main {
    grid-column:4 / -1
  }
}
</style>
<div class="card">
  <h3 style="margin:0 0 8px">RWD Grid View</h3>
  <p style="margin:0;opacity:.9">Edit the CSS and observe how the grid changes.</p>
  <div class="grid" style="margin-top:12px">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div><div class="cell">4</div><div class="cell">5</div><div class="cell">6</div>
  </div>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.grid {`	Targets elements matching: .grid.
`display:grid;`	Sets `display` to `grid`.
`grid-template-columns:repeat(12,1fr);`	Sets `grid-template-columns` to `repeat(12,1fr)`.
`gap:12px`	Sets `gap` to `12px`.
`}`	Ends the current rule block.
`.main {`	Targets elements matching: .main.
`grid-column:1 / -1`	Sets `grid-column` to `1 / -1`.
`}`	Ends the current rule block.
`@media(min-width:900px) {`	Targets elements matching: @media(min-width:900px).
`.main {`	Targets elements matching: .main.
`grid-column:4 / -1`	Sets `grid-column` to `4 / -1`.
`}`	Ends the current rule block.

🏢Real-world

1Page layouts, galleries, dashboards, and responsive cards use Grid.
2Two-dimensional alignment is much easier than with floats.

⚠Common Mistakes

1Hardcoding column counts instead of using responsive tracks.
2Forgetting `minmax(0,1fr)` and causing overflow.

✅Best Practices

1Use `repeat(auto-fit, minmax(160px, 1fr))` for responsive grids.
2Use `grid-template-areas` for readable page layouts.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

responsive grid css grid breakpoints layout columns

∙ Chapter 091

RWD Media Queries

Breakpoints are simply media queries where your layout needs to change.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

rwd-media-queries.html

📝 Edit Code

/* Topic CSS */
@media(max-width:640px) {
  .nav {
    display:none
  }
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">RWD Media Queries</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`@media(max-width:640px) {`	Targets elements matching: @media(max-width:640px).
`.nav {`	Targets elements matching: .nav.
`display:none`	Sets `display` to `none`.
`}`	Ends the current rule block.
`}`	Ends the current rule block.

🏢Real-world

1Make layouts adapt to phones, tablets, and desktops.
2Respect user preferences like reduced motion and dark mode.

⚠Common Mistakes

1Choosing breakpoints by device names (instead of where layout breaks).
2Animating layout properties causing jank on mobile.

✅Best Practices

1Build mobile-first: base styles for small screens, then `@media (min-width: ...)` enhancements.
2Add `prefers-reduced-motion` fallback for animations.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

responsive media queries breakpoints mobile first css layout

∙ Chapter 092

RWD Images

Make images scale with the container to prevent horizontal scroll.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

rwd-images.html

📝 Edit Code

/* Topic CSS */
img {
  max-width:100%;
  height:auto;
  display:block
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">RWD Images</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`img {`	Targets elements matching: img.
`max-width:100%;`	Sets `max-width` to `100%`.
`height:auto;`	Sets `height` to `auto`.
`display:block`	Sets `display` to `block`.
`}`	Ends the current rule block.

🏢Real-world

1Make layouts adapt to phones, tablets, and desktops.
2Respect user preferences like reduced motion and dark mode.

⚠Common Mistakes

1Choosing breakpoints by device names (instead of where layout breaks).
2Animating layout properties causing jank on mobile.

✅Best Practices

1Build mobile-first: base styles for small screens, then `@media (min-width: ...)` enhancements.
2Add `prefers-reduced-motion` fallback for animations.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

responsive images max-width height auto css img

∙ Chapter 093

RWD Videos

Use an aspect-ratio wrapper for responsive iframes/videos.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

rwd-videos.html

📝 Edit Code

/* Topic CSS */
.ratio {
  aspect-ratio:16/9
}
.ratio iframe {
  width:100%;
  height:100%;
  border:0
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">RWD Videos</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.ratio {`	Targets elements matching: .ratio.
`aspect-ratio:16/9`	Sets `aspect-ratio` to `16/9`.
`}`	Ends the current rule block.
`.ratio iframe {`	Targets elements matching: .ratio iframe.
`width:100%;`	Sets `width` to `100%`.
`height:100%;`	Sets `height` to `100%`.
`border:0`	Sets `border` to `0`.
`}`	Ends the current rule block.

🏢Real-world

1Make layouts adapt to phones, tablets, and desktops.
2Respect user preferences like reduced motion and dark mode.

⚠Common Mistakes

1Choosing breakpoints by device names (instead of where layout breaks).
2Animating layout properties causing jank on mobile.

✅Best Practices

1Build mobile-first: base styles for small screens, then `@media (min-width: ...)` enhancements.
2Add `prefers-reduced-motion` fallback for animations.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

responsive video aspect-ratio iframe css embed

∙ Chapter 094

RWD Frameworks

Frameworks (Bootstrap/Tailwind) speed up responsive UI. Learn core CSS first.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

rwd-frameworks.html

📝 Edit Code

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning

🏢Real-world

1Make layouts adapt to phones, tablets, and desktops.
2Respect user preferences like reduced motion and dark mode.

⚠Common Mistakes

1Choosing breakpoints by device names (instead of where layout breaks).
2Animating layout properties causing jank on mobile.

✅Best Practices

1Build mobile-first: base styles for small screens, then `@media (min-width: ...)` enhancements.
2Add `prefers-reduced-motion` fallback for animations.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

bootstrap tailwind responsive framework css utility grid system

∙ Chapter 095

RWD Templates

Start from a layout template, then customize spacing, typography, and colors.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

rwd-templates.html

📝 Edit Code

/* Topic CSS */
.page {
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr auto
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">RWD Templates</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.page {`	Targets elements matching: .page.
`min-height:100vh;`	Sets `min-height` to `100vh`.
`display:grid;`	Sets `display` to `grid`.
`grid-template-rows:auto 1fr auto`	Sets `grid-template-rows` to `auto 1fr auto`.
`}`	Ends the current rule block.

🏢Real-world

1Make layouts adapt to phones, tablets, and desktops.
2Respect user preferences like reduced motion and dark mode.

⚠Common Mistakes

1Choosing breakpoints by device names (instead of where layout breaks).
2Animating layout properties causing jank on mobile.

✅Best Practices

1Build mobile-first: base styles for small screens, then `@media (min-width: ...)` enhancements.
2Add `prefers-reduced-motion` fallback for animations.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

responsive templates layout template starter css website

∙ Chapter 096

SASS Tutorial

Sass adds variables, nesting, and functions. It compiles to normal CSS.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

sass-tutorial.html

📝 Edit Code

/* Topic CSS */
/* SCSS */
$brand: #00e5ff;
.btn {
    background:$brand;
    &:hover {
    filter:brightness(1.05)
  }
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">SASS Tutorial</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`$brand: #00e5ff;`	Sets `$brand` to `#00e5ff`.
`.btn {`	Targets elements matching: .btn.
`background:$brand;`	Sets `background` to `$brand`.
`&:hover {`	Targets elements matching: &:hover.
`filter:brightness(1.05)`	Sets `filter` to `brightness(1.05)`.
`}`	Ends the current rule block.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

sass scss variables nesting css preprocessor

∙ Chapter 097

CSS Templates

Templates are ready-made layouts. Use them to learn structure and spacing patterns.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-templates.html

📝 Edit Code

/* Topic CSS */
.layout {
  display:grid;
  grid-template-areas:"nav nav" "side main";
  gap:12px
}
.nav {
  grid-area:nav
}
.side {
  grid-area:side
}
.main {
  grid-area:main
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Templates</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.layout {`	Targets elements matching: .layout.
`display:grid;`	Sets `display` to `grid`.
`grid-template-areas:"nav nav" "side main";`	Sets `grid-template-areas` to `"nav nav" "side main"`.
`gap:12px`	Sets `gap` to `12px`.
`}`	Ends the current rule block.
`.nav {`	Targets elements matching: .nav.
`grid-area:nav`	Sets `grid-area` to `nav`.
`}`	Ends the current rule block.
`.side {`	Targets elements matching: .side.
`grid-area:side`	Sets `grid-area` to `side`.
`}`	Ends the current rule block.
`.main {`	Targets elements matching: .main.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css templates layout starter template responsive ui

∙ Chapter 098

CSS Examples

Short examples help you learn one concept at a time.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-examples.html

📝 Edit Code

/* Topic CSS */
.pill {
  border:1px solid #334155;
  padding:6px 10px;
  border-radius:999px
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Examples</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.pill {`	Targets elements matching: .pill.
`border:1px solid #334155;`	Sets `border` to `1px solid #334155`.
`padding:6px 10px;`	Sets `padding` to `6px 10px`.
`border-radius:999px`	Sets `border-radius` to `999px`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css examples snippets learn by example css code practice

∙ Chapter 099

CSS Editor

Use a live editor to test CSS quickly (this page already includes a live CSS lab).

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-editor.html

📝 Edit Code

/* Topic CSS */
/* Tip: isolate a minimal test case */
.box {
  padding:16px;
  border:1px dashed #00e5ff
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Editor</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.box {`	Targets elements matching: .box.
`padding:16px;`	Sets `padding` to `16px`.
`border:1px dashed #00e5ff`	Sets `border` to `1px dashed #00e5ff`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css editor live preview playground try css sandbox

∙ Chapter 100

CSS Snippets

Snippets are reusable patterns like cards, buttons, gradients, and layouts.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-snippets.html

📝 Edit Code

/* Topic CSS */
.card {
  background:#0f172a;
  border:1px solid rgba(148,163,184,.25);
  border-radius:14px;
  padding:18px
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Snippets</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.card {`	Targets elements matching: .card.
`background:#0f172a;`	Sets `background` to `#0f172a`.
`border:1px solid rgba(148,163,184,.25);`	Sets `border` to `1px solid rgba(148,163,184,.25)`.
`border-radius:14px;`	Sets `border-radius` to `14px`.
`padding:18px`	Sets `padding` to `18px`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css snippets ui patterns reusable css components design

∙ Chapter 101

CSS Quiz

Quick quiz: test concepts like selectors, box model, and specificity.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-quiz.html

📝 Edit Code

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css quiz css questions practice learn css mcq

∙ Chapter 102

CSS Exercises

Exercises help you build muscle memory by writing CSS from scratch.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-exercises.html

📝 Edit Code

/* Topic CSS */
/* Exercise: create a card */
.card {
  padding:16px;
  border-radius:14px;
  border:1px solid #334155
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Exercises</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.card {`	Targets elements matching: .card.
`padding:16px;`	Sets `padding` to `16px`.
`border-radius:14px;`	Sets `border-radius` to `14px`.
`border:1px solid #334155`	Sets `border` to `1px solid #334155`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css exercises practice css learn css challenges training

∙ Chapter 103

CSS Code Challenges

Challenges combine multiple concepts (layout + typography + states).

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-code-challenges.html

📝 Edit Code

/* Topic CSS */
/* Challenge: responsive navbar */
.nav {
  display:flex;
  justify-content:space-between;
  align-items:center
}
@media(max-width:640px) {
  .nav {
    flex-direction:column;
    align-items:stretch
  }
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Code Challenges</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.nav {`	Targets elements matching: .nav.
`display:flex;`	Sets `display` to `flex`.
`justify-content:space-between;`	Sets `justify-content` to `space-between`.
`align-items:center`	Sets `align-items` to `center`.
`}`	Ends the current rule block.
`@media(max-width:640px) {`	Targets elements matching: @media(max-width:640px).
`.nav {`	Targets elements matching: .nav.
`flex-direction:column;`	Sets `flex-direction` to `column`.
`align-items:stretch`	Sets `align-items` to `stretch`.
`}`	Ends the current rule block.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css challenges projects practice ui layout

∙ Chapter 104

CSS Website

Build a small website to apply everything: layout, components, responsiveness, and accessibility.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-website.html

📝 Edit Code

/* Topic CSS */
.page {
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr auto
}
header,footer {
  padding:16px
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Website</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.page {`	Targets elements matching: .page.
`min-height:100vh;`	Sets `min-height` to `100vh`.
`display:grid;`	Sets `display` to `grid`.
`grid-template-rows:auto 1fr auto`	Sets `grid-template-rows` to `auto 1fr auto`.
`}`	Ends the current rule block.
`header,footer {`	Targets elements matching: header,footer.
`padding:16px`	Sets `padding` to `16px`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

build website css project responsive website portfolio layout

∙ Chapter 105

CSS Syllabus

A syllabus is a checklist of topics. Use it to track learning progress.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-syllabus.html

📝 Edit Code

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css syllabus css roadmap learning path topics plan

∙ Chapter 106

CSS Study Plan

A simple plan: learn basics → build components → learn layout → ship a mini project.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-study-plan.html

📝 Edit Code

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`Week 1: selectors + box model`	Sets `Week 1` to `selectors + box model`.
`Week 2: typography + components`	Sets `Week 2` to `typography + components`.
`Week 3: flexbox + grid`	Sets `Week 3` to `flexbox + grid`.
`Week 4: responsive + a11y + project`	Sets `Week 4` to `responsive + a11y + project`.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css study plan roadmap learn css fast practice projects

∙ Chapter 107

CSS Interview Prep

Common interview topics: specificity, box model, layout, and responsive strategies.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-interview-prep.html

📝 Edit Code

/* Topic CSS */
/* Common Q: center a div */
.center {
  display:grid;
  place-items:center;
  min-height:100vh
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Interview Prep</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.center {`	Targets elements matching: .center.
`display:grid;`	Sets `display` to `grid`.
`place-items:center;`	Sets `place-items` to `center`.
`min-height:100vh`	Sets `min-height` to `100vh`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css interview frontend interview css questions specificity box model

∙ Chapter 108

CSS Bootcamp

Bootcamp mode: build 10 UI components and 3 full layouts with reviews and refactors.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-bootcamp.html

📝 Edit Code

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`Day 1: Buttons + Inputs`	Sets `Day 1` to `Buttons + Inputs`.
`Day 2: Cards + Modals`	Sets `Day 2` to `Cards + Modals`.
`Day 3: Navbar + Sidebar`	Sets `Day 3` to `Navbar + Sidebar`.
`Day 4: Grid layout`	Sets `Day 4` to `Grid layout`.
`Day 5: Responsive + A11y`	Sets `Day 5` to `Responsive + A11y`.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css bootcamp intensive projects components practice

∙ Chapter 109

CSS Certificate

A certificate typically requires a final project and a knowledge test.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-certificate.html

📝 Edit Code

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css certificate css certification frontend project exam

∙ Chapter 110

CSS Reference

A quick reference of properties, selectors, and patterns you use daily.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-reference.html

📝 Edit Code

/* Topic CSS */
display: flex | grid | block
position: relative | absolute | fixed | sticky
box-sizing: border-box
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Reference</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`display: flex \| grid \| block`	Sets `display` to `flex \| grid \| block`.
`position: relative \| absolute \| fixed \| sticky`	Sets `position` to `relative \| absolute \| fixed \| sticky`.
`box-sizing: border-box`	Sets `box-sizing` to `border-box`.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css reference properties selectors cheatsheet css docs

∙ Chapter 111

CSS Selectors (References)

Selectors target elements (by tag, class, id, attributes, states) so you can style them.

📝Syntax

.btn { ... }
#hero { ... }
input[type="email"] { ... }
.btn:hover { ... }
.btn::before { ... }

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-selectors.html

📝 Edit Code

/* Topic CSS */
button.primary {
  background:#0ea5e9;
  color:#fff
}
#hero {
  padding:24px
}
input[type="email"] {
  border:1px solid #94a3b8
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Selectors</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`button.primary {`	Targets elements matching: button.primary.
`background:#0ea5e9;`	Sets `background` to `#0ea5e9`.
`color:#fff`	Sets `color` to `#fff`.
`}`	Ends the current rule block.
`#hero {`	Targets elements matching: #hero.
`padding:24px`	Sets `padding` to `24px`.
`}`	Ends the current rule block.
`input[type="email"] {`	Targets elements matching: input[type="email"].
`border:1px solid #94a3b8`	Sets `border` to `1px solid #94a3b8`.
`}`	Ends the current rule block.

🏢Real-world

1Target buttons/links/forms precisely without adding extra HTML.
2Build reusable component classes instead of styling every tag globally.

⚠Common Mistakes

1Using IDs everywhere (high specificity, hard to override).
2Writing overly long selectors that are fragile.

✅Best Practices

1Prefer class selectors for components.
2Keep specificity low; override by placing rules later or using a parent class.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css selectors class selector id selector attribute selector pseudo class

∙ Chapter 112

CSS Combinators (References)

Combinators select elements by relationship: descendant, child, adjacent sibling, general sibling.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-combinators.html

📝 Edit Code

/* Topic CSS */
.card a {
  color:#00e5ff
}
      /* descendant */
ul > li {
  margin-top:6px
}
  /* child */
h2 + p {
  margin-top:0
}
     /* adjacent */
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Combinators</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.card a {`	Targets elements matching: .card a.
`color:#00e5ff`	Sets `color` to `#00e5ff`.
`}`	Ends the current rule block.
`ul > li {`	Targets elements matching: ul > li.
`margin-top:6px`	Sets `margin-top` to `6px`.
`}`	Ends the current rule block.
`h2 + p {`	Targets elements matching: h2 + p.
`margin-top:0`	Sets `margin-top` to `0`.
`}`	Ends the current rule block.

🏢Real-world

1Target buttons/links/forms precisely without adding extra HTML.
2Build reusable component classes instead of styling every tag globally.

⚠Common Mistakes

1Using IDs everywhere (high specificity, hard to override).
2Writing overly long selectors that are fragile.

✅Best Practices

1Prefer class selectors for components.
2Keep specificity low; override by placing rules later or using a parent class.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css combinators descendant selector child selector adjacent sibling general sibling

∙ Chapter 113

CSS Pseudo-classes (References)

Pseudo-classes target states: :hover, :focus-visible, :checked, :nth-child() and more.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-pseudo-classes.html

📝 Edit Code

/* Topic CSS */
button:hover {
  filter:brightness(1.05)
}
input:checked + label {
  font-weight:800
}
li:nth-child(odd) {
  opacity:.9
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Pseudo-classes</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`button:hover {`	Targets elements matching: button:hover.
`filter:brightness(1.05)`	Sets `filter` to `brightness(1.05)`.
`}`	Ends the current rule block.
`input:checked + label {`	Targets elements matching: input:checked + label.
`font-weight:800`	Sets `font-weight` to `800`.
`}`	Ends the current rule block.
`li:nth-child(odd) {`	Targets elements matching: li:nth-child(odd).
`opacity:.9`	Sets `opacity` to `.9`.
`}`	Ends the current rule block.

🏢Real-world

1Target buttons/links/forms precisely without adding extra HTML.
2Build reusable component classes instead of styling every tag globally.

⚠Common Mistakes

1Using IDs everywhere (high specificity, hard to override).
2Writing overly long selectors that are fragile.

✅Best Practices

1Prefer class selectors for components.
2Keep specificity low; override by placing rules later or using a parent class.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

pseudo class hover focus visible nth-child checked

∙ Chapter 114

CSS Pseudo-elements (References)

Pseudo-elements style parts of elements: ::before, ::after, ::first-line, ::marker.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-pseudo-elements.html

📝 Edit Code

/* Topic CSS */
.pill::before {
  content:"#";
  opacity:.7;
  margin-right:6px
}
li::marker {
  color:#ff4081
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Pseudo-elements</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.pill::before {`	Targets elements matching: .pill::before.
`content:"#";`	Sets `content` to `"#"`.
`opacity:.7;`	Sets `opacity` to `.7`.
`margin-right:6px`	Sets `margin-right` to `6px`.
`}`	Ends the current rule block.
`li::marker {`	Targets elements matching: li::marker.
`color:#ff4081`	Sets `color` to `#ff4081`.
`}`	Ends the current rule block.

🏢Real-world

1Target buttons/links/forms precisely without adding extra HTML.
2Build reusable component classes instead of styling every tag globally.

⚠Common Mistakes

1Using IDs everywhere (high specificity, hard to override).
2Writing overly long selectors that are fragile.

✅Best Practices

1Prefer class selectors for components.
2Keep specificity low; override by placing rules later or using a parent class.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

pseudo element before after marker first-line

∙ Chapter 115

CSS At-rules

At-rules begin with @ and control features like media queries, keyframes, supports, and fonts.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-at-rules.html

📝 Edit Code

/* Topic CSS */
@media (max-width:700px) {
  ...
}
@supports (display:grid) {
  ...
}
@keyframes spin {
  to {
    transform:rotate(1turn)
  }
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">At-rules</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`@media (max-width:700px) {`	Targets elements matching: @media (max-width:700px).
`...`	CSS statement.
`}`	Ends the current rule block.
`@supports (display:grid) {`	Targets elements matching: @supports (display:grid).
`...`	CSS statement.
`}`	Ends the current rule block.
`@keyframes spin {`	Targets elements matching: @keyframes spin.
`to {`	Targets elements matching: to.
`transform:rotate(1turn)`	Sets `transform` to `rotate(1turn)`.
`}`	Ends the current rule block.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css at-rules @media @keyframes @supports @font-face

∙ Chapter 116

CSS Functions

Functions like var(), calc(), clamp(), rgb(), and url() build powerful values.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-functions.html

📝 Edit Code

/* Topic CSS */
.box {
  padding:calc(12px + 1vw);
  color:rgb(34 211 238);
  background:var(--surface)
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Functions</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.box {`	Targets elements matching: .box.
`padding:calc(12px + 1vw);`	Sets `padding` to `calc(12px + 1vw)`.
`color:rgb(34 211 238);`	Sets `color` to `rgb(34 211 238)`.
`background:var(--surface)`	Sets `background` to `var(--surface)`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css functions var calc clamp rgb

∙ Chapter 117

CSS Reference Aural

Aural/speech CSS was experimental and is largely obsolete; focus on modern accessibility instead.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-reference-aural.html

📝 Edit Code

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

aural css speech css obsolete css accessibility css history

∙ Chapter 118

CSS Web Safe Fonts

Web-safe fonts work everywhere. Use them as fallbacks even with custom fonts.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-web-safe-fonts.html

📝 Edit Code

/* Topic CSS */
body {
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Web Safe Fonts</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`body {`	Targets elements matching: body.
`font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif`	Sets `font-family` to `system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

web safe fonts font stack fallback fonts typography css

∙ Chapter 119

CSS Animatable

Not every property animates smoothly. Prefer transform/opacity for performance.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-animatable.html

📝 Edit Code

/* Topic CSS */
/* Smooth */
.card {
  transition:transform .2s ease, opacity .2s ease
}
/* Avoid animating layout too often: width/left/top */
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Animatable</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.card {`	Targets elements matching: .card.
`transition:transform .2s ease, opacity .2s ease`	Sets `transition` to `transform .2s ease, opacity .2s ease`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

animatable properties css animation performance transform opacity jank

∙ Chapter 120

CSS Units (References)

Use px for fixed sizes, rem for scalable typography, and %/vw for responsive layouts.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-units.html

📝 Edit Code

/* Topic CSS */
:root {
  font-size:16px
}
h1 {
  font-size:2rem
}
.box {
  width:50vw;
  max-width:720px
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Units</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`:root {`	Targets elements matching: :root.
`font-size:16px`	Sets `font-size` to `16px`.
`}`	Ends the current rule block.
`h1 {`	Targets elements matching: h1.
`font-size:2rem`	Sets `font-size` to `2rem`.
`}`	Ends the current rule block.
`.box {`	Targets elements matching: .box.
`width:50vw;`	Sets `width` to `50vw`.
`max-width:720px`	Sets `max-width` to `720px`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css units px rem em vw

∙ Chapter 121

CSS PX-EM Converter

Convert px to em/rem: em = px / baseFontSize (usually 16).

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-px-em-converter.html

📝 Edit Code

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

px to em px to rem css converter typography units

∙ Chapter 122

CSS Colors (References)

CSS supports named colors, hex, rgb/rgba, hsl/hsla, and modern color functions.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-colors.html

📝 Edit Code

/* Topic CSS */
.badge {
  color:#0f172a;
  background:#ffd54f
}
.overlay {
  background:rgba(2,6,23,.6)
}
.brand {
  color:hsl(190 95% 45%)
}
</style>
<div class="card">
  <h3 style="margin:0 0 8px">Colors</h3>
  <p style="margin:0;opacity:.9">Edit the CSS to change background, colors, and contrast.</p>
  <div class="panel" style="margin-top:12px;padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,.12)">Color panel</div>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.badge {`	Targets elements matching: .badge.
`color:#0f172a;`	Sets `color` to `#0f172a`.
`background:#ffd54f`	Sets `background` to `#ffd54f`.
`}`	Ends the current rule block.
`.overlay {`	Targets elements matching: .overlay.
`background:rgba(2,6,23,.6)`	Sets `background` to `rgba(2,6,23,.6)`.
`}`	Ends the current rule block.
`.brand {`	Targets elements matching: .brand.
`color:hsl(190 95% 45%)`	Sets `color` to `hsl(190 95% 45%)`.
`}`	Ends the current rule block.

🏢Real-world

1Create visual hierarchy: backgrounds, contrast, and subtle shadows.
2Gradients and shadows can replace image assets for simple UI depth.

⚠Common Mistakes

1Low contrast text (hard to read).
2Overusing heavy shadows and making UI look blurry.

✅Best Practices

1Aim for readable contrast; test quickly by lowering screen brightness.
2Prefer soft, low-opacity shadows and avoid stacking many effects.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css colors hex color rgb hsl rgba

∙ Chapter 123

CSS Color Values

Color values include hex, rgb/rgba, hsl/hsla, and named colors.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-color-values.html

📝 Edit Code

/* Topic CSS */
.a {
  color:#00e5ff
}
.b {
  color:rgb(124 77 255)
}
.c {
  color:hsl(330 100% 62%)
}
</style>
<div class="card">
  <h3 style="margin:0 0 8px">Color Values</h3>
  <p style="margin:0;opacity:.9">Edit the CSS to change background, colors, and contrast.</p>
  <div class="panel" style="margin-top:12px;padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,.12)">Color panel</div>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`.a {`	Targets elements matching: .a.
`color:#00e5ff`	Sets `color` to `#00e5ff`.
`}`	Ends the current rule block.
`.b {`	Targets elements matching: .b.
`color:rgb(124 77 255)`	Sets `color` to `rgb(124 77 255)`.
`}`	Ends the current rule block.
`.c {`	Targets elements matching: .c.
`color:hsl(330 100% 62%)`	Sets `color` to `hsl(330 100% 62%)`.
`}`	Ends the current rule block.

🏢Real-world

1Create visual hierarchy: backgrounds, contrast, and subtle shadows.
2Gradients and shadows can replace image assets for simple UI depth.

⚠Common Mistakes

1Low contrast text (hard to read).
2Overusing heavy shadows and making UI look blurry.

✅Best Practices

1Aim for readable contrast; test quickly by lowering screen brightness.
2Prefer soft, low-opacity shadows and avoid stacking many effects.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css color values hex rgb hsl rgba

∙ Chapter 124

CSS Default Values

Browsers apply default styles (user agent stylesheet). Reset/normalize can help consistency.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-default-values.html

📝 Edit Code

/* Topic CSS */
body {
  margin:0
}
img {
  max-width:100%;
  height:auto
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Default Values</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`body {`	Targets elements matching: body.
`margin:0`	Sets `margin` to `0`.
`}`	Ends the current rule block.
`img {`	Targets elements matching: img.
`max-width:100%;`	Sets `max-width` to `100%`.
`height:auto`	Sets `height` to `auto`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

css defaults user agent stylesheet normalize reset browser default

∙ Chapter 125

CSS Browser Support

Use progressive enhancement: ship a baseline, then add modern features with fallbacks.

📝Syntax

selector {
  property: value;
}

⚡Example (Edit & Run)

Edit the example below. Keep the <style> section and experiment.

css-browser-support.html

📝 Edit Code

/* Topic CSS */
@supports (backdrop-filter: blur(10px)) {
    .glass {
    backdrop-filter:blur(10px)
  }
}
.glass {
  background:rgba(255,255,255,.06)
}
</style>
<div id="hero" class="card">
  <h3 class="title" style="margin:0 0 8px">Browser Support</h3>
  <p class="text" style="margin:0;opacity:.9">Edit the CSS in the <code>&lt;style&gt;</code> block and run again.</p>
  <div class="row" style="margin-top:12px">
    <button class="btn primary">Primary</button>
    <button class="btn secondary">Secondary</button>
    <a class="link" href="#" onclick="return false">Link</a>
  </div>
  <div style="margin-top:12px">
    <input type="email" placeholder="email@example.com" />
  </div>
  <div class="grid">
    <div class="cell">1</div><div class="cell">2</div><div class="cell">3</div>
  </div>
  <ul class="list">
    <li>List item</li>
    <li>Another item</li>
  </ul>
</div>

👁 Live Preview

💡 Tip: start by changing colors, spacing, and then layout properties.

🔍Line-by-line

Line	Meaning
`@supports (backdrop-filter: blur(10px)) {`	Targets elements matching: @supports (backdrop-filter: blur(10px)).
`.glass {`	Targets elements matching: .glass.
`backdrop-filter:blur(10px)`	Sets `backdrop-filter` to `blur(10px)`.
`}`	Ends the current rule block.
`}`	Ends the current rule block.
`.glass {`	Targets elements matching: .glass.
`background:rgba(255,255,255,.06)`	Sets `background` to `rgba(255,255,255,.06)`.
`}`	Ends the current rule block.

🏢Real-world

1UI components (buttons, cards, navbars) use these rules daily.

⚠Common Mistakes

1Small typos (missing `;`, wrong selector) are the #1 reason CSS "does not work".

✅Best Practices

1Use DevTools: inspect the element and check which rule wins.

📖Summary & Practice

1Understand the core concept, then practice it in a small UI component.
2Prefer simple rules that are easy to override and reuse.

💡Practice: answer the questions below, then modify the example to match your answers.

1Change one thing, run, and explain the result in 1 sentence.
2Try to recreate the same look using a different property/approach.
3In DevTools, find which rule is winning and why.

📈SEO

Keywords (topic intent):

browser support progressive enhancement fallback @supports compatibility

CSS — Complete Tutorial

CSS HOME

CSS Introduction

CSS Syntax

CSS Selectors

CSS How To

CSS Comments

CSS Errors

CSS Colors

CSS Backgrounds

CSS Borders

CSS Margins

CSS Padding

CSS Height / Width

CSS Box Model

CSS Outline

CSS Text

CSS Fonts

CSS Icons

CSS Links

CSS Lists

CSS Tables

CSS Display

CSS Max-width

CSS Position

CSS Position Offsets

CSS Z-index

CSS Overflow

CSS Float

CSS Inline-block

CSS Align

CSS Combinators

CSS Pseudo-classes

CSS Pseudo-elements

CSS Opacity

CSS Navigation Bars

CSS Dropdowns

CSS Image Gallery

CSS Image Sprites

CSS Attribute Selectors

CSS Forms

CSS Counters

CSS Units

CSS Inheritance

CSS Specificity

CSS !important

CSS Math Functions

CSS Optimization

CSS Accessibility

CSS Website Layout

CSS Rounded Corners

CSS Border Images

CSS Backgrounds (Advanced)

CSS Colors (Advanced)

CSS Gradients

CSS Shadows

CSS Text Effects

CSS Custom Fonts

CSS 2D Transforms

CSS 3D Transforms

CSS Transitions

CSS Animations

CSS Tooltips

CSS Image Styling

CSS Image Modal

CSS Image Centering

CSS Image Filters

CSS Image Shapes

CSS object-fit

CSS object-position

CSS Masking

CSS Buttons

CSS Pagination

CSS Multiple Columns

CSS User Interface

CSS Variables

CSS @property

CSS Box Sizing

CSS Media Queries

Flexbox Intro