Difference Between Div ID and Div Class -CSS Tutorials Learn HTML
by Posted on
Let us Learn the basic difference between div class and div id in css tutorials today.We need ways to describe content in an HTML/XHTML document. The basic elements like <h1>, <p> and <ul> will often do the job, but our basic set of tags doesn’t cover every possible type of page element or layout choice. For this we need ID’s and Classes. For example <ul id=”nav”>, this will give us the chance to target this unordered list specifically, so that we may manipulate it uniquely to other unordered lists on our page. Or we might have a section on our page that has no relevant tag to signify it, for example a footer, where we might do something like this: <div id=”footer”>. Or perhaps we have boxes in our sidebar for keeping content over there separated in some way: <div class=”sidebar-box”>.
ID’s are unique
Each element can have only one ID
Each page can have only one element with that ID
When I was first learning this stuff, I heard over and over that you should only use ID’s once, but you can use classes over and over. It basically went in one ear and out the other because it sounded more like a good “rule of thumb” to me rather than something extremely important. If you are purely an HTML/CSS person, this attitude can persist because to you, they really don’t seem to do anything different.
Here is one: your code will not pass validation if you use the same ID on more than one element. Validation should be important to all of us, so that alone is a big one. We’ll go over more reasons for uniqueness as we go on.
Classes are NOT unique
You can use the same class on multiple elements.
You can use multiple classes on the same element.
Any styling information that needs to be applied to multiple objects on a page should be done with a class. Take for example a page with multiple “widgets”:
You can now use the class name “widget” as your hook to apply the same set of styling to each one of these. But what if you need one of them to be bigger than other other, but still share all the other attributes. Classes has you covered there, as you can apply more than one class:
No need to make a brand new class name here, just apply a new class right in the class attribute. These classes are space delimited and most browsers support any number of them (actually, it’s more like thousands, but way more than you’ll ever need).
There are no browser defaults for any ID or Class
Adding a class name or ID to an element does nothing to that element by default.
This is something that snagged me as a beginner. You are working on one site and figure out that applying a particular class name fixes a problem you are having. Then you jump over to another site with the same problem and try to fix it with that same class name thinking the class name itself has some magical property to it only to find out it didn’t work.
Classes and ID’s don’t have any styling information to them all by themselves. They require CSS to target them and apply styling.