Multiple Classes In Html you can use more than one at a time

jlhaslip · January 12, 2006

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.

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

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.

<p class= "red bold">red and bold</p>

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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Multi-class Tutorial Html</title>
<style type="text/css">
.red {color:red}
.bold{font-weight:bold;}
</style>
</head>
<body>
<p class= "red">red</p>
<p class= "bold">bold</p>
<p class= "red bold">red and bold</p>
<span class= "red bold";>red and bold</span>
</body>
</html>

I hope this is helpful.

Becca · January 12, 2006

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

#content td{color:black}#content #mini{color:white}

html code

<table id="content"><tr><td id="mini">example</td></tr></table>

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. :blink:

jlhaslip · January 12, 2006

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.

Becca · January 14, 2006

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

<span class= "red bold";>red and bold</span>

jlhaslip · January 14, 2006

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

Edited January 14, 2006 by jlhaslip (see edit history)

beeseven · January 15, 2006

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!

Dawiss · January 15, 2006

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 :blink: .. 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 ..

Richard · January 15, 2006

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

About Funky Chickens HTML Help!
Funky Chickens was created in December 1999, to help teach HTML (HyperText Markup Language). HTML is made up of special codes that add the effects that make your website colorful, cool, and professional looking. We have divided the codes into sections to make it easier to find them. There is an index & glossary for you to locate and understand the various codes. If you have a specific problem, try checking out the "Questions" section. We really appreciate your coming to our site, we believe our site will be a useful reference.

Notice from BuffaloHELP:

Fixed quote tag. Use the Preview Post next time.

Edited January 16, 2006 by BuffaloHELP (see edit history)

Amezis · January 25, 2006

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!!

Sign In

Multiple Classes In Html you can use more than one at a time

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information