Forum Moderators: not2easy
I've not seen much discussion around here lately concerning this time saving and excellent CSS tip. I've been working with a lot of tabular data lately and have been styling tables via CSS. During the initial configuration of the stylesheet, I knew I would be using the Multiple CSS Classes tip for the design of those tables. It goes something like this...
/* Cell Alignment Horizontal */.tac{text-align:center;}
.tal{text-align:left;}
.tar{text-align:right;}/* Cell Alignment Vertical */.vab{vertical-align:bottom;}
.vam{vertical-align:middle;}
.vat{vertical-align:top;}The above covers the basic styles for the alignment of the cells and is just an example to show how the following combination of Multiple CSS Classes works. Now the
<table><table>
<tr>
<td class="tal"></td>
<td class="tac"></td>
<td class="tar"></td>
</tr>
<tr>
<td class="tal vat"></td>
<td class="tac vam"></td>
<td class="tar vab"></td>
</tr>
</table>In the above example, I have cells that are aligned horizontally left, center and right. I have cells that are aligned vertically top, middle and bottom.
You could also end up combining many CSS classes to achieve various styling effects on your elements...
.blue{color:#369;}
.tdu{text-decoration:underline;}
.ttu{text-transform:uppercase;}<p class="blue tdu ttu">[blue]BLUE UNDERLINED UPPERCASE CONTENT.[/blue]</p>The possibilities are limitless. How many of you are taking advantage of Multiple CSS Classes?
Thanks por - that's an extremely useful post for me just now!
Eric Meyer covers it in some of his books.
I haven't read any of the books yet. All of my CSS knowledge has come from trial and error along with reading here and other reputable resources.
Sometimes these simplest of things get passed by.
That's just the tip of the iceberg, but I'm learning other ways to use that technique as I go along.
The real power of CSS is the ability to separate content from appearance/layout. The more specific and single-purpose you make your classes, the less separation you have -- and although you get more powerful rendering control than with straight HTML, you lose the flexibility and maintainability of CSS.
Also, there are many arguments against putting rendering details into class names. I'm not as religious as some about this issue, but it does make sense: If class="centered blue bold" (as an extreme example), what happens when you want to change the color to red? You could redefine class "blue" to be "color:#ff0000", but that would be fairly antisocial. So you have to change all of the HTML pages to be class="centered red bold", which ignores the real power of CSS.
Hrm, wait, no. That's not true.
I used to prefer repetetive HTML layout and complex selectors over multiple classes.
Then I simplified my HTML even more, making it smaller and lighter, and no longer need either.
There's a step *after* learning CSS that's rather difficult to see or take advantage of. Once you've move all your style away from the HTML you should try to make your HTML simpler, then make your CSS simpler, then repeat until you have as little as possible of either.
Once you've move[d] all your style away from the HTML you should try to make your HTML simpler, then make your CSS simpler, then repeat until you have as little as possible of either.
<></>
;)
< />
Nirvana is achieved when you have a liquid, three-column, source-ordered, templatized, database supported site with only this code on every page
Well, it sure doesn't feel like nirvana from here, even with fixed width left and right columns! ;)
<></>
Will that validate?
[webmasterworld.com...] (Msg. 4)
(Actually, I've come up with one of my own that's pretty good; probably not as good as yours but it works for me!)
Would multiple multi-column layouts on one page, including nested sections be worth waiting a little longer for?
Getting a bit verbose there, createErrorMsg:
< />
Ah...behold the Transcendant Self-Closing Tag!
I want to see ALL THREE layouts, guys. isitreal's, jetboy's, and matthew's - bated breath time here....
let's get back on topic tho'
Multiple Classes
Thanks for bringing that great post back up p1r
I've been aware you can use them, but have only ever had occasion to use them in the body element as a way to distinguish different page layouts (one class) and decide menu status (second class), and that's only becuase the ID was used up with a body signature, so even that wasn't "necessary".
I've felt like using them within the HTML is akin to too much classification, like using <font> tags almost, and also it generally tends to break the 'rule' of naming for function and not appearance.
It's a useful thing to know/remember if debugging or adding to an existing stylesheet that already has lots of classes in place.
There's probably exceptyions that would warrant theirn use and the table example is possibly one. It would be well suited to using <colgroup> and <col>, IE wins the prize for support this time.. but the others don't support these elements, oh. .. choices :)
Suzy
But in the end, I didn't use the technique that much, more or less for the reasons stated in drbrain's post. What the technique did was helped me understand more clearly what CSS was about and helped unbung my creativity.
It's something every web designer needs to know about and have in their toolkit as an option. But it's not something to use simply because it's there (a bit like all the other things inn the toolkit, really).
