Understanding classes and ID

Tweet

Classes and ID's give more flexibility to style only the required tags from many similar element properties. You may want all the p tags in a webpage to have similar styles, but if a necessity arises to style some particular p tags, then we need to use classes or ID's. These classes and ID's, when mastered gives wide possibilities of styling your webpage.

Using Classes

To apply class to HTML, you need to add class attribute to the specific elements that you need to style. The value for this attribute can be any name that you define.

<p class="color">   some texts missing...   </p>

<p>   some texts missing...   </p>

<p class="color">   some texts missing...   </p>

Things to remember when applying class to HTML,

• The class value must start with a letter.
• Class name must only have letters, numbers, hyphens and underscores.

Now, let's see how to apply styles to classes

.color {
    width: 500px;
    color: orange;
}

Things to remember when using classes in CSS,

• To define a class in CSS, it must always begin with a period and that's how web browsers spot a class selector in the style sheets.
• After the period, the class name must be same as it is used in HTML.
• Class names are case-sensitive. That means .color is different from .COLOR.

Now the styles are applied only to the specified class names. In this way, classes can be applied to any element in HTML including div and span.

Using ID's

Just like classes, ID's also have similar functionalities. But the difference arises in where and when we should use our ID's. Otherwise, ID's are used for some simple Javascript solutions.

<div id="footer">

     <!-- some codes missing -->        

</div>

Things to remember when applying an ID to HTML,

• The ID name must start only with a letter and can have letters, numbers, hyphens and underscores(just like classes).
• Identify and use ID's on the unique parts that occurs only once per webpage, like a header, footer, etc...

Note: Even if you apply an ID to multiple elements in HTML, the browsers won't blow up and it will also style correctly. But this is certainly a very bad practice and you must stop doing it.

#footer {
   border-radius: 3px;
   background-color: #ccc;
   color: #333;
}

Things to remember when using ID's in CSS,

• The ID's must be defined by starting with a hash symbol in the style sheets.
• Then the ID name must be same as in the HTML.
• ID names are case-sensitive. That means #footer is not same as #FOOTER.

Using Multiple Classes and ID's to a single element

Sometimes, an HTML element needs to hold multiple classes or ID's as attributes. In those cases you can use another class or ID name in the same attribute with a space inbetween those values. This rule can be applied for multiple values similarly.

<p class="color box">
     <!-- some codes missing -->
</p>

<div id="home tabs">
     <!-- some codes missing -->
</div>

In the above code, two class names color and box are defined in a single attribute and similarly two ID names home and tabs in a single ID attribute.