- Shorten hexadecimal colour notation. “In CSS, when you use hexadecimal colour notation and a colour is made up of three pairs of hexadecimal digits, you can write it in a more efficient way by omitting every second digit:
#000 is the same as #000000, #369 is the same as #336699[Roger Johansson] - Define pseudo classes for links in the LoVe/HAte-order: Link, Visited, Hover, Active. “To ensure that you see your various link styles, you’re best off putting your styles in the order “link-visited-hover-active”, or “LVHA” for short. If you’re concerned about focus styles, they may go at the end– but wait until you’ve read this explanation before you decide.” [Eric Meyer]
a:link { color: blue; } a:visited { color: purple; } a:hover { color: purple; } a:active { color: red; } - Define element’s margin, padding or border in TRouBLed-order: Top, Right, Bottom, Left. “When using shorthand to specify an element’s margin, padding or border, do it clockwise from the top: Top, Right, Bottom, Left.” [Roger Johansson]
- You can use shorthand properties. “Using shorthand for
margin,paddingandborderproperties can save a lot of space.CSS: margin: top right bottom left; margin: 1em 0 2em 0.5em; (margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;)
CSS: border: width style color; border: 1px solid #000;
CSS: background: color image repeat attachment position; background: #f00 url(background.gif) no-repeat fixed 0 0;
CSS: font: font-style (italic/normal) font-variant (small-caps) font-weight
font-size/line-height font-family; font: italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
Use shorthand notation
CSS .
Tags: CSS Tips, shorthand notation



