CSS ID and CLASS difference

CSS id and class -- what is the difference between these two? CSS id class are two selectors commonly used in CSS to define styling and design of web page content. Web developers that are fairly new to CSS programming often want to know the difference between CSS id and class.

The answer is simple: CSS id class differ in how often they can be used on a page.

CSS id class

CSS id and class are both used to define properties of a HTML tag. In Layman's terms, css id and class are commands used to give a "name" to a certain CSS format.

CSS class explained...

For example, if you wanted to define a paragraph with bold text, you would write the following code:

<p class="genericStyle">This text will be displayed in bold.</p>

You can see that we have used the genericStyle class selector in this case. In general, using an ID or CLASS element requires the code to be specified in the head area of your web page or on an external css file. The genericStyle class in our example would be defined in your HTML <head> tag for example as:

You can see in the code above that a CSS class selector is a name preceded by a dot or full stop (notice the red dot in the CSS code above). The result of this code would be the following:

css id class

Now, what happened if you defined the same paragraph with a CSS id selector?

CSS id explained...

<p id="firstParagraph">This text will be displayed in bold.</p>

You can see that we have used the firstParagraph CSS ID selector in this case. Now you would define the firstParagraph id in your HTML <head> tag almost the same way like in the preceding example:

The CSS code above defines a CSS ID selector. A CSS ID selector is a name preceded by a hash character (# shown in orange in the code above; compare to what precedes the CSS CLASS selector). The hash mark # is used to specify a CSS ID element and says "when this ID is found in a tag, use this format." The result of this code is exactly the same like the bold sentence shown above. So, what is the difference? Not much, right? Yet, there is one difference.

CSS id class difference

CSS class elements are very similar to CSS id elements. The difference between a CSS id and class is that a CSS id can be used to identify only one element on a web page whereas a CSS class can be used to identify more than one element. CSS id elements are used for a single instance or area. CSS class elements are used for many instances or a larger area.

CSS ID is usually the good choice for creating a CSS layout. Using CSS id in a CSS layout makes sense because there is usually only one menu per page, one content block, and only one banner. On the other hand, CSS class can be used for theming your content.

So, to summarize the difference between CSS ID and CLASS:

1. CSS CLASS: A dot precedes the class name in the style definition in your head section.
CSS ID: A hash # precedes the id name in the style definition section.
2. CSS CLASS: The word "class" identifies your CSS class in your html tag.
CSS ID: The word "id" identifies your CSS id in your html tag.
3. CSS ID is for single instances or tags.
4. CSS CLASS is used for multiple instances or tags.

What happens if I use CSS class in place of CSS id?

Nothing. If you decide to use CSS classes everywhere and not use CSS id at all, you will be ok.

The same does not apply to using a CSS id in place of a CSS class though. Having duplicate CSS ids on your web page will create unexpected problems in how your web page displays. Your code might work in one browser and fail in another browser.

CSS id and class naming convention advice

When selecting names for your classes and ids, it is usually advised not to use underscores. Some older Netscape and Opera browsers are known to have troubles interpreting names including underscores.

The words "class" and "id" within your html tag should be lower case. This is not a rule related to CSS itself but relates more to the validity of your code. If you wish to have your html code compliant with validation standards, use lower case.

Why CSS id and class?

In case you are wondering why W3C decided to use the ID and CLASS names, here is the explanation:

ID = A person's Identification (ID) is unique to one person.
Class = There are many people in a class.

W3C used the analogy of html elements on a web page being like people in a class.

CSS id class and other coding practice

You might be interested in the following articles:

ASCII table and Code ASCII
Dec to hex converter
RGB color picker
Word letter mixer disorganizer
Browser Safe Colors
How to create FAVICON
How to blur text or image

Should you have any questions, please, visit our SEO discussion forum, or check out the resources below.

Discuss this article or this topic in our discussion forum:

(The table bellow shows a list of 8 most recent topics posted in our discussion forum. Visit our discussion forum to see more. It is possible the links below are not related to this page, but you can be certain you will find related posts in the discussion forum. You can post one yourself too.)

Email this article to a friend:

How can I link to this web page?

It is easy, just include the code provided below into your HTML code.

<a href="http://www.maxi-pedia.com/css+id+class" title="www.Maxi-Pedia.com: CSS ID and CLASS difference" target="_blank">CSS ID and CLASS difference</a>

Bookmark this article with