CSS Fundamentals

CSS as the visual layer

CSS controls how HTML is presented. It handles colour, typography, spacing, borders, shadows, layout, transitions, and responsive behaviour. Professional CSS keeps visual rules separate from content meaning.

Selectors, cascade, and specificity

Selectors target HTML elements. Element selectors are broad, class selectors are reusable, and ID selectors are highly specific. Most professional CSS relies on classes because they are predictable and easier to reuse.

When multiple rules target the same property, the browser resolves the conflict using importance, specificity, and source order. Avoid fighting the cascade with increasingly specific selectors. A small component class is usually easier to maintain than a long selector tied to one page structure.

The box model

Every element has content, padding, border, and margin. Padding creates space inside an element. Margin creates space outside it. Using box-sizing: border-box makes layout calculations more predictable.

Typography systems

Good typography uses a readable base size, strong heading scale, comfortable line height, and sensible content widths. Long lines are hard to read, so paragraphs should not stretch across the whole page.

Reusable components

A good stylesheet becomes a small design system. Classes like container, card, button, section, and grid help reduce duplication. Use custom properties for repeated decisions such as colours, spacing, and shadows so changes remain consistent.

States are part of the design

Interactive controls need more than a default appearance. Add hover styles for pointer users and visible focus styles for keyboard users. Disabled, error, and success states should remain readable and should not rely on colour alone. Treat these states as part of the component rather than as finishing touches.

Example code

:root {
  --text: #111827;
  --muted: #586574;
  --primary: #2457c5;
  --surface: #ffffff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Inter, Arial, sans-serif;
  color: var(--text);
  line-height: 1.6;
}

.card {
  padding: 24px;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 18px 48px rgba(17, 24, 39, 0.10);
}

Applied example: a complete button component

This button has a reusable base style plus hover and keyboard-focus states.

.button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--primary);
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.button:hover {
  background: #1d4ed8;
}

.button:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.3);
  outline-offset: 3px;
}

Guided example: how to approach this lesson

Use these steps as a practical build process. The goal is not just to read the concept, but to know exactly how to apply it in your own page.

Step 1: Set global defaults

Start with box-sizing, body font, background, text colour, and line height. These rules create consistency across the whole site.

Step 2: Create reusable classes

Build components such as .container, .card, .button, and .section instead of styling every element separately.

Step 3: Add visual hierarchy

Use size, weight, spacing, and colour to guide the learner’s eye from the most important content to supporting details.

More examples

Compare these examples carefully. The improved version shows the kind of code pattern you should aim for when building your own project.

Messy one-off CSS

.blue-box {
  background: blue;
  margin-left: 37px;
  padding: 13px;
}

.big-text {
  font-size: 41px;
}

This is hard to reuse because names describe appearance instead of purpose and spacing is inconsistent.

Reusable component CSS

.card {
  padding: 24px;
  border-radius: 28px;
  background: var(--surface);
}

.card-title {
  font-size: 1.5rem;
  line-height: 1.15;
}

This is easier to maintain because the class names describe the component and the spacing is intentional.

Before moving on

Use this checklist to make sure you understand the lesson well enough to apply it without copying blindly.

Are colours stored in variables?
Are repeated styles turned into reusable classes?
Is spacing consistent across sections?
Are hover and focus states included?

Common mistakes to avoid

Using too many unrelated colours.
Adding random margins.
Overusing IDs for styling.
Removing focus outlines without replacement.

Practice task

Style the semantic homepage from the previous lesson as a small design system.

Required outcome

Add custom properties for text, muted text, primary colour, surface colour, spacing, and shadow.
Create reusable .container, .card, and .button classes.
Use the same card class for three service cards with consistent spacing.
Add readable typography, hover styles, and a visible :focus-visible style.

Stretch goal: Add a secondary button variation without duplicating the complete button rule.

Previous lesson Next lesson

What you’ll learn

Track this lesson