But think about an example, in your database you have two </p><p> and you want to give two different layout for these two sections. With basic set of tags you can't cover every possible type of page element or layout choice. In order to define every possible type of page element or layout choice we must need to use ID and CLASS attribute. Like, </p><ul id="navigation1"> or <ul id="navigation2"> etc.
Then we define the style of these elements inside our CSS.
So, we can use both ID and CLASS inside html in order give style to them. But what is the difference between ID and CLASS? When we should use ID and when not? What is the advantages or differences between them? The following discussion will help you.
ID
- The most important concept of ID is IDs are unique.
- Each element can have only one ID.
- Each page can have only one element with that ID.
CLASS
- The most important concept of CLASS is CLASSes are not unique.
- You can use the same class on multiple elements.
- You can use multiple classes on the same element.
If you want to apply same style to different elements then assign same class to those elements.
Like you want all <ul> element has same class named Listed. Then write as,
<ul class="Listed">..... </ul>
<ul class="Listed">..... </ul>
<ul class="Listed">..... </ul> etc.
You can also assign multiple classes to an element. In that case put every classes as space delimited. For <ul> you can assign three classes named Listed, MyList, List1 as below.
<ul class="Listed MyList List1">..... </ul>
Now let us look into detail about ID and CLASS.
ID and CLASS tagging does not do anything by default
If you simply assign ID or CLASS tag to an element there will be no changes in the element style unless you have CSS to target them and apply styling. So, Classes and ID’s don’t have any styling information to them.
Which to choose ID or CLASS
The rule is - style that to be reusable should be kept in a class and style that is totally unique should be kept in an ID.
Special browser functionality of IDs
CLASS does not have any special abilities in the browser, but ID has one very important functionality. That is the "hash value" in the URL.
Suppose if you have the following lines
<b>There are 33 visitors online</b> inside your http://localhost/testing_id.html
and now you added an id element with it like below.
<b id="test">There are 33 visitors online</b>
Now whenever in the browser you type http://localhost/testing_id.html#test the browser will attempt to locate the element with an ID of "test" and will automatically scroll the page to show that element. This is another important concept of why ID needs to be unique in an HTML page because your browser need to know where to scroll!
Elements can have both ID and CLASS
There is no restriction to add both ID and CLASS. Sometimes it is very good idea to assign both ID and CLASS to an element. A good example is using comments.
Like,
<li id="comments-1123" class="item">
It has a class applied to it that is for styling all comments on the page, but it also has a unique ID value (which to be dynamically generated by your web language). This ID value is useful for direct linking.
CSS does not care about ID or CLASS
To CSS ID and CLASS are same. There is nothing you can do with CLASS but not with ID and vice-versa in CSS.
JavaScript cares about ID or CLASS
In case of JavaScript there is difference between these two. It depends on there being only one page element with any particular, or else the commonly used getElementById function wouldn’t be dependable. For those familiar with jQuery, you know how easy it is to add and remove classes to page elements. It is a native and built in function of jQuery. But there is no such function exists for ID’s.
Case Sensitivity
ID and CLASS are both case sensitive in their name. So myid and MyID is different.
CSS syntax for ID and CLASS
Class is specified by including a period (.) before the selector name.
For example, we have HTML element like <p class="box1">
To apply red colour into box1 class write your CSS entry as,
.box1 {
color:red;
}
Specifically you could use,
p.box1 {
color:red;
}
To render ID into CSS you need to include a number sign (#) before the selector name.
For example, we have HTML element like </p><p id="footer">
To apply red colour to footer ID write your CSS entry as,
#footer {
color:#red;
}
</p></li></ul></ul></ul></ul></li></ul></h1>
Related Documents
