CSS (cascading style sheets) is the ultimate tool to create lean, fast, functional, SEO friendly and, though, sexy layouts. Storing style attributes in one file provides several advantages as faster loading times, the source code takes a radical diet, if all the attributes do not appear on the pages itself.

You are web designer and have to work full contact with the customer? Then you will know this situation, the customer wants that headline bold and purple – no, make it green or is blue a better choice? This goes back and forth, which would make you go crazy if you had to do the changes on thousands of subpages. Using CSS you do changes faster than the customer decides between green and yellow.

Ok, enough chit chat here are some tricks to get more effective:

• Assign multiple classes on one element

  This is a real saver, one simply creates a “virtual” class by combing several ones, which is highly flexible and lowers the amount classes you will have to use.

  Example:

  The text should be black, underlined and bold, now instead of using a single one containing all three attributes, you setup three with each single value (black, underlined, bold)

  <style type="text/css">
  .black {color: #000;}
  .underlined {text-decoration: underlined;}
  .bold {font-weight: bold;}
  </style>
  
  <span class="black underlined bold">the text</span>
  

  On the first hand this looks intricate, one could do this with a single class, but remember if you combine the three classes, you’ll get six “virtual” ones.

• Using multiple stylesheets

  Splitting up the a single stylesheet first of all makes it easier to maintain for the web programmer.

  <style type="text/css">
  @import "main.css";
  @import url("additional.css");
  </style>

  It’ also possible to embed further .css files into a specific .css file by integrating “@import url(“additional.css”); right at the top of the .css document.

• Abbreviations
  
  As there are always many roads to reach your destination, CSS is no exception. One can shorten the CSS code to increase the clearness of the structure.
  Example:
  Instead of:

  .classname{
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 20px;
  margin-left: 25px;
  }

  the abbreviated version should be used:

  .classname{margin-top: 10px 15px 20px 25px;}

  The order of the values is important, they are arranged clock wise:
  top (12 o’clock), right (3 o’clock), bottom (6 o’clock), left (9 o’clock),
  That also works with the attributes padding and border.
  
  Compressing attribute values

  Several attributes can be concentrated in a single one.

  Example:
  Instead of:

  .classname{
  border-width: 10px;
  border-style: solid;
  border-color: #000;
  }

  Use:

  .classname{border: 10px solid #000;}

  This also works on “font” and “background”, i.e. .