Classes and IDs

7 min 20 XP + 10 for no hints

So far your rules styled every element of one type, like every p. To style just some of them, give them a class: <p class="special">. In CSS, a dot selects a class: .special { … }.

Many elements can share a class, and one element can have several, separated by spaces: class="special new".

An id names exactly one element, <h1 id="title">, and #title selects it. Use classes for most styling; ids are best for links and JavaScript.

Example

<style>
  .price { color: green; font-weight: bold; }
  .sale { color: crimson; }
</style>
<p>Tea <span class="price">$3</span></p>
<p>Cake <span class="price sale">$2</span></p>

Class names can't contain spaces or start with a number. Use hyphens: .main-title.

Your tasks

0 of 3 done

Give at least two paragraphs the class special
Give .special a background color
Give the h1 an id and style it with a # selector

Quick check

Which selector targets <p class="note">?

menu.htmlUpdates as you type

<style>

</style>

<h1>Daily specials</h1>
<p>Veggie burger</p>
<p>Pasta salad</p>
<p>Mango smoothie</p>

Classes and IDs

Your tasks

Tutor

Quick check