IT WORKS, IT REALLY DOES!!!!!!!!!!!!!!!
For as long as I have been working with CSS and HTML (3+ years) I have been extremely frustrated that I couldn't apply more than one CSS class to an element. You know what, I WAS WRONG!!! I have wasted countless hour duplicating classes in CSS. NEVER AGAIN!! The code below works.
CSS:
.redText {
color: red;
}
.blueBox {
background: blue;
}
XHTML:
<p class="redText">Filler</p>
<p class="blueBox">Filler</p>
<p class="redText blueBox">Filler</p>
The bottom paragraph will contain a paragraph with red text and a blue background!
I realize this might not be big news to a lot of you, but this is something I have not seen an example for in my 3 years of searching the web for CSS / HTML problems. Only by pulling someone elses code apart a few days ago did I see this being used.
I THINK THIS POST SHOULD BE A STICKY!! You should have read the W3C Recommendations (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/struct/global.html#h-7.5.2">http://www.w3.org/TR/html4/struct/global.html#h-7.5.2</a><!-- m -->) You should have read the W3C Recommendations (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/struct/global.html#h-7.5.2">http://www.w3.org/TR/html4/struct/global.html#h-7.5.2</a><!-- m -->)
I followed your link and read it. And I quote:
The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes.
(emphasis mine)
But I didn't notice an EXAMPLE of using two classes. How hard would it be to show one example with:
class="red blue"
Anyway, I have work to do... Thanks for sharing!I love that feature, means I can make things that say class="small red box" where small sets the size, red sets the color and box sets the general attributes, though usually I put colors in something else so I can change themi didnt know this, thanks for sharing i couldve used this just the other dayThank you for sharing!I love that feature, means I can make things that say class="small red box" where small sets the size, red sets the color and box sets the general attributes, though usually I put colors in something else so I can change them
I didnot get the point your trying to say that is you will create 3 different css named small, red, and box....Plz explain it Look at this:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>classes</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.small {width:3em; height:3em;}
.red {background:#f00;}
.box {border:1px solid #000;}
</style>
</head>
<body>
<div class="box">box</div>
<div class="small box">small box</div>
<div class="small red box">small red box</div>
</body>
</html>
For as long as I have been working with CSS and HTML (3+ years) I have been extremely frustrated that I couldn't apply more than one CSS class to an element. You know what, I WAS WRONG!!! I have wasted countless hour duplicating classes in CSS. NEVER AGAIN!! The code below works.
CSS:
.redText {
color: red;
}
.blueBox {
background: blue;
}
XHTML:
<p class="redText">Filler</p>
<p class="blueBox">Filler</p>
<p class="redText blueBox">Filler</p>
The bottom paragraph will contain a paragraph with red text and a blue background!
I realize this might not be big news to a lot of you, but this is something I have not seen an example for in my 3 years of searching the web for CSS / HTML problems. Only by pulling someone elses code apart a few days ago did I see this being used.
I THINK THIS POST SHOULD BE A STICKY!! You should have read the W3C Recommendations (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/struct/global.html#h-7.5.2">http://www.w3.org/TR/html4/struct/global.html#h-7.5.2</a><!-- m -->) You should have read the W3C Recommendations (<!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/struct/global.html#h-7.5.2">http://www.w3.org/TR/html4/struct/global.html#h-7.5.2</a><!-- m -->)
I followed your link and read it. And I quote:
The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes.
(emphasis mine)
But I didn't notice an EXAMPLE of using two classes. How hard would it be to show one example with:
class="red blue"
Anyway, I have work to do... Thanks for sharing!I love that feature, means I can make things that say class="small red box" where small sets the size, red sets the color and box sets the general attributes, though usually I put colors in something else so I can change themi didnt know this, thanks for sharing i couldve used this just the other dayThank you for sharing!I love that feature, means I can make things that say class="small red box" where small sets the size, red sets the color and box sets the general attributes, though usually I put colors in something else so I can change them
I didnot get the point your trying to say that is you will create 3 different css named small, red, and box....Plz explain it Look at this:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>classes</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.small {width:3em; height:3em;}
.red {background:#f00;}
.box {border:1px solid #000;}
</style>
</head>
<body>
<div class="box">box</div>
<div class="small box">small box</div>
<div class="small red box">small red box</div>
</body>
</html>