Home » CSS » Best CSS .Classes for CSS Toolbox

by 11 comments

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


Comments Welcome

Information is freedom. Freedom is non-negotiable. So please feel free to modify, copy, republish, sell, or use anything on this site in any way at any time ;)

My Online Tools

Popular Articles
Hacking and Hackers

The use of "hacker" to mean "security breaker" is a confusion on the part of the mass media. We hackers refuse to recognize that meaning, and continue using the word to mean someone who loves to program, someone who enjoys playful cleverness, or the combination of the two.
-- Richard M. Stallman

It's very simple - you read the protocol and write the code. -Bill Joy

Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License, just credit with a link.
This site is not supported or endorsed by The Apache Software Foundation (ASF). All software and documentation produced by The ASF is licensed. "Apache" is a trademark of The ASF. NCSA HTTPd.
UNIX ® is a registered Trademark of The Open Group. POSIX ® is a registered Trademark of The IEEE.

+Askapache | |

Site Map | Contact Webmaster | License and Disclaimer | Terms of Service | @Htaccess

↑ TOPMain