Topic: some questions on css (Page 1 of 1) Pages that link to <a href="http://ozoneasylum.com/backlink?for=10773" title="Pages that link to Topic: some questions on css (Page 1 of 1)" rel="nofollow" >Topic: some questions on css <span class="small">(Page 1 of 1)</span>\

 
jive
Paranoid (IV) Inmate

From: Greenville, SC, USA
Insane since: Jan 2002

IP logged posted posted 07-18-2002 17:28 Edit Quote

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?




Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

IP logged posted posted 07-18-2002 18:03 Edit Quote
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).]

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

IP logged posted posted 07-18-2002 18:04 Edit Quote

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).]

jive
Paranoid (IV) Inmate

From: Greenville, SC, USA
Insane since: Jan 2002

IP logged posted posted 07-18-2002 18:50 Edit Quote

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?

Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

IP logged posted posted 07-18-2002 19:10 Edit Quote

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.

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

IP logged posted posted 07-18-2002 19:28 Edit Quote

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.

jive
Paranoid (IV) Inmate

From: Greenville, SC, USA
Insane since: Jan 2002

IP logged posted posted 07-18-2002 19:30 Edit Quote

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?

mr.maX
Maniac (V) Mad Scientist

From: Belgrade, Serbia
Insane since: Sep 2000

IP logged posted posted 07-18-2002 19:42 Edit Quote

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

Enjoy!


jive
Paranoid (IV) Inmate

From: Greenville, SC, USA
Insane since: Jan 2002

IP logged posted posted 07-18-2002 19:56 Edit Quote

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

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 07-19-2002 00:32 Edit Quote

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.

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 01-25-2003 18:26 Edit Quote

Started FAQ on this and threw a few things in:

:FAQ:

___________________
Emps

FAQs: Emperor



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu