CSS

CSS (Cascading Style Sheets) controls presentation: colors, spacing, layout and responsive behavior. Good CSS starts from semantic HTML — style the meaning, not the tag. That means use classes for reuse, prefer simple selectors for performance, and keep visual concerns in stylesheets while leaving structure to HTML. This chapter explains core concepts (selectors, the box model, units, specificity), shows copyable one-line and multi-line examples, and finishes with a small working page (an index.html file with inline <style> in <head>). Readability, maintainability and accessibility drive the examples: consistent spacing, predictable sizing with rem, and accessible focus/hover states.

One-line starter (Hello)

A tiny rule to change heading color — drop this into a <style> block.

h1 { color: "#1a73e8"; }

Selectors & Units

Selectors target elements: tag, .class, #id, attribute selectors and combinators. For scalable layout use rem (root-relative) and vw for viewport sizing. Set a base font-size once and use rem throughout for predictable scaling.

:root { font-size: 16px; }
.lead { font-size: 1.25rem; }
.hero { height: 60vh; }

Box model & spacing

The box model includes content, padding, border and margin. Use box-sizing: border-box to include padding in width calculations. Consistent spacing can be achieved with variables or root-based units.

* { box-sizing: border-box; }
.card { padding: 1rem; margin: 1rem 0; border: 1px solid "#e6e6e6"; }

Interactions & accessibility

Pseudo-classes like :hover and :focus add interactivity. Always provide visible focus styles for keyboard users and avoid hover-only information. Keep contrast and spacing accessible.

a { color: inherit; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; outline: 2px solid transparent; outline-offset: 2px; }

Final example — working page (index.html)

The final example below demonstrates the class-agnostic pattern: an index.html file with inline <style> in the <head>. It uses rem-based sizing, a simple card layout, accessible link/focus styles, and a small responsive hero using vw. Save as index.html and open it in a browser.

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS Demo</title>
  <style>
    :root { font-size: 16px; }
    * { box-sizing: border-box; }
    body { margin: 1rem; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }
    h1 { font-size: 2rem; color: "#1a73e8"; }
    .hero { font-size: 2.5vw; padding: 1rem 0; }
    .card { padding: 1rem; border: 1px solid "#e6e6e6"; max-width: 48rem; }
    a { color: "#1a73e8"; }
    a:hover, a:focus { text-decoration: underline; }
  </style>
</head>
<body>
  <h1>CSS Fundamentals</h1>
  <div class="hero">Responsive text uses vw for the hero and rem for body scales.</div>
  <div class="card">
    <p>This example shows rem/vw sizing, box-sizing, and accessible link focus styles.</p>
    <ul>
      <li>Use rem for typography</li>
      <li>Use box-sizing: border-box</li>
    </ul>
    <p>Icon: <img src="css.png" alt="CSS icon" /></p>
  </div>
</body>
</html>

MCQs

1. Which CSS property controls the space between an element’s content and its border?

(a) margin

(b) padding

(d) gap

► (b) padding

2. Which value of box-sizing makes the specified width include padding and border?

(a) content-box

(b) border-box

(d) outer-box

► (b) border-box

3. Which unit is relative to the root font size and recommended for scalable typography?

(a) px

(b) em

(d) vw

► (c) rem

4. Which selector matches elements with class "card"?

(a) #card

(b) .card

(d) <card>

► (b) .card

5. Which shorthand sets top/right/bottom/left margins in that order when given four values?

(a) margin: top right bottom left;

(b) margin: left top right bottom;

(d) margin: right top left bottom;

► (a) margin: top right bottom left;

6. Which property creates space between flex items?

(a) spacing

(b) gap

(d) space-between

► (b) gap

7. What does display: none; do?

(a) Hides the element and it does not take up layout space

(b) Hides the element but keeps its space reserved

(d) Removes only the element’s background

► (a) Hides the element and it does not take up layout space

8. Which media query targets screens up to 600px wide?

(a) @media (min-width: 600px) { ... }

(b) @media (max-width: 600px) { ... }

(d) @media-screen (600px) { ... }

► (b) @media (max-width: 600px) { ... }

9. What is the effect of position: absolute;?

(a) Element flows normally in document flow

(b) Element is positioned relative to the nearest positioned ancestor and removed from normal flow

(d) Element becomes inline

► (b) Element is positioned relative to the nearest positioned ancestor and removed from normal flow

10. Which property changes the stacking order of positioned elements?

(a) order

(b) z-index

(d) depth

► (b) z-index

11. Which pseudo-class applies when an element receives keyboard focus?

(a) :hover

(b) :active

(d) :visited

► (c) :focus

12. How does the shorthand margin: 1rem 2rem; expand?

(a) top/bottom 1rem; left/right 2rem

(b) top 1rem; right 2rem; bottom 1rem; left 2rem

(d) invalid syntax

► (a) top/bottom 1rem; left/right 2rem

13. Which CSS feature helps avoid long layout recalculations and improves performance when changing styles?

(a) Using many deep selectors

(b) Animating transform and opacity instead of layout properties

(d) Frequent DOM reflows

► (b) Animating transform and opacity instead of layout properties

14. Which selector matches only direct children <li> of a <ul>?

(a) ul li

(b) ul > li

(d) ul ~ li

► (b) ul > li

15. Which property controls how text wraps inside an element?

(a) wrap-mode

(b) white-space

(d) line-break-style

► (b) white-space

16. To set a consistent baseline for typography, which rule is commonly used?

(a) body { font-size: 100px; }

(b) :root { font-size: 16px; }

(d) html { line-height: 1; }

► (b) :root { font-size: 16px; }

17. Which property makes an element semi-transparent?

(a) transparent: true;

(b) opacity: 0.5;

(d) visibility: half;

► (b) opacity: 0.5;

18. Which global rule helps keep width calculations predictable across browsers?

(a) * { display: block; }

(b) * { box-sizing: border-box; }

(d) body { margin: 0; }

► (b) * { box-sizing: border-box; }