Tutorials

CSS Shorthand

What is CSS Shorthand?

Shorthand in CSS is a great way of making your CSS files 'super-skinny'. Think of it like the Spice Girls, Normal CSS is Ginger Spice but you are aiming for Posh Spice code. CSS allows for some style declarations to be written in a shorter way. For example;

.box {
border-width: 5px;
border-style: solid;
border-color: grey;
}

can be written as;

.box {border: 5px solid grey;}

This, of course, is a couple of kb less in code. That may not sound all that much (and it isn't) but start to add that up over a large and complex stylesheet and all of a sudden it means quite a lot of kb saved. I could do with brushing up on my CSS shorthand as I started out learning with an older copy of Dreamweaver which has some, but not full, shorthand support. Now I am weened off 'Design View' I need to start condensing my code with CSS shorthand. I have been doing some research and will explain what I have found.

One style applied to multiple tags

OK, first up is the shorthand method of applying the same style to multiple tags. Imagine that you want some of your header tags to use a bold font. The non-shorthand way to do this is to write each tag separately;

h1 {font-weight: bold;}
h2 {font-weight: bold;}
h3 {font-weight: bold;}
h4 {font-weight: bold;}

however, if you want a sleeker version using shorthand then you can write all the tags on one line, separate them with a comma and declare the style just once.

h1, h2, h3, h4 {font-weight: bold;}

If you then want to apply further styles to your tags you can do this in the same way. Maybe you want your h1 and h2 headers to be 14px text size and your h3 and h4 headers to be 12px text size. You would write it in shorthand like this;

h1, h2, h3, h4 {font-weight: bold;}
h1, h2 {font-size: 14px;}
h3, h4 {font-size: 12px;}

Margins, Padding and Borders

The elements that make up the CSS Box Model can be written as shorthand as well. For instance, you may have margins declared like this;

.box {margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px;}

This can be written in CSS shorthand like this;

.box {margin: 5px 10px 5px 10px;}

Hopefully you will have noticed that the style declarations always start at the top of the box and work their way around clockwise as shown here;

Image showing the CSS box model and style declerations going clockwise

You may want to shorten this even further to;

.box {margin: 5px 10px;}

This will tell the browser that the top and bottom margins will be 5px and the left and right margins will be 10px. You can apply these shorthands to padding as well as margins and it will work in exactly the same way.

There is one more trick whch you might use with borders. A set of border styles may look something like this;

.box {
border-width: 5px;
border-style: solid;
border-color: grey;
}

Whereas it can actually be written with the shorthand;

.box {border: 5px solid grey;}

Shorthand Colour Values

The two most efficient ways to specify a colour in CSS are by using hexidecimal (hex) values or by using named colours. Hexidecimal values are made up of six digits from 00 through to ff. Hexidecimal uses 16 digits and these are 0-9 and a-f. These tell the browser where on the RGB colour scale the defined colour is so that it can display it. If you think about the colour scale with hexidecimal values then black is #000000 and white is #ffffff Any other colour lies in between these two extremes. Hexidecimal values can be shortened if there are pairs of numbers/letters within it. For example black has three pairs of zeros in the value so can actually be written as #000 and this will work just the same.

Here is an example of using this shortened hex value method;

.box {color: #f00;}

The second way is to name a colour. For example; grey, red, purple, blue and so on. Below is a table of examples of colours where this applies and their corresponding 6 digit hex values.

Black #000000
Aqua #00ffff
Blue #0000ff
Fuchsia #ff00ff
Grey #808080
Green #008000
Lime #00ff00
Maroon #800000
Navy #000080
Olive #808000
Purple #800080
Red #ff0000
Silver #c0c0c0
Teal #008080
Orange #ff6600
Yellow #ffff00
White #ffffff

Bear in mind that it is only shorthand to use the names of colours if they are shorter than the available hex value. So only red, silver, grey, maroon, purple, olive, navy, and teal are truly CSS shorthand.

Backgrounds

Background CSS can often look something like this;

.box {
background-color: #f00;
background-image: url('boximage.jpg');
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll;
}

These CSS styles can be shortened to this;

.box {background: #f00 url('boximage.jpg') no-repeat top center scroll;}

Fonts

Much like the background styles, fonts can often end up having bloated CSS styles. For example;

.box {
font-weight: bold;
font-style: italic;
font-size: 12px;
line-height: 20px;
font-family: Verdana, Arial, Sans-serif;
}

Here you can use another CSS shorthand;

.box {font: bold italic 12px/20px Verdana, Arial, Sans-serif;}

You will notice that in the shorthand declaration the font size and line height are split with a ' / '. Don't forget to add this in or you'll be wondering why it isn't working!

Lists

List tags can also benefit from shorthand property declarations. The list tags are ul (unordered list) and ol (ordered list). Here is an example of some none shorthand list styles;

ul {
list-style-type: circle;
list-style-position: inside;
list-style-image: url(listimage.gif);
}

The styles can be declared in CSS shorthand as;

ul {list-style: circle inside url(listimage.gif);}

If you don't want to use a list image then don't declare it as the browser default is to be set to none.

What you are NOT declaring!

Be aware that, by using CSS shorthand, in some cases you are not declaring styles for elements which have some browser defaults already. This can be particularly 'buggy' in older browsers so make sure you check your CSS shorthand designs across a range of browsers and pay particular attention to the older versions of Internet Explorer. If you want to zero all default margins and padding you can start with the following declaration;

* {margin: 0; padding: 0;}

I hope that this is a good start for you to learn CSS shorthand and to begin to trim the fat from your CSS code. Remember that 'light-weight' code is the 'Holy Grail' and that includes your stylesheets.

Advertisements If you would like to advertise on Corrosive Online then get in touch through my Contact Page for details.
Join The Mailing List
    If you have found anything on this site useful or entertaining or you have enjoyed one of my Online Web Design Lessons then I would love you to make a donation. Use the Paypal button below to make a donation.