Skip to content
SQ/EN

8 min read

American Corners

CSS: styling your page

Look is a separate job from structure

Your HTML pages work, but they look plain: black text, blue links, a white background, no spacing worth the name. That is on purpose. HTML's job is structure, and a second language handles appearance. It is called CSS, short for Cascading Style Sheets, and it describes how the elements you already wrote should look on screen: their colour, size, spacing and font.

Keeping the two apart is one of the best ideas in web development. The HTML says what each part is; the CSS says how it should look. Change the style in one place and every matching element updates at once, without touching a word of your content.

The shape of a rule

A CSS rule has a simple, fixed shape. You name what you want to style, then list the changes inside curly braces.

h1 {
  color: white;
  text-align: center;
}

Read it in three pieces. The selector, here h1, chooses which elements the rule applies to: every <h1> on the page. Inside the braces come declarations, each one a property and a value separated by a colon and ended with a semicolon. So color: white; sets the text colour, and text-align: center; centres it. That pattern, property: value;, is every line of CSS you will ever write. The semicolon at the end of each line matters; leave it out and the next line can quietly fail.

Styling by element

The most direct way to select is by element name, and you can style as many as you like. Here we set the whole page background, then adjust headings and paragraphs.

body {
  background-color: lightblue;
}

h1 {
  color: darkblue;
}

p {
  font-family: Verdana, sans-serif;
}

Because body wraps everything, styling it sets the backdrop for the whole page. The p rule changes the typeface of every paragraph at once. Notice how little you had to say to restyle every paragraph on the page: one rule, and they all follow.

Tip

When a colour or size looks wrong, check the small things first: a missing semicolon, a misspelled property like colour instead of color, or a value with no unit where one is needed. CSS does not report an error; it just skips the line it cannot understand and moves on.

Connecting the stylesheet to the page

CSS usually lives in its own file, say style.css, so one stylesheet can dress many pages. You join it to a page with one line inside the <head>.

<head>
  <title>Neighbourhood Garden</title>
  <link rel="stylesheet" href="style.css">
</head>

The <link> tag tells the browser to load style.css and apply its rules to this page. Put the same line in every page that should share the look, and you have a single place to control the appearance of a whole site.

A worked example: warming up a plain page

Take the plain event page from earlier. Without changing a single word of the HTML, we can give it a calmer, friendlier look with a short stylesheet.

body {
  background-color: cornsilk;
  font-family: Georgia, serif;
}

h1 {
  color: green;
}

Three small touches do a lot of work. The background-color swaps stark white for a soft cream, the font-family gives the text a warmer typeface, and the heading takes a green that suits a garden. Same content, same structure, a page that now feels looked after. That is the whole promise of CSS: appearance, controlled from one calm place.

Learn more

Three properties are plenty to start, but CSS has many more. Colours can be written as exact codes beginning with #, such as #fdf6e3 for cream or #2b6b3f for green. Sizes are often given in pixels, written px. The margin property pushes content away from the window edges so it can breathe, and line-height opens up the space between lines of text so paragraphs are easier to read:

body {
  background-color: #fdf6e3;
  margin: 40px;
}

p {
  font-size: 18px;
  line-height: 1.5;
}

Try this now

Take any HTML page you have and create a style.css next to it. Add three rules: a background-color on body, a color on h1, and a font-family on p. Link it from the <head> with <link rel="stylesheet" href="style.css">, then reload the page and watch all three changes appear at once.

Check yourself

  1. In the rule p { color: green; }, name each of the three parts and say what each one decides.
  2. Why is it an advantage that CSS lives in a separate file and is linked from the <head>, rather than mixed into the HTML content?
  3. A paragraph refuses to change size no matter what you type. Given that CSS reports no errors, what kinds of small mistakes would you check for first?

Where this lesson comes from

Built from

  • Data Structures and Algorithms: web development session

alphaPlan courses are built from taught programmes rather than invented for the web. Where a claim rests on an outside standard or a reported case, it is named above so you can check it rather than take our word for it.

This course was developed by alphaPlan Center from programs delivered in partnership with the American Corners network.

Found something unclear, outdated or improvable? Suggest an improvement