Useful CSS Classes For The Masses

Published by: Christopher Hennis
October 31, 2008

I’ve put together a list of useful CSS classes I find myself using on a regular basis, and a few of these are actually required by the Wordpress gang if you’re going to submit a free Wordpress template to them.

.alignleft { float:left }
.alignright { float:right }
.aligncenter { margin-left:auto; margin-right:auto; display:block } 
.clear { clear:both }
.float-left { float:left }
.float-right { float:right }
.text-left { text-align:left }
.text-right { text-align:right }
.text-center { text-align:center }
.text-justify { text-align:justify }
.bold { font-weight:bold }
.italic { font-style:italic }
.underline { border-bottom:1px solid }
.highlight { background:#ffc }
.img-left { float:left;margin:4px 10px 4px 0 }
.img-right { float:right;margin:4px 0 4px 10px }
.nopadding { padding:0 }
.noindent { margin-left:0; padding-left:0 }
.nobullet { list-style:none; list-style-image:none }

alignleft, alignright, aligncenter – This should be pretty self explanatory, as I guess all of these classes should be, but this class is useful for aligning certain objects using the float property.
clear – Using the float property can often times lead to unpredicted results, such as an element floating to the side of another when it isn’t meant to. Using this class will prevent this.
float-left, float-right – Same as alignleft and alignright, but I often times will switch up the names when writing a stylesheet. Note: alignleft, alignright, and aligncenter are required by the Wordpress team if you plan to submit a theme to them.
text-left, text-right, text-center – Aligns your text accordingly.
text-justify – Note: The actual justification algorithm used is user-agent and written language dependent. Conforming user agents may interpret the value ‘justify’ as ‘left’ or ‘right’, depending on whether the element’s default writing direction is left-to-right or right-to-left, respectively.
bold, italic, underline – Used with text, makes it bold, italic, or underlines it, respectively.
highlight – Used to highlight specific text. Good idea when you want certain keywords to stand out from the content of the page.
img-left, img-right – Floats the respective image either to the left or right with a bit of padding. The order in which the padding is specified is: top, right, bottom, and finally left. We use the actual margin attribute to provide the ‘padding’, but the same is true regarding the order in which the margin attribute is executed.
nopadding – Removes all padding from our object.
noindent – Removes the text-indent from our object. Useful when wanting to jump back and forth from using indentation and not in a webpage.
nobullet – Removes any bullets from appearing in our CSS lists.

3 Comments

Dgold says:

November 27, 2008 at 11:03 pm

Thanks for this. Looks useful. Here is another really great page I found with similar suggestions for classes to add to any theme. Actually this other post is what got me started on a Google search that led me here to jungle jar eventually. Thanks again, and check out Matt’s classes,
http://www.mattvarone.com/web-design/message-box-with-css/

Reply
admin says:

December 3, 2008 at 9:14 am

Thank you for your contribution, and I can guarantee you that the above classes are useful. I find myself using just the ‘clear’ class at least twice a day.

Thanks again.

Reply

Useful CSS Classes For The Masses

Related Posts

Posted In

Last Modified

3 Comments

Leave a Reply