Using ids and classes

Ids and classes are used to distinguish certain HTML elements from other elements of the same type e.g. not all p elements are created equal.

An example

Let’s say someone threatened us with bodily harm and told us to make a page using only p tags. We can do it! We can survive!

<p id="page-title">This can be a title</p>
<p class="headline first">This could be a headline</p>
<p>This is a paragraph tag</p>
<p class="headline second">This could be a headline</p>
<p>This is a paragraph tag</p>
<style>
#page-title {
	font-size: 60px;
	font-weight: bold;
}
.headline {
	font-size: 24px;
	font-family: "Comic Sans MS";
}
</style>

If we looked at this page, the first p would be large and bold while the second and fourth ps would be in Comic Sans. We’ve just used css selectors for ids and classes!

Four rules

1. An id on an element should be unique over the entire page, a.k.a. no repeating ids.
2. A class can be repeated.
3. You can have multple classes, separated with a space. class="headline second" is the class headline and the class second.
4. You select an id with a #, and you select a class with a .. Why? It’s just the rules.