|
| |
|
|
lilblackgirl
Posts: 288
Joined: 5/16/2002
From:
Status: offline
 |
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
< Message edited by lilblackgirl -- 3/11/2004 12:37:57 >
_____________________________
You look like you're about to do something stupid. I'm in.
|
|
|
|
d a v e
Posts: 4013
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
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.
_____________________________
David Prescott
Gekko web design
| |
|
|
|
Peppergal
Posts: 2204
Joined: 9/20/2002
Status: offline
|
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.
< Message edited by Peppergal -- 3/11/2004 17:45:08 >
_____________________________
Northeast PA / Poconos/ Lake Wallenpaupack Real Estate
wallenpaupacklakeproperty.com
Karen's Real Estate Blog
| |
|
|
|
Giomanach
Posts: 6075
Joined: 11/19/2003
From: England
Status: offline
|
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
Posts: 2204
Joined: 9/20/2002
Status: offline
|
RE: class vs. id - 3/12/2004 5:06:59
it does validate when using a HTML 4.01 transitional doc type.
_____________________________
Northeast PA / Poconos/ Lake Wallenpaupack Real Estate
wallenpaupacklakeproperty.com
Karen's Real Estate Blog
| |
|
|
|
lilblackgirl
Posts: 288
Joined: 5/16/2002
From:
Status: offline
|
RE: class vs. id - 3/12/2004 11:54:36
is there a list of depreciated tags anywhere to use as a reference?
| |
|
|
|
lilblackgirl
Posts: 288
Joined: 5/16/2002
From:
Status: offline
|
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?
| |
|
|
|
lilblackgirl
Posts: 288
Joined: 5/16/2002
From:
Status: offline
|
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
Posts: 3626
Joined: 11/9/1999
From: Nebraska
Status: offline
|
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
_____________________________
Easy Estimates -- is a simple to use tool to quickly build a Web site page enabling visitors to quickly and easily create an estimate of the cost of services that you provide.
| |
|
|
|
Nancy
Posts: 3626
Joined: 11/9/1999
From: Nebraska
Status: offline
|
RE: class vs. id - 3/12/2004 15:00:16
I love the sidebar - been using it for months. *S*
Nancy
_____________________________
Easy Estimates -- is a simple to use tool to quickly build a Web site page enabling visitors to quickly and easily create an estimate of the cost of services that you provide.
| |
|
|
|
Peppergal
Posts: 2204
Joined: 9/20/2002
Status: offline
|
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!!!!
_____________________________
Northeast PA / Poconos/ Lake Wallenpaupack Real Estate
wallenpaupacklakeproperty.com
Karen's Real Estate Blog
| |
|
|
|
d a v e
Posts: 4013
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
RE: class vs. id - 3/12/2004 15:36:30
sinä olet fiksu mies, gorilla ;)
_____________________________
David Prescott
Gekko web design
| |
|
|
|
d a v e
Posts: 4013
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
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)
_____________________________
David Prescott
Gekko web design
| |
|
|
|
d a v e
Posts: 4013
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
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.
_____________________________
David Prescott
Gekko web design
| |
|
|
|
d a v e
Posts: 4013
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline
|
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 ;)
_____________________________
David Prescott
Gekko web design
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
. 
Or a client's, God forbid . . . 
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 ...............