Click here to Skip to main content
15,867,330 members
Articles / Web Development / HTML
Article

CSS shorthand properties

Rate me:
Please Sign up or sign in to vote.
4.36/5 (12 votes)
8 Dec 20042 min read 53.4K   17   4
By using CSS shorthand properties you can reduce the size of your CSS document even more.

Introduction

One of the main advantages of using CSS is the large reduction in web page download time. To style text, you used to have to use the <font> tag over and over again. You probably also laid out your site with tables, nested tables and spacer gifs. Now all that presentational information can be placed in one CSS document, with each command listed just once.

But why stop there? By using CSS shorthand properties you can reduce the size of your CSS document even more.

Font

Use:

CSS
font: 1em/1.5em bold italic serif

...instead of

CSS
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

This CSS shorthand property will only work if you're specifying both the font-size and the font-family - omit either and the CSS rule will be completely ignored. Also, if you don't specify the font-weight, font-style, or font-varient then these values will automatically default to a value of normal, so do bear this in mind too.

Background

Use:

CSS
background: #fff url(image.gif) no-repeat top left

...instead of

CSS
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Omit any of these commands from the background CSS shorthand property, and the browser will use the default values. If you leave out the background-position command then any background image will be place in the top-left of the container and then repeated both horizontally and vertically.

Lists

Use:

CSS
list-style: disc outside url(image.gif)

...instead of

CSS
list-style: #fff;

list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)

Leave out any of these CSS commands from the shorthand rule, and the browser will use the default values for each, namely disc, outside and none (i.e. no images) respectively.

Margin & padding

There are a number of different CSS shorthand commands for margin and padding, depending on how many of the sides of the containing element have the same margin or padding values:

Four different values

Use:

CSS
margin: 2px 1px 3px 4px (top, right, bottom, left)

...instead of

CSS
margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px

Three different values

Use:

CSS
margin: 5em 1em 3em (top, right and left, bottom)

...instead of

CSS
margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em

Two different values

Use:

CSS
margin: 5% 1% (top and bottom, right and left)

...instead of

CSS
margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%

One different value

Use:

CSS
margin: 0 (top, bottom, right and left)

...instead of

CSS
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0

The above rules also apply to padding and border (see below for more on border).

Border

Use:

CSS
border: 1px black solid

...instead of

CSS
border-width: 1px;
border-color: black;
border-style: solid

Use:

CSS
border-right: 1px black solid

...instead of

CSS
border-right-width: 1px;
border-right-color: black;
border-right-style: solid

(You can substitute right with top, bottom or left.)

The above CSS shorthand rules can be conveniently combined with the shorthand rules used by margin and padding as shown below.

 

The borders on this box can be achieved with the following CSS command:

CSS
border: 8px solid #336;
border-left: 10px solid #ccf;
border-top: 10px solid #ccf

You can achieve exactly the same effect by using:

CSS
border: 8px solid #336;
border-width: 10px 8px 8px 10px
border-color: #ccf #336 #336 #ccf

Conclusion

CSS shorthand properties are great! They're a great way to reduce the amount of code contained in a CSS document, allowing for faster download times and easier editing. Now who can argue with that?

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United Kingdom United Kingdom
Trenton Moss is crazy about usability and accessibility - so crazy that he founded Webcredible, an industry leading user experience consultancy, to help make the Internet a better place for everyone. He's very good at information architecture and interaction design.

Comments and Discussions

 
GeneralGood to reduce!!! Pin
asadullah ansari25-May-10 16:08
asadullah ansari25-May-10 16:08 
Generalhello Pin
sandipbumca28-Feb-08 3:24
sandipbumca28-Feb-08 3:24 
GeneralCSS Question Pin
kakaitvn26-Aug-07 19:56
kakaitvn26-Aug-07 19:56 
QuestionCSS version? Pin
BloodBaz15-Dec-04 4:10
BloodBaz15-Dec-04 4:10 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.