CSS (Cascading Style Sheets) is the language that controls how HTML elements look on screen — their colour, size, font, and layout. Think of HTML as the skeleton of a web page and CSS as the clothing: the structure stays the same while the style changes what visitors actually see.

What problem does CSS solve?

Imagine writing a book where every sentence had its own colour instructions embedded beside the words. It would be unreadable chaos. Early web pages did exactly this with inline style="..." attributes on every tag. CSS separates presentation from content, letting you write style rules once in one place and apply them to every matching element across hundreds of pages. Change one CSS file and the whole website updates instantly — that is the power of abstraction applied to design.

What is the structure of a CSS rule?

A CSS rule has two parts: a selector that identifies which HTML elements to target, and a declaration block containing one or more property: value pairs.

selector {
    property: value;
    property: value;
}

Worked example — making all paragraph text blue and 18 px:

p {
    color: blue;
    font-size: 18px;
}

Here p is the selector (every <p> element), color and font-size are properties, and blue / 18px are their values.

What types of selectors exist?

Selector type Syntax What it targets
Element p Every <p> tag on the page
Class .highlight Any element with class="highlight"
ID #main-title The single element with id="main-title"
Descendant div p Every <p> inside a <div>
Universal * Every element on the page

Classes (.) are reusable; IDs (#) must be unique per page. In most projects you will use element and class selectors most often.

What is the CSS box model?

Every HTML element is treated as a rectangular box. The box model describes the four layers around every element's content:

+-----------------------------+
|         margin              |  (space outside the border)
|  +----------------------+   |
|  |       border         |   |  (visible edge)
|  |  +----------------+  |   |
|  |  |    padding     |  |   |  (space inside the border)
|  |  |  +----------+  |  |   |
|  |  |  | content  |  |  |   |  (text, image, etc.)
|  |  |  +----------+  |  |   |
|  |  +----------------+  |   |
|  +----------------------+   |
+-----------------------------+
Layer CSS property Effect
Content width, height Sets the size of the content area
Padding padding Space between content and border
Border border Visible line around the padding
Margin margin Space between this element and its neighbours

Understanding the box model is crucial for positioning elements without them overlapping or touching unexpectedly.

How do you link CSS to an HTML page?

There are three ways, listed from best practice to worst:

  1. External stylesheet (recommended): Place rules in a separate .css file and link it in the HTML <head>: 
    <link rel="stylesheet" href="styles.css">
  2. Internal stylesheet: Write rules inside a <style> block in the <head>. Useful for small single-page projects.
  3. Inline styles: Write style="..." directly on an element. Hardest to maintain — avoid for anything but quick tests.

External stylesheets win because a single file styles the whole site. Changing the font on 200 pages takes one line of code.

What does "cascading" actually mean?

The "C" in CSS stands for cascading — the algorithm that decides which rule wins when two rules target the same element. It works on three principles:

  1. Specificity — more specific selectors (ID > class > element) override less specific ones.
  2. Source order — if specificity is equal, the later rule wins.
  3. Inheritance — some properties (like font-family) are automatically passed from parent elements to children; others (like border) are not.

Example conflict:

p { color: black; }          /* element selector — low specificity */
.intro { color: red; }       /* class selector — higher specificity */

A <p class="intro"> will be red because the class selector beats the element selector.

How does CSS create responsive layouts?

Modern CSS uses Flexbox and Grid to arrange elements. A key feature is the media query, which applies different styles depending on the screen size:

/* Default: large screens */
.container { display: flex; flex-direction: row; }

/* Phones: stack vertically instead */
@media (max-width: 600px) {
    .container { flex-direction: column; }
}

This means one HTML file can look like a full desktop website on a laptop and a clean scrollable list on a mobile phone — no separate mobile site needed.

Frequently asked questions

Do I need to learn CSS if I already know HTML?

Yes. HTML defines the structure of a page (headings, paragraphs, links, images) but has almost no control over appearance. Without CSS, every web page would look like plain text on a white background. In KS3 computing, understanding both HTML and CSS together is expected — they are inseparable in web development.

What is the difference between color and background-color?

color sets the foreground (text) colour of an element. background-color sets the colour of the element's background area (the content + padding region). You can combine them: color: white; background-color: navy; gives white text on a dark blue background.

Why does my CSS not appear to work?

Common reasons: the stylesheet is not correctly linked (check the href path), there is a typo in the property name or selector, a more specific rule elsewhere overrides yours, or the browser has cached an old version of the CSS (try a hard refresh with Ctrl+Shift+R). Always open the browser's developer tools (F12) and inspect the element to see which rules are applied and which are crossed out.

Is CSS a programming language?

CSS is a styling language, not a programming language in the traditional sense. It has no variables (in standard CSS), no loops, and no logic — it simply declares rules. Modern CSS does include custom properties (CSS variables) and some calculations (calc()), but for branching logic you still need JavaScript. Both HTML and CSS are described in the UK curriculum as key tools for creating websites, so knowing both is essential.

Professor Turing's analogies make CSS click — try a live session at aitutors.me.