Multiple Classes in Css Styles

Classes are used in html pages to give certain defined attributes to elements. They are useful when the attributes are to be used in more than one place on a page. (Named Id's are only allowed once per page, but I digress... might have a tutorial on that some day.) Sometimes you want Red text and sometimes you want Bold text. Easy enough to do, simply define a class and apply it to the element you want red or bold. Use this class where you want on the page, since classes are enabled to be used in several spots, for different uses on a page. Meaning you could apply the class to h3 tags and selected spans, for example.



Once in a while, you want Red and Bold text. Does this mean you must define a third class and use it? Nope. Css allows you to apply multiple classes to the same element by including both (in this example) classes to the element.



Be sure to leave 'white space' between the class descriptors or the method will fail.
ie: a minimum of one blank space between 'red' and 'bold'.

Here is a sample link to show whether it will work in your browser. Notice that this file shows the Multi-class being used in both paragraph and span tags, and twice on the page as classes are designed to do.

This code has been tested and confirmed working in the following Browsers: Opera8, Mozilla 1.7.3, IE5 Win, and IE5 Mac, with no hacks required, so it should work in most browsers.

Multi-class Link Here

Listing of the Sample file contents:



I hope this is helpful.

oh wow. I actually didn't know you could do that.. Can you do it using the "id" thing aswell? I know you can do the
E.G
html code
I think it's the same, although I don't know. It might be wrong because I usually don't understand the html I write.

Becca,

I modified that sample file above to include your css and code. I added one td tag also, to show that the first css descriptor does actually work.

Your css changes the colour of the first table cell because of the reference to the id = mini for the cell.
The cell next to it reverts back to black because of the first line of your css where the td's colour if defined.

The id=mini can only be used once on each page, whereas the class = red can be applied as many times as you want. That is a signifigant difference between using the id= and the class=.

Any guess to what would happen when id= mini and class=bold?

So now the first cell has id=mini (to make it red) and class = bold (to make it bold), so it could be done using both an id and a class.

Except, it can only be done once on a page, and we now have three things to deal with. One name-id and two classes.
If we drop the name-id, it can all be done with the two original classes anyway, so how come the single use id??? I would use classes only.

wow. That is um... pretty confusing...
plus why is there a gap after the = and ;

white space is ignored in html and the ";" is out of place, but it parses okay, so no worries.

This post has been edited by jlhaslip: Jan 14 2006, 09:42 PM

Wow, I thought I was good at CSS, and I didn't know that was possible. This will be very helpful in the future. Thanks!

Nice and detailed tutorial.. I have never tryed anything like that but I will definatly try something like that .. Great job keep up making such tutorials .. Are you very good in such things because I sometimes need help when making something with CSS.. and I have nobody to ask for it ..

If you new at HTML you could go here http://www.funkychickens.com/html.html that site really helped me. They are realllllllllllly out dated and i mean REALLY outdated lol but other than that its a good site to teach you.
Here is some info about their site





This post has been edited by BuffaloHELP: Jan 16 2006, 01:39 AM

Wow, I actually didn't know that. Does it work in all browsers supporting CSS?

Anyway, thanks alot, I'm sure that will help me!!