You can insert "hooks" into your HTML to give you a method of describing individual items and/or groups of items on your web page. There are two types -- IDs and Classes...

ID's are unique

• Each element can have only one ID
• Each page can have only one element with that ID
• In HTML, IDs are written as <h1 id="id-name">...</h1>

Classes are NOT unique

• You can use the same class on multiple elements.
• You can use multiple classes on the same element.
• In HTML classes are written as <h3 class="class-name">...</h3>

Any styling information that needs to be applied to multiple objects on a page should be done with a class.

In HTML...

<h1 id="page-title">This is a page title, ID cannot repeat</h1>

In CSS...

h1#page-title {property: values;} 

In HTML...

<h3 class="section-heading">These can repeat</h3>

In CSS...

h3.section-heading {property: values;}

You can not only describe selectors with classes, but also describe varying selectors with the same class. For example, you might want to have both a warning box and a warning header...

<div class="warning">This is a warning box</div>
<h3 class="warning">This is a warning header.</h3>

Apply this class

.warning {background-color:#990000;}

and both will have the background color of red.

When you are targeting an element(s) for changes, you have some choices.

How specific do you want the change to be?

Option 1: You can make all H3 headers red as such...

h3 {color:#880000;}

Option 2: You could target a specific H3 that resides within a specific section DIV on the website as such...

div#specific-section h3 {color:#880000;}

If there is more than one H3 header in div#specific-section, they would all change. If you want only a certain header to have a special description, provide that header with an ID or class.