Add css styles to your posts faster and more accurately.

If you are like most bloggers you like to spruce up your articles with custom css styles. You can add classes to your css file for things like pull quotes, block quotes, images paragraphs and a lot more.

Here's a quick and easy tip to make adding css style to your posts faster and more accurate.

Most of us create specific use css classes, because we are designing classes for specific purposes. But this can lead to having a lot of classes that are rarely used and that repeat certain style elements over and over.

Consider that you might have classes for left, right and centered pull quotes with multiple copies of each for different widths, background colors and borders. Then you have left, right and centered images and even multiple copies of each of these for with and without borders and padding.

Here is an example of just three different width pull quote classes floated either left or right. Adding more variations means multiplying these classes and re repeating that many more times.

  1. .left-30-blue-pullquote {
  2.   float: left;
  3.   width: 30%;
  4.   border: 1px solid #000;
  5.   background-color: #00f;
  6. }
  7.  
  8. .left-40-blue-pullquote {
  9.   float: left;
  10.   width: 40%;
  11.   border: 1px solid #000;
  12.   background-color: #00f;
  13. }
  14.  
  15. .left-50-blue-pullquote {
  16.   float: left;
  17.   width: 50%;
  18.   border: 1px solid #000;
  19.   background-color: #00f;
  20. }
  21.  
  22. .left-30-blue-pullquote {
  23.   float: right;
  24.   width: 30%;
  25.   border: 1px solid #000;
  26.   background-color: #00f;
  27. }
  28.  
  29. .left-40-blue-pullquote {
  30.   float: right;
  31.   width: 40%;
  32.   border: 1px solid #000;
  33.   background-color: #00f;
  34. }
  35.  
  36. .right-50-blue-pullquote {
  37.   float: right;
  38.   width: 50%;
  39.   border: 1px solid #000;
  40.   background-color: #00f;
  41. }  

After a while it can be hard to remember the many different names of these different classes, and depending on the cache settings of your site and the readers browser, all of this duplicated class information can be loaded by the browser every time a page loads, burning up bandwidth and taking longer to render the page.

In stead of doing it the normal way, try creating modular style classes. Have a left, right and center class, each of which simply instructs the browser how to float (or not float) the element it is applied to. Also include a couple of width classes with just a single width instruction in each and nothing more.

Consider this modular approach to the same classes as the above example.

  1. .left {float: left;}
  2. .right {float: right;}
  3. .w30 {width: 30%;}
  4. .w40 {width: 40%;}
  5. .w50 {width: 50%;}
  6. .border1 {border: 1px solid #000;}
  7. .blue-back {background-color: #00f;}
  8. .green-back {background-color: #0f0;}

By doing this you can include these classes combined together on various elements and instead of have things like class="left-40-blue-pullquote" and class="right-30-black-pullquote" you can have class="left w40 blue-back quote" class="right gray-back border image"

As you can see from these short examples, you are creating classes that can be reused with different types of elements, and have short meaningful names. You don't have to remember what order you put things in either, because each is a self contained class, and all classes will be applied no matter what order you list them in.

Much simpler to remember and much easier and faster to use.

What do you do to make your css easier and faster? What quick shortcuts do you use to help make posting your articles and styling them simpler and better?

Trackback URL for this post:

http://danemorgan.com/trackback/165
None
Login or register to tag items
 
Submitted by Dane Morgan on Sun, 08/17/2008 - 22:13.
Posted In
Tagged With
Like this?
Bookmark & Share:
StumbleUpon Submit to Mixx Save to Google Bookmarks Save to del.icio.us
Click, Copy and Link:
<a href="http://danemorgan.com/blog/design/add-css-styles-your-posts-faster-and-more-accurately">Add css styles to your posts faster and more accurately.</a>

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Great CSS Tips

Dane,

I have to tell you, I missed this sort of tips. I was just actually looking the other day for a way to implement pull qoutes on one of my blogs.

Thanks for the review on SU.

Vlad (not verified) | Thu, 08/21/2008 - 11:45

Hey, Vlad

Glad you liked it man. I'll try to get a nice steady flow of them going here soon. ;)

Dane Morgan | Fri, 08/22/2008 - 22:48

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • Restrict text by wrapping in [restrict:roles=<comma separated roles>] and [/restrict]

  • Links to specified hosts will have a rel="nofollow" added to them.

  • Highlight terms in this textarea.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. Beside the tag style "<foo>" it is also possible to use "[foo]".
  • Use <fn>...</fn> to insert automatically numbered footnotes.
  • You may link to webpages through the weblinks registry

More information about formatting options

CAPTCHA
Please fill out this captcha to demonstrate your humanity.
1 + 0 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
Niche Marketing / Blog / Design / Add css styles to your posts faster and more accurately.