CSS

SHORTHAND

What are shorthand properties?

CSS properties are the aspect of the element that can be styled such as color, border, padding.
p { color: red; }
Property

Some CSS properties can be combined into shorthand properties.

p { list-style-type: disc; list-style-image: none; list-style-position: inside; } p { list-style: disc none inside; }

Shorthand properties are designed to make it easier for authors - to save writing multiple declarations.

Shorthand properties include: background, border, border-color, border-style, border-width, border-top, border-right, borderbottom, border-left, font, liststyle, margin, outline and padding

A note on the order of values

In many cases, shorthand properties are defining one or more sides of an element.

In these cases, they are defined using one, two, three or four values.

The order that values are specified for two, three and four values is critical!

One value means that all four sides will be styled the same way. (top/right/bottom/left)
p { margin: 1em; }

Two value are used to define: (top/bottom) (left/right)

p { margin: 1em 2em; }

Three value are used to define: (top) (left/right) (bottom)

p { margin: 1em 2em 3em; }

Four value are used to define: (top) (right) (bottom) (left)

p { margin: 1em 2em 3em 4em; }

One way to remember four values is to think clockwise starting at the top.

Another way to remember shorthand values is to use: TRouBLe top right bottom left

The shorthand properties

1. Margin

Margin using one shorthand value

p { margin-top: 1em; margin-right: 1em; margin-bottom: 1em; margin-left: 1em; } p { margin: 1em; }

Margin using two shorthand value (order critical)

p { margin-top: 1em; margin-right: 2em; margin-bottom: 1em; margin-left: 2em; } p { margin: 1em 2em; }

Margin using three shorthand value (order critical)

p { margin-top: 1em; margin-right: 2em; margin-bottom: 4em; margin-left: 2em; } p { margin: 1em 2em 4em; }

Margin using four shorthand value (order critical)

p { margin-top: 1em; margin-right: 2em; margin-bottom: 4em; margin-left: 3em; } p { margin: 1em 2em 4em 3em; }

2. Padding

Padding using one shorthand value

p { padding-top: 1em; padding-right: 1em; padding-bottom: 1em; padding-left: 1em; } p { padding: 1em; }

Padding using two shorthand value (order critical)

p { padding-top: 1em; padding-right: 2em; padding-bottom: 1em; padding-left: 2em; } p { padding: 1em 2em; }

Padding using three shorthand value (order critical)

p { padding-top: 1em; padding-right: 2em; padding-bottom: 4em; padding-left: 2em; } p { padding: 1em 2em 4em; }

Padding using four shorthand value (order critical)

p { padding-top: 1em; padding-right: 2em; padding-bottom: 4em; padding-left: 3em; } p { padding: 1em 2em 4em 3em; }

A note about borders

The default value for a property, when it hasnt been specified by authors is called the initial value.

The initial value of each property is defined in the CSS specification.

The initial values for the various border properties are:

p { border-width: medium; } p { border-style: none; } p { border-color: content-color; }

3. Border-color

Border-color using one shorthand value

p { border-top-color: #999; border-right-color: #999; border-bottom-color: #999; border-left-color: #999; } p { border-color: #999; }

Border-color using two shorthand value (order critical)

p { border-top-color: #999; border-right-color: #aaa; border-bottom-color: #999; border-left-color: #aaa; } p { border-color: #999 #aaa; }

Border-color using three shorthand value (order critical)

p { border-top-color: #999; border-right-color: #aaa; border-bottom-color: #000; border-left-color: #aaa; } p { border-color: #999 #aaa #000; }

Border-color using four shorthand value (order critical)

p { border-top-color: #999; border-right-color: #aaa; border-bottom-color: #000; border-left-color: #666; } p {border-color: #999 #aaa #000 #666;}

4. Border-width

Border-width using one shorthand value

p { border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; } p { border-width: 1px; }

Border-width using two shorthand value (order critical)

p { border-top-width: 1px; border-right-width: 2px; border-bottom-width: 1px; border-left-width: 2px; } p { border-width: 1px 2px; }

Border-width using three shorthand value (order critical)

p { border-top-width: 1px; border-right-width: 2px; border-bottom-width: 3px; border-left-width: 2px; } p { border-width: 1px 2px 3px; }

Border-width using four shorthand value (order critical)

p { border-top-width: 1px; border-right-width: 3px; border-bottom-width: 4px; border-left-width: 1px; } p { border-width: 1px 3px 4px 1px; }

5. Border-style

Border-style using one shorthand value

p { border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; } p { border-style: solid; }

Border-style using two shorthand value (order critical)

p { border-top-style: solid; border-right-style: dashed; border-bottom-style: solid; border-left-style: dashed; } p { border-style: solid dashed; }

Border-style using three shorthand value (order critical)

p { border-top-style: ridged; border-right-style: dashed; border-bottom-style: solid; border-left-style: dashed; } p { border-style: ridge dashed solid;}

Border-style using four shorthand value (order critical)

p { border-top-style: ridged; border-right-style: dashed; border-bottom-style: solid; border-left-style: inset; } p { border-style: ridge dashed solid inset; }

6. Border-top

Border-top combining three longhand properties (order is not critical)

p { border-top-width: 1px; border-top-style: solid; border-top-color: #000; } p { border-top: 1px solid #000; }

7. Border-right

Border-right combining three longhand properties (order is not critical)

p { border-right-width: 1px; border-right-style: solid; border-right-color: #000; } p { border-right: 1px solid #000; }

8. Border-bottom

Border-bottom combining three longhand properties (order is not critical)

p { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000; } p { border-bottom: 1px solid #000; }

9. Border-left

Border-left combining three longhand properties (order is not critical)

p { border-left-width: 1px; border-left-style: solid; border-left-color: #000; } p { border-left: 1px solid #000; }

10. Border

Border combining three longhand properties (order is not critical)

p { border-width: 1px; border-style: solid; border-color: #000; } p { border: 1px solid #000; }

11. Outline

The initial values for the various outline properties are:

p { outline-width: medium; } p { outline-style: none; } p { outline-color: invert; }

Unlike border, there are no outline-top, outline-right, outlinebottom or outline-left properties.

However, authors can use outline instead of outline-width, outline-style, outline-color.

Outline combining three longhand properties (order is not critical)

p { outline-width: 1px; outline-style: solid; outline-color: #000; } p { outline: 1px solid #000; }

Be aware that IE5, IE6 and even IE7 do not support outline.

12. Background

The initial values for the various background properties are:

p p p p p

{ { { { {

background-color: transparent; } background-image: none; } background-attachment: scroll; } background-repeat: repeat; } background-position: 0 0; }

The background shorthand property (order is not critical)

p { background-color: #f00; background-image: url(a.gif); background-repeat: repeat; background-attachment: fixed; background-position: 0 0;} p { background: #f00 url(a.gif) repeat fixed 0 0; }

13. Font

The initial values for the various font properties are:

p p p p p p

{ { { { { {

font-style: normal; } font-variant: normal; } font-weight: normal; } font-size: medium; } line-height: normal; } font-family: [up to user agent]; }

The font shorthand property (order critical)

p { font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 1em; line-height: 140%; font-family: times, serif; } p { font: italic small-caps bold 1em/140% times, serif; }

14. List-style

The initial values for the various list-style properties are:

p { list-style-type: disc; } p { list-style-image: none; } p { list-style-position: outside; }

The list-style shorthand property (order is not critical)

p { list-style-type: disc; list-style-image: none; list-style-position: inside; } p { list-style: disc none inside; }

A recap

/* margin values */ p { margin: 1em; } p { margin: 1em 2em; } - (top/bottom left/right) p { margin: 1em 2em 4em; } - (top left/right bottom) p { margin: 1em 2em 4em 3em; } - (top right bottom left) /* padding values */ p { padding: 1em; } p { padding: 1em 2em; } - (top/bottom left/right) p { padding: 1em 2em 4em; } - (top left/right bottom) p { padding: 1em 2em 4em 3em; } - (top right bottom left) /* border-color values */ p { border-color: #999; } p { border-color: #999 #aaa; } - (top/bottom left/right) p { border-color: #999 #aaa #000; } - (top left/right bottom) p { border-color: #999 #aaa #000 #666; } - (top right bottom left) /* border-width values */ p { border-width: 1px; } p { border-width: 1px 2px; } - (top/bottom left/right) p { border-width: 1px 2px 3px; } - (top left/right bottom) p { border-width: 1px 3px 4px 1px; } - (top right bottom left)

/* border-style values */ p { border-style: solid; } p { border-style: solid dashed; } - (top/bottom left/right) p { border-style: ridge dashed solid; } - (top left/right bottom) p { border-style: ridge dashed solid inset; } - (top right bottom left) /* border values - order of values not critical */ p { border-top: 1px solid #000; } p { border-right: 1px solid #000; } p { border-bottom: 1px solid #000; } p { border-left: 1px solid #000; } p { border: 1px solid #000; } /* outline values - order of values not critical */ p { outline: 1px solid #000; } /* background values - order of values not critical */ p { background: #f00 url(a.gif) repeat fixed 0 0; } /* font values - order of values critical!! */ p { font: italic small-caps bold 1em/140% times, serif; } /* list-style values */ p { list-style: disc none inside; } - order not critical

Russ Weakley
Max Design
Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley