CSS Classes Toolbox .classAs a Professional Web Developer and Designer, CSS is by far one of the most useful tools I use. Moving from one web site to the next is made easier by having a CSS Toolbox containing some default CSS Classes that you use over and over again. Here are 10 of my favorite CSS Classes.

What are Your favorite CSS Classes? Please share your tips!

Universal CSS .Classes

Most of these are what I like to think of as “actionable” classes, IOW, they aren’t just color classes or font-size classes.

  1. .S {display:block; visibility:visible;} - Shows the element.
  2. .H {display:none; visibility:hidden;} - Hides the element.
  3. .VV {visibility:visible;} - Makes the element visible.
  4. .VH {visibility:hidden;} - Hides an element but still takes up space, not fullly hidden like .H
  5. .FR {float:right;} - Floats the element to the right.
  6. .FL {float:left;} - Floats the element to the left.
  7. .DI {display:inline;} - Changes the display type to “inline”.
  8. .DB {display:block;} - Makes the element a block-level element.
  9. .C {clear:both; padding:0; margin:0; line-height:2em; font-size:10px; border-bottom:1px solid #FFF;} - Clears floated elements.
  10. .CENT {margin:0 auto;} - Makes block element centred.

Please note that these classes are meant only to show what can be done with CSS, I wrote this post for CSS guru’s and up and coming gurus. Sometimes I assume everyone reading my blog know as much as I do about what I’m writing about, so I skip almost all explanation and skip to the code. Basically stick to the W3C’s recommendations and try not to use classes inline unless its for something specific. Most of these classes are very useful for use in javascript as well using the element.className='S' method.

Universal CSS Classes Example

<br class="C" /> - clears any block level element.
<hr class="C VH" /> - Its still a block-level element, so it correctly clears floated elements and is a semantic page separator.
<img class="FR" src="/1.gif" alt="" /> - this image will float to the right.
<p class="CENT"> - the p is centred (if width isn't 100%;).

Think you are such a CSS/semantics guru that using classes is below you? Ridiculous! Classes are extremely helpful when used properly and not in excess. Surely you don’t think you know more than Eric Meyer or the W3C… please view their source code, and try to loosen up while your at it ;)

Related Articles