There appears to be two ways to designate different css properties for different objects of the same type.
One method is to use, for example, div.header in the css file, and then use <div class="header> in the document.
The other method is to use div#header in the css file, and <div id="header"> in the document.
Which one is better to use? Is either one more common or provides better results? Thanks.
<style>
#header {color:red}
div.header{color:blue}
</style>
... ...
<div id="header">xxxxxxx</div>
<div class="header">xxxx1</div>
<div class="header">xxxxx2</div>
in the css definition, #header, .header is for 2 styles. #header is for the tag which id="header". div.header is for the tag which class name="header".
because id is unique on the page, #header is only used to one tag on a page.
.header is used for many tags.
!!!!! THEY ARE ABSOLUTELY NOT THE SAME !!!!!
They 'll give the same result yes, but as mystuff explained id is for unique objects while class is for objects that are used more then one time. So as I expect your header to be a unique object, every freak like me would in this case recommend the use of id in stead of class, because it will be just that tiny little bit faster;-)
| Chris Tiaens wrote: |
!!!!! THEY ARE ABSOLUTELY NOT THE SAME !!!!!
They 'll give the same result yes, but as mystuff explained id is for unique objects while class is for objects that are used more then one time. So as I expect your header to be a unique object, every freak like me would in this case recommend the use of id in stead of class, because it will be just that tiny little bit faster;-) |
...agreed.A class can be used multiple times on a page and an id is a unique identifier to be used only once, as previous people have said.
The id also carries a higher degree of specificity than a class. So, for example, if you had this markup on a page:
| Code: |
| <h1 id="head" class="example">bla bla</h1> |
and these rules in your CSS:
| Code: |
#head { color: blue; }
.example { color: red; }
|
The h1 would be blue and not red, because an id has more specificity then a class (or more "influence" if you will).
You can find some more information about specificity here. You could also try searching the web for other examples as there are many other resources to be found.
