Name things with class

01 / 05

A tag name moves all of them at once

Write p { color: red; } and every <p> on the page turns red.

But what you wanted was one red paragraph, right here. A tag-name selector cannot aim that finely.

p {  color: red;}

02 / 05

Give it a name with class

That is what the class attribute is for. It lets you give an element a name you chose yourself.

Just like href or src, you write class="name" inside the opening tag.

<p>an ordinary notice</p><p class="alert">an important notice</p>

03 / 05

In the CSS, a dot goes in front

When you point at that name in CSS, you put a dot . in front. This is the first thing everyone gets wrong.

in the HTML … class="alert" (no dot)
in the CSS … .alert (with a dot)

.alert {  color: #cc0000;}

04 / 05

The same name can go anywhere

The same class can go on as many elements as you like, and on different tags too.

You write the rule once and it lands on everything carrying the name. Change the colour later and you edit one place.

<p class="point">this matters</p><li class="point">this matters too</li>

05 / 05

Name it after the job, not the look

Name it after how it looks, like class="red", and the name becomes a lie the day you make it blue.

Name it after the job: class="alert" for a warning, class="point" for something important. The name is yours to choose, but there is a knack to choosing it.