Use CSS shorthand notation

  • 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 { colorblue; }  
    2. a:visited { colorpurple; }  
    3. a:hover { colorpurple; }  
    4. a:active { colorred; }  
  • 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 marginpadding andborder properties can save a lot of space.

    1. <em>CSS:</em>  
    2. margintop right bottom left;  
    3. margin1em 0 2em 0.5em;  
    4. (margin-top1emmargin-right0margin-bottom2emmargin-left0.5em😉  

    1. <em>CSS:</em>  
    2. border: width style color;  
    3. border1px solid #000;  

    1. <em>CSS:</em>  
    2. background: color image repeat attachment position;  
    3. background#f00 url(background.gif) no-repeat fixed 0 0;  

    1. <em>CSS:</em>  
    2. font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family;  
    3. fontitalic small-caps bold 1em/140% “Lucida Grande”,sans-serif;  

You may also like...