CSS for the Look

HTML says what is on a page. How the page looks, its colors, fonts and sizes and where everything sits, is the job of a second language: CSS.

The page now has a second file, style.css. You can switch between the files above the editor. The page uses the file thanks to one line in its head:

<link rel="stylesheet" href="style.css">

It tells the browser that the styles of this page are in the file style.css. Such a file is called a stylesheet, and this is what ours says:

body {
    font-family: Arial, sans-serif;
    background-color: lightyellow;
}

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

A stylesheet is a list of rules. Each rule starts with what it styles: body is the whole page, and h1 is the main heading. Between the curly brackets { and } come lines in the form property: value;. So the whole page has the Arial font on a light yellow background, and the heading is purple and 32 pixels big. A pixel (px) is one tiny dot of your screen.

Colors can be written by their English names: red, orange, teal, crimson, gold, hotpink and many more. But CSS is picky: when the browser doesn't understand a line, for example because of a typo in the color or a missing px after the number, it simply skips the line.