What CSS does

One CSS file can restyle every page of a site at once. That was the main argument for CSS when the W3C published CSS level 1 in December 1996.

Structure in HTML, looks in CSS

HTML says what each part of a page is: a heading, a list, a form. CSS, short for Cascading Style Sheets, says how those parts should look: their colours, fonts, sizes, spacing and position on the screen. Keeping the two apart has practical benefits. You can change the look of a whole site by editing one stylesheet, the same HTML can look different on a phone, a large monitor and on paper, and readers can apply their own styles, such as larger text, without breaking the page.

Håkon Wium Lie started work on CSS at CERN in October 1994, Bert Bos joined the work in 1995, and the W3C published CSS level 1 as a Recommendation on 17 December 1996. CSS 2 followed in May 1998. Since then CSS has been split into modules, such as Color, Selectors, Flexbox and Grid, each developed at its own pace by the W3C CSS Working Group. There is no single CSS4; the working group publishes a snapshot that lists which modules are stable.

The shape of a rule

A stylesheet is a list of rules. Each rule starts with a selector, which says which elements it applies to, followed by a declaration block in curly braces. Inside the block, each declaration is a property, a colon, a value and a semicolon. In the rule above, h1 selects every level one heading, and the two declarations make those headings blue and 32 pixels tall. Spaces and line breaks inside a rule do not matter, so most people put each declaration on its own line to keep it readable.

When the browser meets a declaration it does not understand, such as a misspelled property or a value that makes no sense, it skips that one declaration and carries on with the next. This is deliberate: it lets new CSS features be added without breaking older browsers. The flip side is that a single missing semicolon can silently swallow the declaration that follows it, because the two run together into one invalid declaration. If a style does not apply, check the punctuation first. Comments are written /* like this */.

Three ways to add CSS

<!-- 1. External stylesheet: one file for the whole site -->
<link rel="stylesheet" href="styles.css">

<!-- 2. Internal stylesheet: rules for this page only -->
<style>
  p { line-height: 1.5; }
</style>

<!-- 3. Inline style: one element only -->
<p style="color: green;">Fresh today</p>

An external stylesheet, linked from the <head> with <link rel="stylesheet">, is the usual choice for a real site: every page shares it, and the browser downloads it once and keeps it in its cache. A <style> element holds rules for one page, which is what the exercises in this course use. The style attribute applies declarations to a single element; it is handy for a quick test but hard to maintain, because the same look has to be repeated on every element.

The browser already has styles

Even a page with no CSS has some style: headings are big and bold, links are blue and underlined, lists are indented. These come from the browser's default stylesheet, called the user agent stylesheet. Your rules are applied on top of it. That is why the bakery page from the HTML course was readable before it had any CSS, and why a good stylesheet changes only what it needs to.