Chapter 3

CSS

CSS (Cascading Style Sheets) controls the visual presentation of HTML. It sets colours, fonts, spacing, layout, and how a page looks on different screen sizes.

How the cascade works

The “cascading” part of CSS describes how the browser decides which style wins when two rules target the same element. It works through three criteria in order:

  1. Origin: browser defaults lose to author styles, which lose to inline styles.
  2. Specificity: a more specific selector beats a less specific one (ID beats class beats element).
  3. Source order: if two rules have equal specificity, the last one in the file wins.

Understanding the cascade helps you predict which styles apply and fix conflicts without guessing.

Before you start

You should be comfortable with basic HTML before learning CSS:

  • How to write HTML elements (<p>, <div>, <h1>, etc.)
  • How attributes work (class, id, src, href)
  • The difference between block elements (<div>, <p>) and inline elements (<span>, <a>)

If those feel unfamiliar, spend some time with the HTML section first.

Where to start

Work through these pages in order:

  1. Basics : selectors, the cascade, specificity, and the box model
  2. Colors : named colours, hex, rgb(), hsl(), and modern oklch()
  3. Fonts : font families, sizes, weights, and loading web fonts
  4. Text : alignment, spacing, decoration, and text overflow
  5. Border : border styles, radius, and box-shadow
  6. Margin and Padding : spacing inside and outside elements
  7. Position : static, relative, absolute, fixed, and sticky
  8. Flexbox : one-dimensional layout for rows and columns
  9. Grid : two-dimensional layout for complex page structures
  10. Pseudo-classes and Pseudo-elements : hover, focus, nth-child, ::before, ::after
  11. Responsive Design : media queries, viewport, and fluid units
  12. Transform : translate, rotate, scale, and CSS transitions
  13. Custom Properties : CSS variables for reusable values and theming