Any HTML element (like a body, list, paragraph, table etc.) can have an ID (identifier) and can also have one or more Classnames.
For example, the following DIV element has both an ID and three Classnames (separated by spaces).
<div id="contactblock" class="indent highlight new">...</div>
But what are IDs and classes/classnames, and how and when do you use them?
HTML IDs
An ID in HTML is meant to identify what an HTML element actually IS – as in, its unique identity. You can set pretty much what you want as the ID, just make sure it accurately describes the element.
The only rules you need to know about IDs are:
- An element may only have one ID (or none), and
- Its ID should be unique. No other element on the same page should have the same ID.
Now, for CSS, it doesn’t really matter for IDs to be unique. You can set rules for any element with a particular ID, and that rule will apply to any elements with that ID. CSS doesn’t mind.
But it does matter for other advanced things, like DOM scripting (DHTML, or JQuery).
One of the most useful Javascript tags used in DOM scripting is getElementById(), and that only works reliably if your IDs are unique. (A programmer would use that to manipulate the page using code. You may never need to do that, I’m just telling you so you know.)
When Do You Need To Give Your HTML Elements an ID?
The main reason is if you ever want to write some programming code that uses that element (say to move it, make it disappear, or change it in some way). Most of the time, this won’t be necessary, but it’s very common in web-based applications.
You may also use IDs for CSS purposes, but I do this very rarely myself.
You should know that when you identify an element by its ID in CSS, using the # character, for example…
#yourdiv {color:red;}
…then that style will override anything that sets styles using classnames. In other words, if you later had more CSS styles like this…
body.home .wrapper .main-content .left-col ul.news li.item div.yourdiv {color:green;}
This would not apply, because IDs outrank HTML elements (like body, ul – the bits with no prefix) and classnames (with the dot prefix).
You may then use an ID to override other styles, but generally I avoid using them for CSS purposes, unless I’m 100% absolutely totally completely sure that there will only be one element with that ID on the page – ever.
HTML Classnames
Classnames in HTML are much weaker and looser than IDs. The rules are less strict, and you don’t need to be as careful with classnames.
A classname should be used to describe some property of an HTML element. For example, its importance, visual presentation, or context of use.
An element may have no class, one class, or more than one. If more than one, separate them with spaces (which means you can’t have spaces in your classnames, use hyphens instead).
You can have more than one element with the same class, and that’s very common.
For that reason, class is not quite so useful as ID for identifying an HTML element using Javascript. There is a document.getElementsByClassName() function (method) in Javascript, but this will return a set of elements, which then needs to be looped through. (Again, this is only for programming purposes.)
I use classnames all the time in CSS. You identify an element by its classname using a dot/period, as in the example I used before…
body.home .wrapper .main-content .left-col ul.news li.item div.yourdiv {color:green;}
This says: Apply the style, color:green to any…
- div with the classname “yourdiv”
- that is within a list-item with the classname “item”
- that is within an unordered list with the classname “news”
- that is within any element with the classname “left-col”
- that is within any element with the classname “main-content”
- that is within any element with the classname “wrapper”
- that is within a <body> element with the classname “home”
Using Multiple Classnames in CSS
Some browsers will let you define your CSS styles in this way:
.newsitem.current {background:yellow;}
So what this is saying is, “Apply background:yellow to any element that has the classname newsitem AND the classname current”.
But this doesn’t work in every browser, so I tend to avoid relying on identifying elements using more than one classname. You may need to use classnames within classnames (i.e. .class1 .class2) instead.
Learn more
0 Responses
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.