Topic: some questions on css

I've been starting to implement css more in my webpages and have been doing alot of reading a "testing". (Especially w3 schools which is a great resource!) There's a few things that I don't understand still. Instead of plastering the asylum with tons of posts, I'll attempt to ask all my questions here. I hope you'll have some patience with me, because I really want to get this down and I know I'll have alot of questions afterwards.

1. what is the difference between the .class element and the #element? They seem to be used for the same thing but it seems like one uses the class attribute and one uses the id attribute.

2. whats the difference between the class and id attributes?

3. Does netscape 4x not support colors running in the background of the <td> tag?

4. Is there a real difference between netscape 4.5 and netscape 4.7? I recently put a post here and my menu worked fine for me when I used netscape 4.5, but somebody told me that they didn't see it when they viewed it in 4.7?

quote:

---

1. what is the difference between the .class element and the #element? They seem to be used for the same thing but it seems like one uses the class attribute and one uses the id attribute.

---

class is used for mutiple items. If you have a bunch of <div> on your page, and want to style them the same, use a class. ID (# element) is for a single item. You can use both together to combine CSS style. For example:

<style type="text/css">
.myclass {border: 1px solid #ffcc00;}
#mydiv {width: 100px; height: 100px; background: #ffffff;}
</style>
<div class="myclass" id="mydiv">blah</div>

quote:

---

2. whats the difference between the class and id attributes?

---

That's the same question as #1!

quote:

---

3. Does netscape 4x not support colors running in the background of the <td> tag?

---

I don't belive so.

quote:

---

4. Is there a real difference between netscape 4.5 and netscape 4.7? I recently put a post here and my menu worked fine for me when I used netscape 4.5, but somebody told me that they didn't see it when they viewed it in 4.7?

---

I couldn't tell you. 4.5 is like REALLY old. Dump it and move on (same with 4.7).



[This message has been edited by Pugzly (edited 07-18-2002).]

[This message has been edited by Pugzly (edited 07-18-2002).]

I'll take #'s 1 & 2.

you are on the right track when you say the . refers to classes and the # refers to ids.
Now, what is the difference?
The difference is in how you use them within your html.
Let us say you have a div that you would like to have positioned in a certain place. Well, since you wish to define the style of that 1 div, you would use the id.

html = <div id='somethingSpecial'>;sdfjsdlf;sj</div>
css = #somethingSpecial{position:absolute; top:10px; left:25px;}

Of course you could go on to define all sorts of things about that div: background color or image, margins, paddings, borders, etc. ... even define the fonts inside that div with font-family, font-size, color, line-height, etc.

Now, on to classes.
classes are used when you wish to define a style that will apply to many elements on your page.
an example would be...let's say you had a page you wanted 2 columns. One column that would hold content, on the right side of the page, and a series of divs that would hold auxiliary stuff (nav, links, sidenotes, whatever) on the left side of the page. All the divs in that second column (the one on the left) could be given a class and then you define that in the style sheet one time so all divs with that class have the same style.

html =
<div id='nav' class = 'auxillary'>;aldfjdsljfsd</div>
<div id='links' class = 'auxillary'>;aldfjdsljfsd</div>
<div id='sidenote' class = 'auxillary'>;aldfjdsljfsd</div>
<div id='whatever' class = 'auxillary'>;aldfjdsljfsd</div>

css = .auxillary{float:left; clear:left; width:40%}

...and so on.
Like using the id's, you may define all sorts of styles to a class of elements -- positioning, padding, margins, borders, background colors and images, fonts, etc.

So, in short, use id to define styles that will apply to only one very specific element (whether that element is a div, span, anchor, table, paragraph...whatever) and use class to define styles that will apply to a collection of elements.

Another thing is, you can define style for a particular type of element.

css = p{font-family:verdana; font-size:10px; color:#4a4a4a;}

(Notice there is no punctuation in front of the 'p')
That style will apply to all paragraphs in your html, unless you later specifically override this with a class or an id style. You can do that with any type of element (div, span, anchor, table, headings, etc.)

Cool?

mobrul

[edit:damn, pugz is too fast!]

[This message has been edited by mobrul (edited 07-18-2002).]

ok yeah, I do get it. so sounds like the .class element will have more style definitions and the # will be shorter (unless thet element needs alot of detailing). So its pretty much the same thing except .class = many and # = one specific. Right?

Also about navigator 4.5 and 4.7, I don't use them as my primary browser, just tests. I should still design my sites for them though, shouldn't I?

You are correct on the .class = many and # = one specific.

As for NetScrape, there is always a large discussion about that going on somewhere. Look at your stats or other stats on the 'net and you'll see that the traffic coming from those browsers may not warrant the extra effort.

Of course there is always my favorite way to handle it.

Import the style sheet. Netscape 4.* ignores the import, thus no conflict.
If your HTML is written logically, the content will all be very accessable and usable by anybody...it simply won't look 'pretty' on those devices which do no accept style sheets.

Your customers don't lose functionality; those willing to upgrade their browsers get a little something extra -- namely a well designed (I hope!) site.

where can I find such statistics? (besides on my personal tracking info). what I mean , is there somewhere that tells me what percentage of the population uses what browser? Is there a way to even find this out?

Global statistics from TheCounter service: http://www.thecounter.com/stats/

Enjoy!

hmmmm. interesting. Looks like almost 90% seem to use ie. ie 5 more than anything....

By the way, a couple more points:

1. while the id="" attribute can only have one value, and that value must be different from all other IDs in the page, the class="" attribute can have *multiple, space separated* values. For instance:

.happy {font-style:italic; font-color:#F88;}
.evil {font-family:FontOfEvilness;}
...
<p class="happy">I'm the good guy</p>
<p class="evil">I'm the bad guy</p>
<p class="evil happy">I'm the bad guy after eating the good guy</p>

2. You ask if netscape 4 supports background colors for TDs. I'm not sure if it does or not, but remember that when it comes to backgrounds, netscape 4 only supports the general background: property, not background-color: or background-image: or anything like that.

Started FAQ on this and threw a few things in:

:FAQ:

___________________
Emps

FAQs: Emperor