Web Development · Beginner level

Beginner level · Module 2: CSS and Responsive Layout · Lesson 1 of 3

CSS Fundamentals: Selectors, Cascade and Box Model

Write CSS rules, understand how conflicting rules are resolved, and control size and spacing with the box model.

In this lesson you will

  • Write CSS rules with element, class and attribute selectors
  • Explain specificity, the cascade and the box model

Key concepts

selector and declarationspecificity and cascadebox modelcustom properties

The lesson

A CSS rule selects elements and declares styles: .card { padding: 1rem; }. Link a stylesheet with <link rel="stylesheet"> in the head. Prefer class selectors for styling; IDs and inline styles have high specificity and make overriding difficult.

When rules conflict, the browser uses the cascade: importance, then specificity (ID beats class beats element), then source order. Some properties, such as color and font-family, are inherited by child elements.

Every element is a box: content, padding, border and margin. With box-sizing: border-box, width includes padding and border, which makes layouts predictable. Custom properties (--brand-blue: #1d448a;) store values such as colours once and reuse them everywhere.

Step by step

  1. Create styles.css and link it.
  2. Style text and colours using custom properties.
  3. Set box-sizing: border-box for all elements.
  4. Use DevTools to inspect an element's box model and resolve a style conflict.

Practice activity

Create a small design system for the organisation: colour and spacing custom properties, base typography and a card style.

Expected result: Styles are applied consistently through custom properties and classes, with no inline styles.

Check your understanding

  1. Which wins: a class selector or an element selector?

    Show answer

    The class selector, because it is more specific.

  2. What does box-sizing: border-box change?

    Show answer

    Width and height include padding and border.

Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.