homepage Welcome to WebmasterWorld Guest from 54.196.196.108
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Multiple CSS Classes
One element, multiple styles...
pageoneresults




msg:1221568
 2:32 am on Sep 21, 2004 (gmt 0)

A couple of years ago a long time and well respected member, papabaer [webmasterworld.com] posted one of the most enlightening CSS tips; Multiple CSS Classes.

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> code...

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

 

vkaryl




msg:1221569
 2:38 am on Sep 21, 2004 (gmt 0)

Weeeellll..... I wasn't, but I bet I do now! Missed that the first time around, I guess, and I do have sites that need table functionality.

Thanks por - that's an extremely useful post for me just now!

Rambo Tribble




msg:1221570
 2:40 am on Sep 21, 2004 (gmt 0)

Yo. I didn't realize it was a "best-kept secret" kinda thang. Eric Meyer covers it in some of his books.

pageoneresults




msg:1221571
 2:57 am on Sep 21, 2004 (gmt 0)

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.

photon




msg:1221572
 1:13 pm on Sep 21, 2004 (gmt 0)

I've been using multiple classes for a new web site I'm developing. Each section is color coded. So I have a class defined for each section that is simply the color for that section. It then gets applied to the appropriate places along with whatever other classes may apply.

That's just the tip of the iceberg, but I'm learning other ways to use that technique as I go along.

quesera




msg:1221573
 3:37 pm on Sep 21, 2004 (gmt 0)

This technique definitely has its applications (the one I use all the time is class="primarynav on"), but it can be taken too far.

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.

drbrain




msg:1221574
 5:22 pm on Sep 21, 2004 (gmt 0)

I prefer to use repetetive HTML layout and complex selectors over multiple classes.

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.

createErrorMsg




msg:1221575
 8:07 pm on Sep 21, 2004 (gmt 0)

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.

Zen and the Art of Web Design. Nirvana is achieved when you have a liquid, three-column, source-ordered, templatized, database supported site with only this code on every page...

<></>

;)

Rambo Tribble




msg:1221576
 10:21 pm on Sep 21, 2004 (gmt 0)

Getting a bit verbose there, createErrorMsg:

< />

jetboy_70




msg:1221577
 10:37 pm on Sep 21, 2004 (gmt 0)

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

buckworks




msg:1221578
 10:47 pm on Sep 21, 2004 (gmt 0)

<></>

Will that validate?

jetboy_70




msg:1221579
 10:52 pm on Sep 21, 2004 (gmt 0)

Those who have reached true enlightenment will no longer need to validate, my child. ;)

MatthewHSE




msg:1221580
 11:01 pm on Sep 21, 2004 (gmt 0)

Hey Jetboy, you've been mysterious about your "Holy Grail" layout for months now! Is it finished and ready for us in the general public to scramble over? ;)

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

jetboy_70




msg:1221581
 11:09 pm on Sep 21, 2004 (gmt 0)

Cool. Glad you've got something going. isitreal's also making noises about having done one, and to be honest, Ryan Brill's A List Apart article wasn't far off.

Would multiple multi-column layouts on one page, including nested sections be worth waiting a little longer for?

MatthewHSE




msg:1221582
 11:27 pm on Sep 21, 2004 (gmt 0)

Sure it's worth waiting for! I've seen isitreal's design and it's probably the best I've seen if you want totally fluid and full-height columns are important. My layout requires fixed-width side columns, so I had to invent my own. Works quite well; I'll try to post the code in the next couple of days for people to pick apart! ;) I vaguely remember that preview you stickied me, Jetboy, of your design, and if I'm remembering correctly, it's better in at least some aspects than mine. Between us all, if we make a concerted effort, there must be a real solution somewhere!

createErrorMsg




msg:1221583
 1:08 am on Sep 22, 2004 (gmt 0)

Getting a bit verbose there, createErrorMsg:
< />

Ah...behold the Transcendant Self-Closing Tag!

vkaryl




msg:1221584
 1:11 am on Sep 22, 2004 (gmt 0)

*off topic as usual*

I want to see ALL THREE layouts, guys. isitreal's, jetboy's, and matthew's - bated breath time here....

SuzyUK




msg:1221585
 7:52 am on Sep 22, 2004 (gmt 0)

hey.. so would I like to see all three ;)

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

TheDoctor




msg:1221586
 7:48 pm on Sep 23, 2004 (gmt 0)

papabaer's post must have been one of the first things I read when I first came to Webmaster World (I came here for this forum), and it helped me sort out my CSS no end.

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).

MatthewHSE




msg:1221587
 8:06 pm on Sep 23, 2004 (gmt 0)

Somehow I missed drbrain's post the first time through this thread. Upon going back and reading it, the concept of "no longer needing either" sounded very familiar. Looking at my own markup these days, I can see where I've been, where I am, and where I'm headed. And I have to say, he's right. It's difficult to define how to trim down CSS and your markup to achieve a minimal use of either, but I'm on the way! ;)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved