Selectors and the cascade: styles in a separate file

CSS is the language that styles a page from a separate file. A selector picks elements, and the cascade decides which rule wins.

Looks apart from meaning

In the first part you built a page from meaningful elements, and in the browser it looks like a page from a textbook: black on white, blue links, Times New Roman. That is a “page without styling”, and it is how search engines and screen readers see your page today. Now let’s give it a look. There is a separate language for that: CSS, Cascading Style Sheets.

The idea of separating looks from meaning came in October 1994, before Netscape 2 existed. It was proposed by Håkon Wium Lie, an engineer at CERN and a colleague of Tim Berners-Lee. He called the styles “cascading” because several sources style a page at once (the browser, the reader, the site’s author), and someone has to decide whose word counts most. You’ll work through that “ladder of priorities” in this lesson. CSS 1 became a W3C Recommendation in December 1996, but for years browsers understood it in different ways, and it only became truly usable in the mid-2000s. In 2003 the CSS Zen Garden appeared: one HTML page, hundreds of unlike designs.

Three ways to add styles

1. A separate file. In the head, a line: <link rel="stylesheet" href="styles.css">. Every page of the site links to the one file, so the look changes in one place, and the browser saves the file instead of downloading it again. This is what nearly everyone does.
2. A <style> element in the head. The styles sit in the page itself. It suits a small example, or styles for a single page.
3. A style="…" attribute on an element. The styling sits right on the element. This is the worst way: the rule can’t be reused, it beats almost everything else and it upsets the order. Use it rarely (for example, when a script works out the value).

Remember the lesson on rendering: CSS blocks painting until the browser has it. So the stylesheet is linked right at the start and kept small.

A rule and a selector

A CSS rule has a selector (who) and, in curly braces, pairs of “property: value;” (what to do):

.card {
  padding: 1rem;
  border: 1px solid #c9c4b6;
}

The main selectors:

• by tag: p, h2 and a mean every element of that kind;
• by class: .card means every element with class="card". This is the main tool: you can give any element a class and use it as many times as you like;
• by id: #top means the one element with id="top";
• descendant: nav a means links inside nav, at any depth; direct child: ul > li;
• list: h2, h3 means both;
• by state: a:hover (under the pointer), a:focus-visible (in focus, when you work from the keyboard), li:first-child;
• by attribute: a[href^="tel:"] means links whose address starts with “tel:”.

Check yourself: what does the selector .card pick?

Every element on the page with the class card. Unlike an id, a class can be used many times.

Inheritance

Some properties pass from a parent to its descendants on their own: text color, typeface, font size, line height. That is why you set the typeface and text color of a page once, on body, rather than on every paragraph. Other properties aren’t inherited: spacing and borders belong to the block itself, and its children don’t get them. It would be odd if a border around a paragraph appeared around every word as well.

The cascade: who wins

When several rules act on one element, the browser decides by a ladder:

1. Importance and origin. A rule with !important beats ordinary ones. Better not to use it: it breaks the ladder, and the only way to fight it is with another one.
2. Specificity. The more precise the selector, the stronger it is. It is counted with three numbers: (ids, classes, tags). #cta is (1, 0, 0), .button is (0, 1, 0) and nav a is (0, 0, 2). They are compared from left to right: one id beats any number of classes, and one class beats any number of tags.
3. Order. If the strength is equal, the rule lower in the file wins.

This is how a rule usually “doesn’t work”: you wrote a { color: red } for a link, but somewhere above it nav a { color: green }, at (0, 0, 2), turned out stronger. Or you wrote the rule higher up than it needed to be. Try it on the diagram: the rules color the same link, and the diagram counts who wins. Change the selectors and check the !important boxes.

The element: <a class="button" id="cta"> inside nav inside header. Each rule sets one property: color.

Class against tagId against classA tie: order decides!important

No.	Selector	color	!important	Count (id, class, tag)	Result
1		redbluegreenorange		—	not a selector
2		redbluegreenorange		—	not a selector
3		redbluegreenorange		—	not a selector

Add a rule Remove the last one

No rule matches, so the link keeps its default color. The order is: !important first, then specificity, then whatever comes later in the file.

Practical rules that people follow today:

• style with classes and keep specificity low, so rules are easy to override;
• don’t style by id: it is too strong, and only another id can override it;
• don’t nest selectors deeper than two or three levels;
• keep !important for extreme cases. In the lesson on modern CSS you’ll meet a better tool: layers, which replace most of these fights.

Check yourself: which is stronger, one id or ten classes?

One id. Specificity is compared from left to right, and one id (1, 0, 0) beats any number of classes (0, 10, 0).

A palette by tone

Your brief has a “tone” field. It will tell you what to build the palette from: two or three colors and a neutral. Here are some starting points. You can change the numbers, but check the contrast (you’ll learn how in the lesson on color):

Tone	What it feels like	A palette idea
Businesslike	composure, trust	navy, gray, white; a serif typeface in the headings
Warm	care, comfort	terracotta and a cream background, dark brown text
Bold	energy	an almost black background or text, and one bright accent
Calm	clarity, air	a muted green or teal on a light warm background

Practice

You’re in 2005. The page is built from meaning, and now it needs dressing. The stylesheet styles.css is already waiting for you in the second tab. Link it in the head, then style the body, the header, the button and the cards in turn. Resist the temptation to write style="…" right on an element: the check will notice, and you’ll lose the point of the exercise.

In the header, the text has to be readable on its background. Choose colors to suit your tone: a program will check the contrast.

What was wrong with 2005

The main trouble wasn’t CSS, but browsers. Internet Explorer 6, by far the most widely used, read CSS in its own way, and authors wrote “hacks” (clever lines that one browser understood and the others ignored) and conditional comments for different versions. The fashionable “web 2.0” style, with its glossy gradients, shadows and rounded buttons, has gone too: it was tied to the way images were drawn then. What remains is what still works: HTML for meaning, CSS for looks, and classes as the language between them.