CSS Tips: Class or ID?

I work a lot with websites, and I’m having this fond for WordPress engine since the  most thing that I should work with is how to re-design a theme. I’m not so good with image manipulation or graphic design, hence I work a lot with CSS and the template parts.

CSS (Cascading Style Sheets) is used for styling the site (HTML) elements. By declaring how an element should look (or behave), the work is becoming less. Name it fonts size, colors, how images looks, and event positioning certain elements, all is become much easier once the styling has been declared.

Styling the elements can be done either generally, or specifically. For instance when you declare a single CSS for <p> tag, then every time you use that instance it will styled as you declared. But when you need to create a different looks for another <p> tag somewhere on your page, then you can be more specific by using an ID or a Class.

The easiest way to tell the difference is by looking at the CSS part of your website. An ID is noted by using “#” (hastag symbol) while a Class is noted by using “.” (period symbol).

Here is an example of defining an ID
#header {font-size: 2em; margin: 10px; text-align: left;}

And here is how you do a Class
.widget {background: #fff; color: #000; border: 2px solid #000; padding: 4px; width: 150px;}


What’s the difference?

It is true that both can be used to apply the same style but it is important to understand the differences:

1. ID must only be used for one element on a page; class can be used for many elements on a page
2. ID can be used to select one item in JavaScript; class can be used to select multiple items in JavaScript

When to Use

Just remember the common rules for anything that specified with an “ID” (eg. Employer ID, Customer ID, etc.) What is it? Yes, unique! Use an ID for elements of the design that only appear once, such as your header and footer.

Meanwhile, when you use several elements in your page, but you want to style it differently to the standar HTML tags (or by each other), then using a Class is your choice. You can use a .indent Class to simplify how you would like certain paragraph in your page to be indented related to the margin. But for the basic paragraph elements, you simply use the default tag (which you could declare earlier regarding how it should look).

No related posts.