CSS Layout

by RedMatrix

When you create a separate style sheet for your look, you do that to reduce load times for your visitor. But if you have a large CSS file, that could slow down load times, however slightly.

There are many ways to reduce the byte count to your CSS file. The first way is to use shorthand. Instead of writing 4 lines of code, you can reduce them to one. Even greater, is the fact you can also omit certain bits by not using a unit for anything with a zero. Think about it. Zero pixels are the same as zero ems.

This is sample CSS code written in long hand. It’s very easy to understand.

DIV#header
{
background-color: #A7A6A5;
background-image: url(htp://path.to/image/file);
background-attachment: fixed;
background-repeat: repeat-x;
background-position: top center;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 6px;
color: Black;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}

But if you use level 1 of CSS shorthand, you can shorten the above code into this:

#header
{
background: #A7A6A5 url(htp://file) fixed top center repeat-x;
margin: 10px 0px 10px 0px;
padding: 6px 6px 6px 6px;
color: Black;
font: 12px bold Arial, Helvetica, sans-serif;
}

Then you can further reduce the code by remembering that “0″ doesn’t need a unit of measurement, and that the order of things are top-right-bottom-left.

Take a look at this optimal code:

#header
{
background: #A7A6A5 url(htp://file) fixed top center repeat-x;
margin: 10px 0;
padding: 6px;
color: Black;
font: 12px bold Arial, Helvetica, sans-serif;
}

This reduces the code-to-content ratio if you have a huge CSS file. It’s also easier to read, with much less commenting.