Colour your text with CSS

01 / 06

CSS is what decides the look

HTML writes down what is there and what it means — this is a heading, this is a paragraph. CSS decides how it looks — what colour that heading is and how big.

That clean split of jobs is how the web is built.

02 / 06

CSS goes in a separate file

From here your exercises come with two tabs.

index.html … the contents (as before)
style.css … the rules for how it looks

Switch between them with the tabs at the top. How the two files are joined together comes in a later lesson, so do not worry about it yet.

03 / 06

CSS comes in three parts

h1 { color: red; } splits into three parts.

h1 … the selector (where it lands)
color … the property (what changes)
red … the value (what it changes to)

Read it as "take h1, take its colour, make it red". The separators are : and ;.

h1 {  color: red;}

04 / 06

The symbols people leave out

If any one of the symbols is missing, the whole rule is ignored. No error appears, so it is easy to miss.

a : between the property and the value
a ; at the end of each line
{ } around the whole rule

When the colour will not change, look at those three first.

p {  color: blue;}

05 / 06

Colour codes let you be precise

As well as names like red and blue, you can write a colour code: a # followed by six digits.

It is the strength of red, green and blue, two digits each, which lets you name a shade that has no name of its own.

h1 {  color: #0066cc;}

06 / 06

Change the selector, change who it lands on

A rule lands on every element with the tag name you put in the selector. Write li and all the items in your list turn the same colour.

Time to write some in style.css.

li {  color: green;}