How to specify multiple classes for one element

(or multiple inheritance the css way)

[grahamstewart]

The wool has been lifted from my eyes. I was blind and now I can see. Everything is clear to me now.

Papabaer just casually mentioned this in another thread [webmasterworld.com], but it was such a complete revelation to me (and several other forum members, including Nick_W) that I felt it deserved its very own thread.

Say you have a class for 'framing' your elements. Something like..

.framed {
border: 1px solid #ccc;
margin: 10px;
padding: 0;
}

..and now you decide that you'd like to have something framed and floated to the left. In the past I would have either specified this in the style="" attribute of the element or I would have created a new 'framedleft' class that included the old rules and added float:left

But instead you can do this: define a new class..

.left {
float: left;
}

..and then combine the two in the html like this..

<img class="framed left" src="apic.gif">

Obviously this is a trivial example. You can make the rules much more complex and specify as many classes for each element as you like.

I have previously moaned to other developers about the lack of inheritance in CSS, but how little did I know. I take it all back. This is like multiple inheritance with wings.

All hail papabaer - the bringer of new knowledge to old minds!

[netcommr]

I did not know that. Thank you for noting it, will come in very handy in the future.

More than once I have duplicated an entire class definition, some long ones, with only a slight change. Always seemed to be a foundation for code bloat...

[BlobFisk]

Using multiple class definitions on elements will allow us to streamline our CSS very highly. The float example shows this very well - you can have a number of class definitions that do highly focused tasks (border, float, margin etc.) and then apply those needed to an element.

This rule will prove extremely useful to me going forward!

[grahamstewart]

More than once I have duplicated an entire class definition, some long ones, with only a slight change.

Well that shouldn't lead to code bloat either, because you could always do this..

[pre]
.framed, .framedleft {
 border: 1px solid left;
 margin: 10px;
 padding: 0;
}
.framedleft {
 float: left;
}
[/pre]

But I like this 'new' way a lot better!

[BlobFisk]

Actually, one thing I think to be careful of with this 'new discovery' is code bloat. There may be a temptation to create a large number of highly focused classes (eg: one for a red border, one for a blue border etc.), which may not be ideal at all and lead to a CSS file with a large number of classes.

As always, it depends on need - but I certainly foresee using it quite a lot!

[netcommr]

so true BlobFisk, I have usually done things like this...

TD.standard { color: #44EEFF; background-color: blue; }

<TD class="standard"> hard to read text...</TD>

<TD class="standard" style="background-color: white;"> easy to read text...</TD>

just to make slight changes runs much faster than 2 classes. From what I understand each class definition requires the object construct and a seperate memory request which can slow pages down.

[BlobFisk]

From what I understand each class definition requires the object construct and a seperate memory request which can slow pages down.

Very interesting, netcommr! Is that when the browser reads the CSS or when a class/id is called from the HTML?

[netcommr]

I am not sure. I would guess the developers would think for efficiency and tend not to construct a class not used in the current page. Say if your style sheet is remote from the page and contains classes for other pages.

[grahamstewart]

BlobFisk: absolutely. You don't want to be writing

class="red bluebg floatleft 1pxbordered"

otherwise you might as well use inline styles. But used carefully this could be a very powerful tool.

netcommr: don't confuse CSS classes with classes in proper languages like Java or C++. I very much doubt that they create any 'objects' from these classes.

However, even if using multiple CSS classes used more memory than inline styles, there is no way it would slow down the page because (A) your PC has loads of memory and we'd only be talking about a difference of a few bytes and (B) the bottleneck is the download time not the rendering time.

[netcommr]

Now that I think about it more, it would have to be only when needed since a class can be constucted differently when applied to different type of elements in a page.

[netcommr]

GS, everything in the page is a construct...

[grahamstewart]

class="standard" style="background-color: white;...runs much faster than 2 classes... a seperate memory request which can slow pages down

Rubbish!
Runs much faster? I'd like to see some figures to back that up.

I seriously doubt that you have had a look at Microsofts source code for Internet Explorer, so any statement you make on how they actually handle styles internally can only be a guess.

Have you any idea how long a 'memory request' actually takes? A very,very short time indeed. You PC could do a million of them and you'd never notice a thing.

(we're getting well off-topic here.. please bear with us. Normal service will be resumed shortly)

[Psalm91]

Graham, papabaer -

This is all very neat - I was not aware of the multi-inheritance abilities either and can see how this would be very useful to me as well.

As for single inheritance, I have been using two separate css files and just refining the attributes of the classes in the 'secondary' css. e.g.

First css file:

.title {
color: black;
border: 1px solid silver;
...
}

Second css file:

.title {
color: red;
}

Is this correct css or am I just taking advantage of some anomaly in the browser's implementation? It works correctly on IE6 and NS7, but I have not done any backward compatibility tests, nor dug through the css spec.

[ricfink]

"They have eyes but they see not."

I recently spent a few hours flipping through the HTML 4.01 recommendation in a quest for definitive information. Challenging my assumptions, so to speak.
For some reason, I came away with the impression that a class was a string value that could have spaces in it.

Turns out this is wrong, wrong, wrong and I'm wondering just what gave me that impression. (I think the rec may be badly written on this point.)

Anyway... for the record:

class is an attribute of type CDATA that consists of a SPACE SEPARATED LIST OF CLASSES.

The class attribute can be applied to any element except:
BASE
BASEFONT
HEAD
HTML
META
PARAM
SCRIPT
STYLE
TITLE

That's the straight skinny and if papa's the one who brought this to everyone's attention, all praise to p-baer.

[netcommr]

GS, did you get my sticky on benchmarking with +TIME

from SDK docs. [msdn.microsoft.com] on MS

The systemBitrate attribute retrieves the bandwidth available to the system; it is sampled once when the page loads or is refreshed.

not rubbish, just tricky to do...

[grahamstewart]

Yup, just read it.

systemBitrate is a measurement of bandwidth (i.e. how fast someones modem/adsl/cable connection is) which in turn affects how fast the page can be downloaded.

This has nothing do with how fast the page 'runs' or renders, which is what you were talking about above. In particular, using CSS classes should not affect the systemBitrate measurement in anyway.

If you think otherwise then show me some figures...

[papabaer]

Hey everyone! Wassup!

Yes.. multiple classes kick major.... *ss! And they will NOT create code bloat, rather, using multiple classes 'judiciously' will in fact help reduce code bloat.

Psalm91,
try this instead:

.title {
color: black;
border: 1px solid silver;
}

Second css file:

.r {
color: red;
}

<span class="title r">Some Good Book!</span>

The above would give the desired effect as the .r class ends the cascade.

"The first comes last, and the last comes first..."

Slows load times? Ummmm... no. Especially if you need to use twenty instances of inline style code to accomplish everything a single class reference can do.

[strimmerboy]

I've used multiple classes a bit, but only since I decided to stop kowtowing to NS4. I seem to remember that the older browsers ignore all of the specified classes.

More information on browser compatibility would be nice.

[kapow]

This sounds incredible. Thankyou papabaer (and grahamstewart for highlighing it).

So would it work like these examples?:

<p class="main bluebackground special">

<h1 class="main red">

<div id="nav special imagebackground">

[Psalm91]

Ok - bad example... Let me try again -

a:link {
color: black;
...
}

Second css -

a:link {
color: red;
}

No span or class needed - any link will be black unless the second css is included to override the first color (or whatever attribute you want).

However, I wasn't sure if this was proper css (even though it works fine in my browsers).

Thanks again for the tip on multi-inheritance!

[grahamstewart]

I wasn't sure if this was proper css

Yep thats just using the cascade. Perfectly valid.

[Hester]

Can anyone confirm that this works with ALL browsers? I fear a problem with Netscape 4, making the technique impractical.

[warlordbb]

Can anyone confirm that this works with ALL browsers? I fear a problem with Netscape 4, making the technique impractical.

Over the past year we have seen NN4 go from around 10% to less than 3% (sometimes not even 2%).

In our opinion (<-- see, I said opinion) using NN4 to browse the web is what is impratical. Therefore, our owner decreed, "we'll design to improve for the 98% and no longer care how loud the 2% screams".

[Swordsman]

I feel that I must be missing something obvious but It seems to me that there is a drawback to using CSS in this way.

One of the reasons I use it is to make it easy to make changes. Wouldn't using this method make updates harder? Wouldn't making these changes require going to multiple files and changing classes?

Be easy on me I'm still a newbie at CSS.

[SuzyUK]

I've been using it for a while a find it especially useful to create classes for the "bold" and "italic" deprecated tags..

I then don't have to worry about what class I am using if there is a word or phrase in the normal flow of text that I want to add emphasis too (visually only of course!) I can:
<p class="normal italic"> (say for a quote) for visual reasons ... or use a <strong class="italic"> just for the one word...and it will work visually and aurally.

Also I find "red text" sometimes is very handy for highlighting an important note so again it can be used along with regular classes in a one off instance..

These are some of the simplistic ways to use them, and I can see that there is ways that this could become "abused" but the "float" instance is a very good example especially since reading about the "sandbag divs" and imagine if the pictures you're sandbagging are mirror images of each other...

btw like your style (pun was intended!) papabaer, I think I missed you as in I joined just after you left, but I've enjoyed all your tutorials, which I spent my first few months reading ;)

Suzy
[edit] wrong reference ooops..;)[/edit]

[edited by: SuzyUK at 8:01 pm (utc) on May 1, 2003]

[SuzyUK]

Swordsman

everyone's a newbie at some point ;) in fact I still consider myself to be as there is always something new to learn..

Wouldn't making these changes require going to multiple files and changing classes?

Yes, probably and I would suggest it's not worth making the changes, but instead learn to use them when starting from scratch. The advantage being that it actually removes the need to incorporate an overruling stylesheet(s) for pages that need "oddities" from the rest of your documents...

Yes you can use inline styles but once a rule is incorporated into your CSS it can be reused so you won't need an inline style the next time..

Suzy

[grahamstewart]

Swordsman: you can define multiple CSS classes within the same file, and you can make multiple rules for the same class within the same file.

e.g.

div.framed, #header, #footer {
 color: #000;
 background: #ccc;
 border: 1px solid #ccf;
}
div.framed {
margin: 10px;
}

These rules could appear in the same file. Here we assign colours and a border to an element with id="header", the element with id="footer", and any div with class="framed". we gather with together into a single rule to avoid repeating ourselves.

Then the second rule expands on the first to give a bit of room around the framed class.

However, using papabears multi-class approach we could choose not to write that second rule and do something like this instead..

.smallgap {
margin: 10px;
}

and then we can say in the html that an element has the class="framed smallgap". Probably not the best example but I hope you get what I mean.

So no - you should not require more files (tho sometimes its handy when dealing with browser specific hacks to keep them all separate).

SuzyUk

<p class="normal italic"> (say for a quote) for visual reasons

I think this might be a bad idea. If your defining things at that level then you might as well use inline styles.
Also its better to stick with class names that describe what the element is, rather than what it looks like. That way you can change the styling without making your code confusing. So, for example, you might want to call this class 'quote' and define it to be italic in the CSS.

(p.s. if it really is a quote then you should be using <q> or <blockquote> in the markup. Don't fall into the trap of using poor markup and then styling it all in CSS. Good markup = document structure = good accessibility = good SEO)

[Oaf357]

Okay take this:

.left, .right, .navmenu, .navmenu-r, .navtext, .navtext-l, .tinytext, .searchbox, .searchbutton{font-family:Arial, Helvetica, sans-serif}
.left{font-size:100%;text-align:left}
.right{font-size:100%;text-align:right}
.navmenu{font-size:75%;text-align:left}
.navmenu-r{font-size:75%;text-align:right}

Could something using "navmenu-r" be consolidated to "navmenu right"?

I imagine the font sizes would be a problem, yes?

[SuzyUK]

grahamstewart...it was just an example and I said in the next post that inline styles would do it! just trying (and not very well) to add some extra examples. PS. I don't like "<q>" as it sometimes gives the quote marks sometimes doesn't..and I'm not alone! [diveintomark.org]

Oaf357

.left, .right, .navmenu, .navmenu-r, .navtext, .navtext-l, .tinytext, .searchbox, .searchbutton{font-family:Arial, Helvetica, sans-serif}
.left{font-size:100%;text-align:left}
.right{font-size:100%;text-align:right}
.navmenu{font-size:75%;text-align:left}
.navmenu-r{font-size:75%;text-align:right}

Could something using "navmenu-r" be consolidated to "navmenu right"?

Yes right..font sizes would be a problem..but how about

.navmenu, .navtext, .tinytext, .searchbox, .searchbutton {
font-family:Arial, Helvetica, sans-serif;
font-size: 100%;
}
.left {text-align:left}
.right {text-align:right}
.navmenu {font-size:75%;}

now "navmenu right" and "navmenu left" will work.

You won't need to declare other styles for .left and .right as they will now "inherit" the font-family and size from .navmenu

Suzy

[Nick_W]

n fact I still consider myself to be as there is always something new to learn.

An award winning newbie.

Note to those that do not know Suzy: Listen and learn ;)

And yeah, I make bad examples all the time, all part of being human ;-)

Nick