ID Selector

You know the id attribute from the HTML course. It gives an element a unique name: no two elements on a page may have the same id. On our page, the main heading has the id title, and the div with the list of breeds has the id breeds.

To select an element by its id, write a hash # followed by the id:

#title {
	color: purple;
}

A selector with an id always selects just one element. So when should you use an id, and when a class? For styling, classes are usually the better choice: you can reuse a class, so the same rule styles a new element as soon as you give it the class, just like you did with the breeds. Ids are mainly used to mark one particular element, for example as the target of a link to a part of the page (href="#breeds"). Rules with an id also have a high priority, which makes them hard to override, as you’ll see later in this lesson.