CSS
- 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, padding andborder properties 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;
Tags: CSS Tips, shorthand notation
0 responses so far!
Loading ...
