Web Foundations Lesson 3 of 7

CSS basics: selectors and classes

25 min, 4 exercises

Builds on lessons 1 to 2. Start at lesson 1

Learn

Rules and selectors

HTML says what things are. CSS says what they look like. You can put CSS inside a <style> tag, and it is made of rules:

h1 {
  color: crimson;
  font-size: 40px;
}

Read that as: "find every h1, make its text crimson and 40 pixels tall". The part before the curly brackets is the selector (which elements). Inside are declarations, each one a property: value; pair. Forget the semicolon and the next line often gets ignored, with no error message. CSS fails silently, which is rude but you get used to it.

Learn

Common properties and classes

Some properties you will use constantly:

  • color: the text colour
  • background-color: the colour behind it
  • font-size: how big the text is, like 18px
  • font-family: the typeface, like Georgia, serif

Note the American spelling: it is color, never colour, no matter how you spell it in real life.

A tag selector like p hits every paragraph. Usually you want to pick just some of them, and for that you use a class. Give the element a class attribute, then select it with a dot:

<p class="warning">Do not feed the gremlins.</p>

.warning {
  color: red;
}

One class can go on as many elements as you like, and one element can have several classes separated by spaces: class="warning big". That is how real sites stay consistent: style a class once, reuse it everywhere.

Learn

Picking elements more precisely

Three more selectors cover most real pages:

nav a {
  color: white;
}
h1, h2 {
  font-family: Georgia, serif;
}
#final-score {
  font-size: 32px;
}

A space means "inside": nav a is every link somewhere inside a nav, and links elsewhere are left alone. A comma lists several selectors that share one rule. A # picks the one element with that id; an id must be unique on the page, so for styling groups of things a class is the better habit.

Try

Run it: styled paragraphs

Press Run and the page appears in the preview under the editor. Change some text or a colour and run it again.

example.html to run
<style>
  body {
    font-family: Arial, sans-serif;
  }
  h1 {
    color: teal;
    font-size: 36px;
  }
  .tip {
    background-color: lightyellow;
    font-style: italic;
  }
</style>
<h1>Styling 101</h1>
<p>This paragraph only gets the body font.</p>
<p class="tip">This one has the tip class, so it gets a yellow background too.</p>

Practice

Red heading

Write a CSS rule in the <style> tag that makes the <h1> text red.

exercise_1.html to run
<style>
  /* your rule goes here */
</style>
<h1>Danger zone</h1>

Practice

Highlight one paragraph

Create a class called highlight that sets background-color to yellow. Then put that class on the second paragraph only.

exercise_2.html to run
<style>
</style>
<p>First paragraph.</p>
<p>Second paragraph, the important one.</p>
<p>Third paragraph.</p>

Break/fixFix the bug

Two declarations quietly ignored

The band name should be navy and 32px. Neither happens, and there is no error anywhere. Fix the rule.

exercise_3.html to run
<style>
  .band {
    color: navy
    font-size: 32px;
  }
</style>
<p class="band">The Paper Planes</p>

Your turn

Style a match report

Style this page with CSS only, without changing the HTML:

  • the h1 and the h2 both use the font Georgia, serif
  • the nav has a background colour of #1d2b6b, and the links inside it are white
  • the links inside the article are bold (font-weight), but the nav links are not
  • the final score is 40px

On your own. Hints open after your first check.

exercise_4.html to run
<nav>
  <a href="/">Home</a>
  <a href="#fixtures">Fixtures</a>
</nav>
<article>
  <h1>Riverside 3, Hillcrest 2</h1>
  <p id="final-score">3 - 2</p>
  <h2>How it went</h2>
  <p>A late header from <a href="#players">Jas Patel</a> won it, after <a href="#players">Leo Grant</a> saved a penalty.</p>
</article>
<style>
</style>
HTML, CSS and JavaScript