What CSS is and how it reaches a page

Introduction

Open any page with its styles turned off and you will see a long column of black text on white. The words are all there, and the structure is all there. What has gone is everything that makes the page feel designed. That missing layer is CSS, short for Cascading Style Sheets.

How it works

HTML describes what each part of a page is: a heading, a list, a button. CSS describes how those parts look: their colours, sizes and positions. Keeping the two apart has a real benefit. A site with 500 pages can share one stylesheet, so changing a single line changes the look of all 500 pages. That same content can also be given a different look for phones or for printing.

Anatomy of a rule. Everything in CSS is built from rules.

h1 {
  color: darkblue;
  font-size: 32px;
}

• h1 is the selector, which chooses the elements.
• The curly braces hold the declarations.
• Each declaration is a property, a colon, a value, and a semicolon.

The semicolon separates declarations. Forgetting one is the most common error, because the next declaration then gets swallowed into the value of the one before it.

Where styles can live. There are three places.

1. An external file, connected in the head with <link rel="stylesheet" href="style.css">. This is the normal choice, because every page can share it and the browser only has to download it once.
2. A style element in the head. This is useful for a single-page demo.
3. An inline style attribute on one element, such as <p style="color: red">. It is hard to maintain, cannot be reused, and it beats nearly every other rule, so avoid it.

Browsers have their own stylesheet. This is why an h1 is already large and links are already blue. Your rules are added on top of these built-in defaults.

Mistakes are skipped, not fatal. If a browser does not understand a declaration, it ignores that one and continues with the next. This is deliberate: it lets new CSS features be added without breaking older browsers. The downside is that there is no error message. A misspelled property simply does nothing, so you learn to look for it.

Comments are written between /* and */, and the browser ignores them.

Syntax

selector {
  property: value;
  another-property: value; /* a comment */
}

Example

Change darkblue to another colour in the CSS tab, then press Run.

Line by line

1. h1 selects every level-one heading on the page.
2. color: darkblue; sets the colour of the text.
3. font-size: 32px; sets the height of the letters.
4. The closing brace ends the first rule.
5. The second rule does the same for every paragraph.

Expected result

A large dark blue heading, and below it a smaller grey sentence.

In the real world

Almost every large site loads a small number of CSS files, cached by the browser, across all its pages. That is why a site often feels faster after the first page you visit. Redesigns are often done by changing the CSS while leaving the HTML almost untouched.

Common mistakes

• Forgetting a semicolon between declarations, which breaks the following one.
• Forgetting a closing brace, which makes the next rule disappear.
• Using = in place of :, as HTML attributes do.
• Styling with inline attributes throughout a site.

Best practices

• Keep your styles in an external file.
• Put one declaration on each line, so that changes are easy to read.
• End every declaration with a semicolon, even the last.
• Use comments to explain why, not what.

Summary

CSS controls how HTML looks. A rule has a selector and declarations, and each declaration pairs a property with a value. Styles belong in an external file, and browsers quietly skip anything they cannot understand.

Mark lesson complete