CSS Shorthands

Using CSS Shorthand is great for reducing the lines of code and preventing typing lots of duplicate lines of code.

Margin and Padding

You may currently be setting your margin/padding something along the lines of:

.myClass {
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 10px;

Shorthand allows you to shrink these four lines down to just one. Think of the margin as four values in clockwise order Top, Right, Bottom, Left.

.myClass { margin: 10px 10px 10px 10px; }

Taking this one step further can again shrink this down even more depending on the margin values. Group specific items together, such as Top / Bottom and Right / Left.

.myClass { margin: 10px 15px 20px; }

This can be displayed using just two values because both the top & bottom and right & left values are the same.

.myClass { margin: 10px 15px; }

When in a situation where the top & bottom values are the same but the right & left values are different, you still will have to display all four values as you cannot group the top and bottom values together because the left value would be read as if it was the bottom value. We can still use shorthand to display the css on one line.

.myClass { margin: 10px 15px 10px 20px; }


Background's are also a popular property that you are likely to assign at least once on each of your stylesheets.

.myBackgroundClass {
background-color: #fff;
background-image: url(image.png);
background-repeat: no-repeat;
background-position: top left;

Again using shorthand you can combine all of these values into one using the background property.

color (#fff)
url (url(image.png))
position (top left)
repeat / no-repeat / repeat-x / repeat-y

.myBackgroundClass { background: #fff url(image.png) top left no-repeat; }

If a value is left out it will be rendered with the default, so if you don't assign a background position then it will default to top left.


There is a shorthand method to save you writing lines and lines of the same code.

.myFontClass {
font-size: 1em;
line-height: 1.2em;
font-weight: bold;
font-style: normal;
font-family: Arial;

You can take the five lines above and make them into just one using shorthand. The main thing to note is that you must declare both the font-size and the font-family or the whole thing will be ignored.

.myFontClass { font: 1em/1.2em bold normal Arial; }

List Styles

Lists are another property that can be shrunk down using shorthand.

.myListClass {
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.png)

These three lines can be made into one simple line by defining the type, position and image source under the property list-style.

.myListClass { list-style: disc outside url(image.jpg); }


Border’s can be defined in several ways, if you are currently defining a width, color and style on seperate lines in your stylesheet then you can quickly edit this into one nice clean line of code.

.myBorderClass {
border-width: 5px;
border-color: #000;
border-style: solid;

These three lines can be made into one simple line by defining the width, type and color.

.myBorderClass { border: 5px solid #000; }

You can define several sides of the element with different values as well.

.myBorderClass { border: 5px solid #000; }

You can define several sides of the element with different values as well.

.myBorderClass {
border: 1px solid #000;
border-width: 5px 10px 5px 10px;
border-color: #000;

CSS Shorthand does make sense when thinking you can cut down the number of lines you have to code, as well as making your CSS Stylesheet smaller in size.