David's Blog

What are the best practices associated with using classes vs. ids

Basic set of tags(<h1>, <p>, and <ul>), doesn't cover every possible type of page element or layout choice. For this, we need class and ID, to target the specific areas in the website. Using class and ID selectors, the page can have the same HTML element, but present it differently depending on its class or ID.
In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”). So the CSS might look something like:

      
        #top {
            background-color: #ccc;
            padding: 20px
        }
        
        .intro {
            color: red;
            font-weight: bold;
        }
        
    

        
        <div id="top">
        
        <h1>Chocolate curry</h1>
        
        <p class="intro">This is my recipe for making curry purely with chocolate</p>
        
        <p class="intro">Mmm mm mmmmm</p>
        
        </div>
        
    

The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.

ID's are unique

• Each element can have only one ID
• Each page can have only one element with that ID
• code will not pass validation if you use the same ID on more than one element.

A good analogy for an IDs are to think of an ID as a public holiday. There are only one Christmas and one Easter each year, and they are both celebrated in different ways.

Classes are unique

• You can use the same class on multiple elements
• You can use multiple classes on the same element

Classes are for when applying the same styles to multiple elements. .bold, .italic, .aligncenter, .floatleft are examples of good uses for classes, because you're going to (potentially) want to make multiple items on your page bold, italic, center aligned or floated to the left.