CSS basics: selectors, colours and typography

HTML on its own looks plain: black text on white, in the browser's default font. CSS, short for Cascading Style Sheets, is the language that turns the same page into something designed, with colours, fonts, spacing and layout. Because CSS is kept separate from HTML, you can change the look of a whole site by editing one file. This lesson gives you the core vocabulary and a few rules you can try straight away.

What CSS does

CSS describes how HTML elements should look. HTML says "this is a heading"; CSS says "headings are dark green, in a serif font, with space below". Think of HTML as the plan of a house and CSS as the paint, furniture and curtains. The same plan can look warm or stark depending on the styling.

The word cascading means that several rules can apply to one element, and the browser has fixed ways of choosing between them. In short: more specific rules win over general ones, and when rules are equal the later one wins. You will not need the detail yet, but it explains why a rule sometimes seems to be ignored.

The anatomy of a CSS rule

CSS is written as rules. A rule has a selector, which says which elements to style, followed by curly brackets containing one or more declarations. Each declaration is a property, a colon, a value and a semicolon. The semicolon matters: if you forget it, the next declaration may be ignored.

h1 {
  color: darkgreen;
  font-size: 2rem;
}

Selectors: choosing what to style

There are three selectors you will use constantly. A type selector is just an element name, such as p, and matches every element of that type. A class selector starts with a full stop, such as .button, and matches every element that has class="button" in its HTML. An id selector starts with a hash, such as #top, and matches the one element with that id. An id must be unique on a page.

Prefer classes for most styling. They are reusable, you can put several on one element, and they are easy to change. Use ids sparingly. Choose class names that say what something is, such as note or button, rather than how it looks, such as big-red, because looks change.

Colours and fonts

The color property sets text colour and background-color sets the background. You can write a colour as a name (darkgreen), as a hex code (#1b5e20, a hash then six hexadecimal digits for red, green and blue) or as rgb(27, 94, 32). They are three ways of writing the same colour. Pick colours with strong contrast between text and background so that people with weaker eyesight, or anyone in bright sunlight, can read them.

Fonts are set with font-family. List several fonts in order, ending with a generic family such as sans-serif or serif, because not every computer has every font. Set the size with font-size. The unit rem means a multiple of the browser's base text size, so 1.25rem is a quarter larger than normal and respects a reader's own size setting. Use line-height for spacing between lines: around 1.5 is comfortable. font-weight: bold and text-align: center do what they say.

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.125rem;
  line-height: 1.5;
  color: #2b2b2b;
  background-color: #eef7ee;
}

h1 {
  color: #1b5e20;
}

.note {
  background-color: #fff3cd;
  color: #5a4500;
}

#top {
  text-align: center;
}

Adding CSS to a page

The tidy way is a separate file. Save your rules in style.css in the same folder as your page and link it from the <head>. The <link> element has rel="stylesheet" to say what the file is and href to say where it is. You can also write rules inside a <style> element in the head, which is handy for a single small page. The live editor below gives you both HTML and CSS panels.

<head>
  <meta charset="utf-8">
  <title>Garden club</title>
  <link rel="stylesheet" href="style.css">
</head>