CSS Shorthand – A Guide to Cleaner and Faster Coding

19

by Shane Jeffers

csshorthand

A Guide to Cleaner and Faster Coding

As a web developer I am always looking for ways to speed up my workflow. One of the simplest ways to speed up and clean up your coding is to learn CSS Shorthand. In order to fully grasp shorthand, it is helpful to already have a decent knowledge of CSS. I have put together a simple guide to bring you into the world of CSS Shorthand.

CSS Syntax – The Basics

The basic CSS syntax contains a minimum of three parts, a selector, a property and a value

/* Basic Syntax */

selector { property: value }

/* Actual Example */

p { color: #444444; }

Background Property – The Long Way

There are five properties for the background property, but coding all these out separately is a waste of time and space.

#example {
      background-color: #cccccc;      
      background-image: url(logo.png);
      background-repeat: no-repeat;
      background-position: 10px 10px;
      background-attachment: scroll;
}

Background Property – The Short Way

Combining the five properties into one declaration will speed up your code and it will take up less space in your stylesheet.

#example { background: #ccc url(logo.png) no-repeat 0px 0px fixed; }

Border Property – The Long Way

There are three properties for the border property which consist of the width of the border, the style and the color.

#example {
      border-width: 2px;
      border-style: solid;
      border-color: #333;
}

Border Property – The Short Way

Combining these three attributes is one of the easiest to remember in my opinion, and since I use a lot of borders it saves me a lot of valuable time.

#example {
      border: 1px solid #333;
}

Margin and Padding – The Long Way

Margin and padding have four possible properties each.

/* Margin Example */

#example {
      margin-top: 5px;
      margin-right: 10px;
      margin-bottom: 10px;
      margin-left: 5px
}

/* Padding Example */

#example {
      padding-top: 5px;
      padding-right: 10px;
      padding-bottom: 10px;
      padding-left: 5px
}

Margin and Padding – The Short Way

It is easy to use shorthand for margin and padding. All you have to remember is think clockwise just like a clock. Start with top, then the right, then the bottom, and lastly the left.

/* Margin Example */

#example {
      margin: 5px 10px 10px 5px;
}

/* Padding Example */

#example {
      padding: 5px 10px 10px 5px;
}

There is another way that padding and margin can be written and that is with just two values, the first value being top and bottom, and the second value being left and right.

/* Margin Example */

#example {
      margin: 20px 0px;
}

/* Padding Example */

#example {
      padding: 10px 20px;
}

Colors in General

Throughout this tutorial I have been been short handing the color property (I wonder if you noticed) and here is the correct syntax for that. Any color values such as #333333 (dark gray), can be abbreviated to #333, because all of the values are the same. If a value reads something like #2bb7da it cannot be abbreviated. Of course this is not a huge deal but when dealing with a big project every second counts.

/* Long Example */

color: #333333


/* Short Example */

color: #333;

That’s All Folks

Hopefully this guide has been helpful to you and will continue to be helpful in the future. I will be sure to update this article as technology changes and CSS3 ushers it’s way into the foreground! By the way subscribe, retweet, digg, stumble, or bump if you enjoyed this guide!

Written by Shane Jeffers

Shane Jeffers is the Creator and Author of Three Styles. I have a unique passion for design trends and tutorials. Follow me on twitter @ThreeStyles

Enjoy this post? Subscribe by RSS or Email

CSS, Tutorials

  • http://www.centrodemando.es Gabriel

    Nice tricks!

    Do you know more of this kinde of “shortcuts” ?

    Thanks

  • http://www.themaskedcrusader.com Topher Donovan.

    Color shorthand has a little more to it. The Color attribute hex is formatted #RRGGBB. where RR is the red code, GG is the green code and BB is the blue code. If all pairs of digits are the same (ie. #334455) It can be shorted in the format #RGB. So, they don’t have to be the same all the way across…. just in pairs.

    #000088 can be shortened to #008, as #AA77DD can be shortenened to #A7D

    BUT all pairs of digits must be the same. If there is even one one pair that isn’t the same, then it cannot be shortened.

    $000093 can NOT be shortened to #0093, but must stay the way it is

  • jaredmellentine

    Great beginner tutorial, just a couple things…

    “Start with top, then the right, then the bottom, and lastly the top.” Should say “lastly the left”.

    Margin and padding can be written several other ways:

    // equivalent to margin: 10px 10px 10px 10px;
    margin: 10px;

    // equivalent to margin: 10px 5px 10px 5px;
    margin: 10px 5px;

    //equivalent to margin: 10px 5px 15px 5px;
    margin: 10px 5px 15px;

  • http://www.plainshanedesign.com Shane Jeffers

    @topher

    I appreciate the clarification I added color in at the last minute and just didn’t go as deep as I would have liked. I will update the post with these techniques very soon. Thanks for visiting!

  • Nick

    How about shorthand for the font property? That one is picky about the order but can save a lot of bytes.

  • Pingback: links for 2009-09-29

  • http://www.interviewjava.com/ IQJava

    Excellent…

  • http://piotrkulpinski.com Piotr Kulpinski

    Hi. Great article! Thanks for sharing.

    ps. please change this main font on the blog couse i can’t read it. Letters are so indistinct. Pls do something with it ;)

  • http:/tutorial-city.net/ Tutorial City

    FONT
    Short Way

    #example{font-weight font-style font-variant font-size/line-height font-family}

    or real life values

    #example{bold italic small-caps 12px/1.5 georgia,”times new roman”,serif}

  • http://genuinepromotions.blogspot.com sujith

    Great tips, thank you. Please provide more and more contents on this css tutorial

  • Pingback: Favorites from the Feeds #06

  • Ksanford

    Great tips, keep up the great work.

  • http://www.designingstudios.com Designing Studios

    Nice one… thanks this is also called as shorthand css

  • Pingback: CSS Shorthand – A Guide to Cleaner and Faster Coding « Choose Digital Media

  • http://www.fiveminuteargument.com/ Five Minute Argument

    Useful info. for beginners. One quick note: you introduce the shortening of the color property within your discussion of background, before you’ve explained the color property. That could be confusing.
    .-= Five Minute Argument´s last blog ..BBC self-deprecation? =-.

  • http://blog.sienkiewicz.eu siena

    Great tutorial.

  • GilbertoGil

    Muchas gracias por este tutorial, me fue de mucha ayuda.

    Thks for this tutorial is was very helpful

    =)

  • http://www.letm.li eigene homepage erstellen

    I studied the css tutorial and I really learned a lot. I think my next homepage will be a lot better than my first one.

  • http://www.ozdtasarim.com firerox

    very good and useful article for the beginners.
    .-= firerox´s last blog ..10+ Yepyeni İkon Setleri =-.