Classes and Ids

Classes.

The .class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class. To do this, start with the element name, then write the period (.) character, followed by the name of the class (look at Example 1 below). HTML elements can also refer to more than one class (look at Example 2 below).

e.g. 1:

CSS:

p.hometown {
	background-color: yellow;
}

HTML:

<p> class="hometown">I live in Duckburg.</p>

This will make "I live in Duckburg." have a yellow background.

e.g. 2 This <p> element will be styled according to class="center" AND to class="large":

<p class="center large">
This paragraph refers to two classes.
</p>

IDs!

IDs are used with an #ID tag that can be used to identify something on a page. (we will use this example):

CSS:

#firstname {
    background-color: yellow;
}

#IDs can be linked on the same page and are unique to that page only. Classes can be used everywhere. That's essentially how IDs are different to classes. So how to incorporate classes and IDs in CSS and HTML:

#firstname {
    background-color: yellow;
}

<p id="firstname">My name is Donald.</p>