FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


CSS





PatTheGreat42
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.
yjwong
They are the same.
mystuff
<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.
Chris Tiaens
!!!!! 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;-)
misterdimiz
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.
dkbg
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.
sonam
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;-)


ABSOLUTELY AGREE WITH FIRST PART! How Chris Tiaens point out you can use class as many times you want on one page. Id you can use only once on one page.

I don't think this is any correlation with slower or faster reading of html because I think page will load fast if your content is not too heavy. If you have heavy image in div id="image" and ten divs with class="simple_text" you will see how all ten texts are appear before this image.

By the way you don't need to write class (and id's, too) in long way (div.header or div.#header) in your CSS. If you use shorter way .header or #header then you can use class (and id's) for other tags too, otherwise only for divs. For example:

CSS

Code:

.red{
color: #ff0000;
}


HTML

Code:
<p class="red">Some text</p>
<a class="red"href="somefile.htm">Some text</a>
<div class="red">Some text</div>


Sonam
iramsweet
hmm but mostly used class and some use id also it deppend on the nature
sonam
iramsweet wrote:
hmm but mostly used class and some use id also it deppend on the nature


I don't want to say id's are not important and don't use it. Even more, id's are very useful and important but I am using id's only for main construction (template) of site. For all other elements in this template I am using class (.someclass) and sometime specified class what I can use only is specified div (#somediv.someclass). But this second opinion I am using very rarely in most situation when I change CSS what is very complex and I didn't create it.

Sonam
Dialogist
sonam wrote:
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;-)


ABSOLUTELY AGREE WITH FIRST PART! How Chris Tiaens point out you can use class as many times you want on one page. Id you can use only once on one page.

I don't think this is any correlation with slower or faster reading of html because I think page will load fast if your content is not too heavy.


I think he's talking about the markup itself of the actual page and how later incarnations of browsers read them and what they are now programmed to respect in terms of hierarchy in terms of load and render times and its definitely always been an issue. Remember the trusty old !important suffix? Nowadays many browsers are built to respect many devices and platforms too and while IE is still the village idiot, its prioritising of the relevance of your markup is perhaps more evident than it is in more proficient browsers. I actually appreciate it for this reason. Whenever I check my markup by web standards, I always take into account what IE fails or fudges (as the largest number of platform internet users still use it). Also google use algorithms to keep shady markup off the top of the search results so you're thinking about SEO as well as usability. If you have everything as an unique ID when Classes can be communal, you're not only going to have extraneous markup, you're also going to have amateurish markup which may penalise with either browser, platform, search listing client or all.
Related topics
Do you use css to design a website?
<hr> stilosi con i CSS
Angoli arrotondati con i CSS (senza tabelle)
CSS tools
css + html
Tutorials
Okay, I'm done trying to use CSS for layout.
What do you use to make your page layout?
[Beginner] css rollovers
[Beginner] Classes, Applying classes in CSS
Handling Css using Javascript
CSS OR TABLES
What Is CSS and PHD?
Get more template with css style
CSS Text Wrapping
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.