Classes and IDs
The class selector allows you to style items within the same (X)HTML element differently. IDs are similar to classes, except once a specific id has been declared it cannot be used again within the same (X)HTML file.
Id
selector begins with a
#
number sign. An id name cannot start with a number.
Class
selector begins with a
.
period. A class name cannot start with a number. HTML elements can also refer to more than one class. In the example below, the <p> element will be styled according to class="center" and to class="large":
<p class="center large">This paragraph refers to two classes.</p>
CSS example: #top2 { background-color: #ccc; padding: 20px } .intro { color: red; font-weight: bold; } The HTML refers to the CSS by using the attributes id and class. <div id="top2"> <h1>Header h1</h1> <p class="intro">Paragraph text</p> </div>

Header h1

Paragraph text

The id Attribute
To define a special style for one special element, first add an id attribute to the element: <p id="p01">I am purple</p> then define a style for the element with the specific id: Example #p01 { color: purple; font-weight: bold; }

I am purple