class vs. id (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

lilblackgirl -> class vs. id (3/11/2004 13:37:06)

I'm really starting to delve into CSS and it appears that these two tags really have a lot of power behind them, but i'm having difficulty decyphering the difference in the two. As i've read, class is for larger scale styling and id is for specific details. So using class would be a good way to style, say, a paragraph where as id would be good for styling a word? If i use id to indicate that a word should be bold faced, why wouldn't it just be easier to use the <B></B> tags instead? Obviously, if i were to need to bold face a number of things on other pages, this could be helpful, but i still think it'd be easier to type <B>word</B> in various places instead of <p id="xyz">word</p> around every word i needed to be bold faced. See my concern? And looking at this, i guess i've raised two questions instead of one.

And while you are here, lemme just get this all out of the way. Could someone please give me a reason to use the <div> tag? I know this may sound stupid, but i just don't understand it's purpose. I've seen examples (and i can always use more) and i don't know if there's something that i'm just not getting or the tag just has multiple purposes, but i just don't get it.

Sorry to be such a pain,
Lil



gorilla -> RE: class vs. id (3/11/2004 17:13:04)

A class is a set of styles that can be applied many times over on a page.

An id is a set of styles that can be applied just once to only one unique element on a page.

A div (short for division) is a box on the page. Divs can be styled or unstyled. They're just containers. They are typically used to hold other page elements.

Here is an example of setting up a page with both types from my lectures on css. The students are required to set up a page for participants in the course.

.klassenavn{
attribut1:parameter;
attribut2:parameter;
attribut3:parameter;
}


Let us imagine that you want more than one div of the type "klassenavn." More over you want some <p> elements to be of that type also.

<div class="klassenavn"> <p>Indholder - Nu er vi godt på vej. Til at opretter et brugervenlig side.</p> </div class="klassenavn">

<div class="klassenavn"> <p>Indholder - Alle deltagerne skal spise rodgrod med fløde, ellers æblegrod.</p> </div class="klassenavn">

<div class="klassenavn"> <p>Indholder - Nu er vi godt på vej. Til at opretter et brugervenlig side.</p> </div class="klassenavn">

Or perhaps you wish to have some paragraphs styled in that way.

<p class="klassenavn">På pladsen "Her anbringes css-definitionerne" indsætter du den nødvendige formatering efter samme retningslinjer som beskrevet ovenfor om css. Medtag de funktioner i stylesheetet, som skal gælde for den pågældende side, og som ikke i forvejen er defineret i en *.css-fil eller som afviger fra definitioner i *.css.
</p>

<p class="klassenavn">Selvfølige kan du mere er hæk klipper.
</p>

However let us imagine that you want only one div to hold your menu and that that div must be placed at a certain point and look a certain way.

#idnavnvenstremenu{
attribut1:parameter;
attribut2:parameter;
attribut3:parameter;
}

The navigation elements are going to go in there and as there are more than one of them they need a class.


#.navitem{
attribut1:parameter;
attribut2:parameter;
attribut3:parameter;
}


The html would be:

<div id="idnavnvenstremenu">



<ul>

<li class=".navitem"> <a href="/">» Forside</a> </li>
<li class="navitem"> <a href="/konto/tilpas.php">» Tilpas</a> </li>
<li class="navitem"> <a href="/nyheder/">» Nyheder</a> </li>
<li class="navitem"> <a href="/phorum/">» Forum</a> </li>
<li class="navitem"> <a href="/info/">» Vejledning</a> </li>
<li class="navitem"> <a href="/info/kontakt.php">» Kontakt</a> </li>

</ul>
</div">

The css tutorials on outfront have more info on this also.

You should also go here:

http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.2



gorilla -> RE: class vs. id (3/11/2004 17:21:31)

One very important point - make sure that you don't confuse your terminology. CSS is applied to selectors, (tags) i.e. css rules are not themselves tags. They are applied to them.

This is very important - or you can confuse yourself horribly.

Goodnight :-)



d a v e -> RE: class vs. id (3/11/2004 17:37:05)

IDs are for unique instances of a styles on a page, for example a navbar, or a footer.

whereas you might have several instances of a class something like .bluetext applied to numerous paragraphs and/or individual words, an id should only appear once on a page.

classes can be used on any element either block level (something that sits in it's own virtual 'box' and starts on a new line - e.g. headings, paragraphs, table) or inline element (something that is in the flow of the document and sits in the middle of say text without starting a new line, like an image.

so if you had a class of .bluetext you could apply it to anything - a paragraph
<p class="bluetext">
and all that text would be blue.
to a table
<table class="bluetext">
and all the text within the table would be blue
or to inline elements such as
<span class="bluetext">

e.g. this sentence contains some <span class="bluetext">bluetext</span> as an inline

a div (or division) is a container or virtual box that you can place any number of elements in. it's a block level element (so starts on a new line). for example you could place a div around several paragraphs that are a warning (for example with a class of .warning {color: red; border: 1px solid black;}

then wrap several paragraphs in a div with a class of 'warning'

<p>this is a normal paragraph </p>

<div class="warning">
<p>Don't play on railway lines. It's dangerous</p>
<p> don't play with knives, don't use scissors. don't stick your hand in the fire</p>
<img src href="skull_and_xbones.gif">
<p> don't drink poison - you might die!</p>
</div>

<p> these warnings are for your own use - but tell others!

so the middle 3 paragraphs would all be red text and be surrounded with a 1 pixel black solid border.


<span> has the similar function but for inline elements, so for exmaple you can surround several words/one word in a paragraph, with our friendly .warning class and that word would be in red with a 1 px black solid border

<p>this advice is given on the understanding that it may not be 100% correct. <span class="warning"> Warning shouldn't be taken as gospel!</span>

you'll have to imagine the black borders!

so divs can be used to replace tables for example.



Peppergal -> RE: class vs. id (3/11/2004 17:42:41)

Instead of <b></b> you can use <strong></strong> instead.


You can also set up a style and then use <span></span> for changing something within a line - suppose you want the text in the middle of the line to be bold red. You set up a style for it:

P.redbold {color: red; font-weight: bold}

Then, within the line, just before the first word you want bold red type in <span class="redbold"> then after the last word use </span>

This is also very useful if you want larger text within a certain paragraph or line.



Giomanach -> RE: class vs. id (3/12/2004 3:33:41)

quote:

Instead of <b></b> you can use <strong></strong> instead.

Hasn't <b> been deprecated by HTML 4.0 standards?



Peppergal -> RE: class vs. id (3/12/2004 5:06:59)

it does validate when using a HTML 4.01 transitional doc type.



d a v e -> RE: class vs. id (3/12/2004 9:29:57)

it validates in strict html as well:
http://validator.w3.org/check?uri=http%3A%2F%2Fmembers.surfeu.fi%2Fdave_pirjo%2Ftest-area%2Fcss_stuff%2Ftest.html&charset=%28detect+automatically%29&doctype=%28detect+automatically%29&ss=1&outline=1&verbose=1

funny though i thought it was deprecated as well - doesn't say it is in the W3C spec. I always use <strong> instead of <b>, and <em> instead of <i>.



lilblackgirl -> RE: class vs. id (3/12/2004 11:54:36)

is there a list of depreciated tags anywhere to use as a reference?



lilblackgirl -> RE: class vs. id (3/12/2004 12:00:30)

quote:

A class is a set of styles that can be applied many times over on a page.

An id is a set of styles that can be applied just once to only one unique element on a page.

A div (short for division) is a box on the page. Divs can be styled or unstyled. They're just containers. They are typically used to hold other page elements.


So, hiearchically, a div would reference something at the highest level (whatever you put inside that invisible box), a class would be specific to something like content or links that you wanted to display in a way that may be different from the rest of the page and an id would be at the bottom of the food chain specifying a style for something very specific on a page (to only be used once)?

Did i get that right?



gorilla -> RE: class vs. id (3/12/2004 13:03:14)

Deprecated tags

http://www.w3.org/TR/html40/index/elements.html

Deprecated attributes.

http://www.w3.org/TR/html40/index/attributes.html

I haven't bothered to put in the url for xhtm as it is easily findable on w3c's site.

Note 1:

There seems to be a lot of confusion about what deprecation means. Deprecated tags are strongly discouraged. While obsolete tags are no longer allowed.

Note 2: <b></b> and <i> </i> are deprecated for usabilitr purposes as aural UAs handle them differently. W3C suggest strongly that people either use CSS or use <strong></strong> or <em></em>

Note 3: In real life I tend to use the loose dtds as they give more freedom. I suggest that real life coders who do this for a living or want to do so too.

What I often do - in fact it is my SOP, is to code to strict and validate to loose. Never allow yourself to be browbeaten by purists, or amateurs, (the two are often synonymous) reach for the tool that works.



d a v e -> RE: class vs. id (3/12/2004 13:17:23)

re: reference
what browser do you use?
if you use gekko based (NN6+, mozilla, firefox) you can install a sidebar reference from http://devedge.netscape.com/toolbox/sidebars/

if you use explorer then you can bookmark this url
http://devedge.netscape.com/toolbox/sidebars/2001/html401qr/elem.html

the last one will work as a sidepanel in opera as well.



gorilla -> RE: class vs. id (3/12/2004 14:04:55)

quote:

ORIGINAL: lilblackgirl


So, hiearchically, a div would reference something at the highest level ...... and an id would be at the bottom of the food chain specifying a style for something very specific on a page (to only be used once)?

Did i get that right?


Yes with caveats - A hierarchical model is a good one to use when you are thinking about this. But rather than saying refernencing think of it as "inheriting" it may or may not inherit specific attributes from its parent element. Typically the parent is the immediately preceding element.

IDs are very powerful as are classes. The difference is important semantically. However if you (say) style something, an ID, in a particular way, there's notihng to stop you also having a class with thge identical rules and applying it repeatedly.



lilblackgirl -> RE: class vs. id (3/12/2004 14:17:31)

And there inlies my confusion. What i could do with one, i could do with the other. So why use both? When i could just cut/past selectors for class, why bother using id?

I didn't mean to be such a pain in the @ss, i just have to get it right in my head before i make an attempt to totally hose my site. [;)] Or a client's, God forbid . . .

Lil



lilblackgirl -> RE: class vs. id (3/12/2004 14:21:12)

quote:

re: reference
what browser do you use?
if you use gekko based (NN6+, mozilla, firefox) you can install a sidebar reference from http://devedge.netscape.com/toolbox/sidebars/

if you use explorer then you can bookmark this url
http://devedge.netscape.com/toolbox/sidebars/2001/html401qr/elem.html

the last one will work as a sidepanel in opera as well.


You lost me here Dave.



gorilla -> RE: class vs. id (3/12/2004 14:46:41)

go and download Mozilla and Opera from:

www.mozilla.org

and

www.oprera.com

respectively you can then go to the links dave has posted and you'll have a reference constantly on hand. :-)



lilblackgirl -> RE: class vs. id (3/12/2004 14:50:41)

I have both. Are you talking about just seeing how sites look in both browsers or something else?



Nancy -> RE: class vs. id (3/12/2004 14:55:28)

quote:

ORIGINAL: lilblackgirl

quote:

A class is a set of styles that can be applied many times over on a page.

An id is a set of styles that can be applied just once to only one unique element on a page.

A div (short for division) is a box on the page. Divs can be styled or unstyled. They're just containers. They are typically used to hold other page elements.


So, hiearchically, a div would reference something at the highest level (whatever you put inside that invisible box), a class would be specific to something like content or links that you wanted to display in a way that may be different from the rest of the page and an id would be at the bottom of the food chain specifying a style for something very specific on a page (to only be used once)?

Did i get that right?


Actually no. But some of it is right. *S*

A div is already an html tag - just the same as <p> or <table> or any number of others you're already familiar with.

Class, and ID refer to ways to (hmmmmm hope gorilla doesn't blast me too bad for my simplification of this) attach or apply a style to an html tag.

So in previous times, hereafter referred to as BSS (before stylesheets) you would put certain attributes into the opening html tag to further define information, such as table padding or cell spacing etc, or alignment, or whatever. Now that information goes into a stylesheet ( after stylesheets A*SS - just realized my abbreviation for after isn't going to work :( )

In other words, you are eliminating the html attributes, and putting that information into a stylesheet. And in order to give instruction to the html tag as to how it is supposed to look, you give it a class or an ID.

There are many reasons to use both class and ID. I like to use information in the ID that is unique, since the ID will only be used once. For information that will be used possibly more than once, that information can go into a class.

For example, a div can be positioned on a page. So that information would be unique - thus it would go into an ID. Further information such as link color etc, which might be used several places, could be put into a class.

Information that might apply always to a page would be put with the selector for a rule, such as font family or page background image or color, which could go into the <body> selector of a CSS rule.

Hope the above makes a little clarification for you.


Nancy



Nancy -> RE: class vs. id (3/12/2004 15:00:16)

I love the sidebar - been using it for months. *S*

Nancy



Peppergal -> RE: class vs. id (3/12/2004 15:13:53)

quote:

I love the sidebar - been using it for months. *S*


THIS is AWESOME.

Thanks everyone!!!!



gorilla -> RE: class vs. id (3/12/2004 15:15:40)

Check out the one for opera:

Link to screenshot http://www.goddamn.co.uk/tobyink/Images/opera_w3-dev_0.99_ss1.png

Link to resource: http://www.goddamn.co.uk/tobyink/?page=10



lilblackgirl -> RE: class vs. id (3/12/2004 15:19:58)

sidebars - ok, i get it now. it's friday and i'm thinking more about getting out of here than what i'm talking about. sorry all.

Nancy - that was the most direct and simple explanation i've seen yet and it explains it all. THANK YOU SO MUCH! Dave clarified it and Gorilla was doing great until he use the word "æblegrod" and then threw me for a loop. [;)] Just kidding Gorilla.

The haze is starting to clear somewhat and a few pieces are clicking into place. I think now i'm just going to sit down and just start coding and play with it until i get it right. But rest assured, i'll be back.

danke,
Lil



gorilla -> RE: class vs. id (3/12/2004 15:32:55)

Well I don't teach that particular course in English after all :-) and there are limits to how much translation my poor fuddled furry brain will cope with at that time of night. Te he can't resist this "danke" did you mean "tak?" In which case "Det var so lidt [:)])

Post Script: I'd never blast anyone for simplifying an explanation especially not when it is so cogently expressed - and defintely I'd never blast you Nancy - I have a highly developed survival instinct [:D] and anyway blasting people for being right is just plain idiotic tests prove that being nitwitted enough to get upset at people for being right and explaining things clearly is likely to lead to caffeine and chocolate deprivation. Lent is hard enough as it is ...............[;)]



d a v e -> RE: class vs. id (3/12/2004 15:36:30)

sinä olet fiksu mies, gorilla ;)



gorilla -> RE: class vs. id (3/12/2004 15:44:00)

If you do that in Hungarian as well I'm going to run for cover. Greetings from Copenhagen btw Dave.



d a v e -> RE: class vs. id (3/12/2004 15:47:45)

it takes more than one lifetime to do it in finnish nevermind anything else!
(btw i only said "you're a clever man, gorilla" if you weren't sure)



gorilla -> RE: class vs. id (3/12/2004 15:53:49)

LOL I know, btw it and Magyar (Hungarian) are the only two Ugrik language group languages in Europe. We know more or less how and why the Magyars wound up where they did. nobody (inlcuding the Finns) has the faintest idea how on earth they wound up being there. OK enough Off topic chit chat. I'll post a link here to some stuff about the underlying models when I've finished it.



d a v e -> RE: class vs. id (3/12/2004 16:04:43)

(off topic) tael er dansk? wo du hin?

if you have conflicting rules for an ID and a Class, then the ID rule will win out over the class because it has a higher value in the cascade order - at least that's what my old css book says, i assume css2 hasn't changed in that respect.

another reason to use ID for unique occurences on a page is that they are easier to spot in yuor style sheet, and a lot of stylesheet editors (topstyle, style master) group classes together and divs together. that way i always remember where my navigation ID's are, my footer ID's are etc.



gorilla -> RE: class vs. id (3/12/2004 16:35:55)

quote:

ID selectors have a higher precedence than attribute selectors. For example, in HTML, the selector #p123 is more specific than [ID=p123] in terms of the cascade.


(http://www.w3.org/TR/REC-CSS2/selector.html)

You might want to have a look at these too:

http://www.w3.org/TR/REC-CSS2/cascade.html

http://www.w3.org/TR/REC-CSS2/cascade.html#cascading-order

http://www.w3.org/TR/REC-CSS2/cascade.html#specificity

In general the order is this:

1. Choose Specificity
2. Choose Class over General Style Selectors
3 Favour Contextual Specificity
4 Sort by Order

They give the algorithm and examples - its really just simple arithmetic. What I tell my students to ask themselves (and avoid having to do the arithmetic) is "what is closest to the selector in question?"

Sort of on topic:

BTW if you've missed me saying it repeatedly elsewhere - I keep a database of this stuff in text format www.treepad.com even the freeby version will do great job. Fits on a floppy too.

Off topic

Hvis du gerne så kan vi g'r det hele på dansk - faktisk har jeg voksn' med dansk, irsk, og engelsk som modersmå'r.

But it might be a little discourteous to the anglophones don't you think? We generally reckon it takes a foreigner willing to work hard about 5 years to learn danish.



d a v e -> RE: class vs. id (3/12/2004 16:56:37)

yep enough of me hijacking the thread with language fluff!
I only know a few words of danish from when i 'studied' (teaching) there for about 3 months in Jutland. my English is pretty good though, and my CSS is basic but ok, with a few grammatical errors ;)



Page: [1] 2   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375