CSS Shorthands
Colors
One great shortcut that many don’t know about is that when a colour consists of three pairs of hexadecimal digits, you can omit one digit from each pair:
#000000 becomes #000.
#336699 becomes #369.
Box dimensions
The properties that affect box dimensions share the same syntax: the shorthand property followed by one to four space separated values:
- property:value1;
- property:value1 value2;
- property:value1 value2 value3;
- property:value1 value2 value3 value4;
Which sides of the box the values affect depends on how many values you specify. Here’s how it works:
- One value: all sides
- Two values: top and bottom, right and left
- Three values: top, right and left, bottom
- Four values: top, right, bottom, left
«: Thinking of the face of a clock is an easy way of remembering which side each value affects. Start at 12 o’clock (top), then 3 (right), 6 (bottom), and 9 (left). You can also think of the TRouBLe you’ll be in if you don’t remember the correct order
Margin and padding
- 1. margin-top:1em;
- 2. margin-right:0;
- 3. margin-bottom:2em;
- 4. margin-left:0.5em;
- margin:1em 0 2em 0.5em; /* top — right — bottom — left */
- padding:1em 0 2em 0.5em;
Borders
There are four shorthands available:
border
border-width ]
border-style ] all the three in TRouBLe order.
border-color ]
- border: width style color;/* [border:1px solid #000;] itneed not be in the same order, however use this order (W3C)as some older browsers of SAFARImay not recognize*/
- border-width: 1px 2px 3px 4px;
- border-style: solid dotted dashed double;
- border-color: #000 #fff #ccc #222;
Backgrounds
Instead of using background-color, background-image, background-repeat, background-attachment, and background-position to specify an element’s background, you can use just background:
background:color image repeat attachment position; /* it need not be in the same order, however use this order (W3C) as some older browsers of SAFARI may not recognize */
background:#f00 url(background.gif) no-repeat fixed 0 0;
«:Remember that when you give two values for position, they have to appear together. When using length or percentage values, put the horizontal value first.
Fonts
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:”Lucida Grande”,sans-serif;
font: font-style font-variant font-weight font-size line-height font-family;/* it need not be in the same order, however use this order (W3C) as some browsers may not recognize */
font:italic small-caps bold 1em/140% “Lucida Grande”,sans-serif;
«: When using the font shorthand you can omit any values except font-size and font-family – you always need to give values for those, and in that order.
Lists
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
list-style:square inside url(image.gif);
Outlines
The outline property is very rarely used, mainly because of its current poor browser support – as far as I know only Safari, OmniWeb and Opera currently support it. Anyway, using the individual properties you can define an outline like this:
outline-color:#f00;
outline-style:solid;
outline-width:2px;
outline:#f00 solid 2px;
«: Outlines have some interesting characteristics that make them useful: unlike borders, they do not take up any space and are always drawn on top of a box. This means that hiding or showing outlines doesn’t cause reflow, and they don’t influence the position or size of the element they are applied to or that of any other boxes. Outlines may also be non-rectangular.
