Use shorthand CSS notation

Category: CSS Tips | 1,632 views |

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
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.”
view plaincopy to clipboardprint?
1. a:link { color: blue; }
2. a:visited { color: purple; }
3. a:hover { color: purple; }
4. 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.”
You can use shorthand properties. “Using shorthand for margin, padding andborder properties can save a lot of space.
1. CSS:
2. margin: top right bottom left;
3. margin: 1em 0 2em 0.5em;
4. (margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;)
1. CSS:
2. border: width style color;
3. border: 1px solid #000;
1. CSS:
2. background: color image repeat attachment position;
3. background: #f00 url(background.gif) no-repeat fixed 0 0;
1. CSS:
2. font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family;
3. font: italic small-caps bold 1em/140% “Lucida Grande”,sans-serif;