Classes and ids make it possible to apply multiple unique styles to an HTML element so that you can have a choice of which style you use each time you use the HTML element. If you want one paragraph on your page to have a dotted border, for example, and the other to have a solid border, classes and ids can make that happen.

Classes are identified in CSS with a dot (.) preceding the name of the class, like the example below:

.dotted-border { border: 1px dotted #000000; }
  or
p.dotted-border { border: 1px dotted #000000; }

The class name is "dotted-border". The selector (the name of the HTML element) should only be specified if that selector is the only HTML element that the class will ever apply to. The dotted-border class is then referenced from the HTML element on the webpage in the following manner:

<p class="dotted-border"> </p>

Classes can be used and re-used multiple times on the same page, but ids can only be used once on each page. This makes ids ideal for styling navigation and other unique elements. Remember it this way: While a class implies a number of people, an id (short for identification) would be unique to one person.

Ids are identified in CSS with a number sign (#) preceding the name of the id, like the example below:

#solid-border { border: 1px solid #000000; }
  or
p #solid-border { border: 1px solid #000000; }

As with classes, ids do not require the selector, or the name of the HTML element, because the element is specified when the id is referenced, or called, in the following manner:

<p id="solid-border"> </p>

Classes and IDs are used for internal and external CSS, but not for inline. Can you figure out why?

Summary:

Name	Symbol	Description
Class	.	Can Use More Than Once Per Page
Id	#	Can Use Once Per Page