Web Design and Web Development Help

Once you’ve mastered the use of CSS, take your knowledge one step further by learning how to code sites using CSS shorthand. Not only will it neaten up your code, it will save you coding time and reduce the file size of your pages.

The different properties that can be shortened include: border, background, font, list-style, margin, and padding.

In each example below, I will give you the order that is recommended by the W3C. Most broswer’s don’t care about the order of the properties but there are a few instances where we have seen that order does matter.

Background

The “background” property is the shorthand property for (in this specific order) “background-color”, “background-image”, “background-repeat”, “background-attachment”, “background-position”. The long version looks like this:

body {

     background-color: #000;

     background-image: url (background.jpg);

     background-repeat: repeat;

     background-attachment: scroll;

     background-position: 0 0; 

}

Look how drastically that code can be reduced:

body { background: #000 url(background.jpg) repeat scroll 0 0; }

If you do not need a property stated such as background-image, simply omit it and it will be set as the initial value by default.

Initial values are:

  background-color: transparent

  background-image: none

  background-repeat: repeat

  background attachment: scroll

  background position: 0% 0% 

Remember horizontal position (x) is always listed before the vertical (y) position.

If you want to have a background image that scrolls that is positioned at the top left of the screen, all you’d need is:

body { background: url(background.jpg) 0 0; }

You do not need to set a color, or the background-repeat or the background attachment!

Border

“Border” is the shorthand property for “border-width”, “border-style”, “border-color”.
If you wanted all four borders on an element to be the same your long hand version of css would look like:

#footer { 

    border-width: 2px;

    border-style: solid;

    border-color: #000;

 }

CSS shorthand can reduce that code to

#footer { border: 2px solid #000; }

Color

Did you know it’s possible to shorten a 6 digit hex # down to three digits?
#000000 can be shortened to #000
#663399 can be shortened to #639; shortening is obtained by using every other number.

Font

The “font” property is the shorthand property for “font-style”, “font-variant”, “font-weight”, “font-size”, “line-height”, “font-family”.

The long hand version of styling an element might look like this:

p {

     font-style: italic;

     font-variant: small-caps;

     font-weight: bold;

     font-size: 12px;

     line-height: 1.2em;

     font-family: Arial, Verdana, sans-serif;

}

All of that can be shortened to:

p { font: italic small-caps bold 12px/1.2em; Arial, Verdana, sans-serif;}

If you do not need a property stated such as font-variant, simply omit it and it will be set as the initial value by default which in this case is normal. Quick note, you cannot omit font-style or font-size when defining font.

Other initial values are:

 Font-style: normal

    font-variant: normal

    font-weight: normal

    font-size: medium

    line-height: normal

    font-family: depends on user agent

List-Style

“List-style” is shorthand for these properties “list-style-type”, “list-style-position”, “list-style-image”.

ul {

    list-style-type: circle;

    list-style-position: inside:

    list-style-image: url (bullet.jpg);

}

CSS shorthand reduces this example to:

ul {list-style: circle inside url(bullet.jpg); }

Pages: 1 2