Well, almost.

CSS is great, no doubt about it. But when it comes to using it, things can soon get messy. With a class here, an ID over there and a helping of multiple declarations, the whole thing can soon snowball into a mass of margin zeros, float left’s and goodness knows what else.

So, with some low-fat ingredients and a sprinkle of ambition, let’s get to work.

One declaration

Pretty much all properties with dimension values can be declared in one swoop. Say you want a margin 10px at the top and 5px on the right. You could use

margin-top: 10px
margin-right: 5px;

This is all good. But let’s cut it down a bit.

margin: 10px 5px 0px 0px;

Here we’ve set the margin values for top, right, bottom and left respectively. This technique will also work for properties such as padding and border-width. An even shorter method is

margin: 10px 5px;

This is ideal for setting the top/bottom margin and the right/left margin respectively. (With this declaration, the top and bottom margins are both 10px and the right and left margins are both 5px.)

Drop the px

Following on from above, if you need to declare a property zero, do exactly that! margin: 0 will have the same results as margin: 0em, margin 0px, margin: 0%, you get the idea. No need for a dimension, just use the zero.

One declaration Part II

Another great use of one declaration is for properties such as font, border and background. Each property has various ‘sub-properties’ (font-size, font-family, background-image, border-width and so forth), but most of them can all be declared on one line of CSS.

For example

background-color: #ffffff;
background-image: url(‘path/to/image.jpg’);
background-position: top left;
background-repeat: none;


Now let’s slice that up a bit.

background: #ffffff url(‘path/to/image.jpg’) no-repeat top left;


Mmmm. Isn’t that nice? All we’ve done is bundled all the values into the property ‘background.’ And you don’t have to declare them all. Whatever you leave out, the default will be inherited. Those being; colour is transparent, image is repeated and position is center. For vertical repeats, use repeat-y, and for horizontal, repeat-x.*

And for fonts;

font: italic small-caps bold 12px Arial


will do exactly what you think; an italic, small-caps, bold font in 12px Arial.

And for borders;

border: 1px solid #000000;


will set the width, style and colour respectively. A style is required. Other values will inherit defaults.

Use inheritance

If you have a page, with certain elements that need to differ from others, set an array of default values to begin with, then add their own unique styles later on. Instead of;

#content h1 {
font: 12px Arial;
color: #000000;
}
#content p {
font: italic 10px Arial;
color: #000000
}
#column h1 {
font: 14px Arial #cecece;
color: #000000
}

we can apply a font family, size and colour to the body selector, then override any changes we need.

So the above becomes;

body {
font: 12px Arial;
color: #000000;
}
#content p {
font-size: 10px;
font-style: italic;


}
#column h1 {
color: #cecece;
font-size: 14px;
}

As such, any element contained within the body will ‘inherit’ its styles. This applies for any ‘child’ element contained within its ‘parent’ element. Read more about the inheritance rule

Finally, group similar properties

This is ideal if you have a group of selectors, all with different properties perhaps except one or two. So why not share it?

.box1 {
position: absolute;
top: 5px;
right: 9px;
}
box2 {
position: absolute;
top: 21px;
left: 91px;
}...

Now let’s say you’ve got seven or more of these ‘boxes’? It gets a little hefty. But they all share their position attribute. Enter;

.box1, .box2, .box3, .box4, .box5, .box6, .box7 {
position: absolute;
}

Tada! Now all boxes have the position: absolute property and you can continue to simply assign their position values.

Phew! Well, I hope that some of this will come in use there and now. It’s my first article, so go easy!

*NOTE: I have read that declaring the background position before the repeat can cause some issues with older browsers. However, I cannot remember the source so this statement could be complete poppycock.

Categorised under: Tips & Tutorials by Alex S