Selectors and text

Level 2 of CSS School: 3 lessons, explained from scratch, with examples.

Play Level 2 in the game

Lesson 1

Classes and ids

Picking exactly the elements you want.

Choosing which elements to style

p { } styles every paragraph. Often you only want some. That’s what classes are for:

  • in the HTML, give elements a class: <p class="warning">
  • in the CSS, select it with a dot: .warning { }

Many elements can share a class, and one element can have several: class="warning big".

An id (<div id="top">, selected with #top) is for one single element. Classes are used much more.

CSS
.warning {
  color: crimson;
}
#top {
  background-color: gold;
}

Inside and together

  • A space means “inside”: nav a picks links that are inside a <nav>
  • A comma means “and”: h1, h2 { } styles both
  • Joined with no space, both must match: p.warning is a paragraph with the warning class
CSS
nav a {
  color: white;
}
h1, h2 {
  font-family: Georgia, serif;
}

Practise “Classes and ids” in the game

Lesson 2

Fonts and text

Size, typeface, weight, alignment and spacing.

Making text look good

  • font-size: 20px; sets the size
  • font-family: Georgia, serif; picks the typeface. List a few, ending with a general one (serif, sans-serif, monospace), in case the first isn’t installed
  • font-weight: bold; (or a number like 700) makes it heavier
  • text-align: center; lines it up left, right or centre
  • line-height: 1.6; spaces the lines out, which makes long text easier to read
  • text-decoration: none; removes the underline from a link
CSS
h1 {
  font-family: Georgia, serif;
  text-align: center;
}
p {
  font-size: 18px;
  line-height: 1.6;
}

Practise “Fonts and text” in the game

Lesson 3

The cascade

When two rules disagree, who wins?

Who wins?

Sometimes two rules set the same property on the same element. The browser decides like this:

  1. The more specific selector wins: an id (#x) beats a class (.x), which beats a type (p)
  1. If they’re equally specific, the rule that comes later wins

That flowing-down order is the cascade: the C in CSS.

CSS
p { color: gray; }
.note { color: blue; }
p { color: green; }

Inheritance

Some properties, mostly text ones like color and font-family, are inherited: set them on body and every element inside gets them too.

Others, like background-color, border and padding, are not inherited.

That’s why styling body { font-family: ... } changes the font of the whole page in one line.

Practise “The cascade” in the game

Recap

What Level 2 covers, in a few lines.

  • A type selector (p) picks every element of that type. A class selector (.note) picks elements with class="note". An id selector (#top) picks the one element with id="top".
  • A space means “inside”: nav a picks links inside a <nav>.
  • Text properties: font-size, font-family, font-weight, text-align, line-height, text-decoration.
  • When rules disagree, the more specific selector wins (id beats class beats type). If they’re equally specific, the later rule wins. That’s the “cascade” in Cascading Style Sheets.

Now try it in CSS School

Write real code and watch your page change as you type, with a check after every step and a test at the end of each level. Free.

Start learning