Introducing CSS

While you'll have seen that HTML does change the appearance of a webpage in some minor ways (<h1> elements are big and bold compared to <p> elements) there isn't much freedom to experiment.

It's hard to imagine being able to create the kind of rich visual experiences common on the web with only the tools we've seen so far.

To do more, we need to turn to Cascading Style Sheets, or CSS.

HTML deals with structure and semantics of a webpage. It's concerned with the purpose of your content, not appearance. CSS deals with the opposite.

Separation of concerns

CSS was invented after HTML, so the earliest versions of HTML had to take care of both structure and appearence.

It is still technically possible to use HTML in this way today, but it's not recommended.

Mixing these concerns is bad for users and for developers, and makes our code both less maintainable and less accessible.

It also makes it harder to update the look and feel of a website. If we use CSS instead, we can make a change in one place and affect the appearence of many webpages at the same time.

Government services must be accessible. Those that aren't will fail their service assessments, and may even be in breach of the law.

A CSS statement

Let's look at some HTML:

<h1>Hello world</h1>

And a companion CSS statement:

h1 {
  color: red;
}

Can you guess what it does?

This statement is composed of:

• A selector of h1
• A property of color
• A value of red
• Curly braces after the selector, containing the property and value

You can have as many properties and values as you like in a single CSS statement, separated by semicolons.

h1 {
  color: red;
  text-decoration: underline;
  font-size: 2em;
}