22 min read

How CSS Works

Rules, selectors, properties and values; inline, internal and external CSS; linking a style sheet; comments and the cascade.

A CSS Rule

One ruleCSS

1h1 {2  color: #5A3825;3  font-size: 36px;4}

Parts of a rule
Parts of a rule

Three Ways to Add CSS

Where CSS can go

$Method$	$When to use it$
$Inline — a style attribute: <p style="color: red;">$	$Almost never — it mixes style with content and must be repeated everywhere$
$Internal — a <style> element in the head$	$Quick tests, or a single-page site$
$External — a separate .css file linked with <link>$	$Always for real websites — one file styles every page$

Linking an External Style Sheet

Kasun creates css/style.css and adds one line to the head of every page:

The link elementHTML

1<head>2  <meta charset="UTF-8">3  <meta name="viewport" content="width=device-width, initial-scale=1.0">4  <title>Menu | Ceylon Leaf Tea Room, Galle</title>5  <link rel="stylesheet" href="css/style.css">6</head>

rel="stylesheet" says what the file is; href is the relative path to it. The preview below links to the example site's real style sheet — the plain HTML instantly takes on the finished design:

index.html

What the browser shows

Try it:

Delete the <link> line and watch every style disappear. Put it back.

Comments and Layout of a Style Sheet

Organising style.css with commentsCSS

1/* ---------- Base ---------- */2body {3  background-color: #FBF6EE;4}5 6/* ---------- Navigation ---------- */7nav a {8  color: #FBF6EE;9}

CSS comments go between /* and */ . Divide your style sheet into sections — base, header, navigation, tables, forms, gallery, footer — so you can find rules quickly.

The Cascade

Cascading means several rules can apply to the same element, and CSS decides which wins: 1 A more specific selector beats a less specific one (an id beats a class, which beats an element name — next lesson). 2 If they are equally specific, the rule that comes later wins. 3 Some properties, such as color and font-family, are inherited — set them on body and every element inside uses them unless told otherwise.

Which colour wins?CSS

1p {2  color: black;3}4 5p {6  color: brown;7}

Both rules have the same selector, so the later one wins: paragraphs are brown .

Practice

Where does the <link> to the style sheet go?

More lessons in CSS · Next: Selectors · Previous: Introduction