How do I write my css classes with div tags?

Posted July 19, 2005

Rothe Blog CSS Logo I am constantly looking for css shorthands when it comes to writing my stylesheets. I tend to try to plan to make my stylesheets formatted with the best logical sense, portability across a site, and in a condensed, concise manner. Because I layout my website in CSS, doesn’t mean I design them any less complex, and that is why I believe that my style sheets push the range of 10-12 kb. The ideal size would actually be somewhere between 7-8 kb. With that in mind, that is why I like techniques like this all the more.

I read about this before, but didn’t really grasp it. To review, the Margin property. There is;

margin-top
margin-right
margin-bottom
margin-left

Instead of writing out each of these margin properties individually, we can give them a shorthand like so;

margin: 10px 0 0 0;

Notice, I don’t give 0 a measurement because 0 is still 0 no matter what measurement you use. A little shorthand trick. But, each of those measurements
listed goes in the following order; margin: (top) (right) (bottom) (left)

Let’s make our Margin shorthand even smaller.

To rewrite our example above;

margin: 10px 0 0 0;

I can actually condense the (left) and (right) margin because they are the same measurement. Our margin property would now look like this;

margin: 10px 0 0;

What the directly above example says is, margin-top = 10px, margin-left and margin-right = 0, and margin-bottom = 0. That is the order. This shorthand is specifically for instances when you have a different margin-top and margin-bottom property.