Web & graphic design notes

CSS: shortening tricks

Sometimes a css file size could be pretty big, so in this article we will try to clarify some techniques to reduce css coding, so here we go!

Border propery shortening

Syntax: border: border-width | border-style | color;
Examples:

/* non-shortened css code */
border-left-width: 2px; 
border-left-style: solid;
border-left-color: #0000ff; /*blue*/
border-right-width: 2px; 
border-right-style: solid; 
border-right-color: #000000; /*black*/
border-top-width: 2px; 
border-top-style: solid; 
border-top-color: #ff0000; /*red*/
border-bottom-width: 2px; 
border-bottom-style: solid;
border-bottom-color: #c0c0c0; /*silver*/
 

We can replace the code above with:

border-left: 2px solid #0000ff; /*blue*/
border-right: 2px solid #000000; /*black*/
border-top: 2px solid #ff0000; /*red*/
border-bottom: 2px solid #c0c0c0; /*silver*/
 

In case you want to specify the same border type and color, use this:

border: 2px solid #00000;
 

Or if you need to place a certain property for one side of the block use the code:

border: 2px solid blue; 
border-top-width: 10px;
 

Background property shortening

Syntax: background: background-image | background-position | background-repeat | background-color | background-attachment

Examples:

/* non-shortened css code */
background-attachment: scroll; 
background-color: #ccc;
 

If all letters or digits in the HEX color code are the same, you can contract the code to the first three symbols, e.g. CCCCCC to CCC

background-image: url(img.gif); 
background-position: top left; 
background-repeat: no-repeat;
 

Replace code above to:

background: url(img.gif)top left no-repeat #ccc scroll;
 

Margin property shortening

Examples:

margin-top: 5px; 
margin-right: 0; 
margin-bottom: 10px; 
margin-left: 15px;
 

Replace the code above with:

margin: 5px 0 10px 15px;
 

You can omit the width dimension where value is zero like this:

• 5px – top margin
• 0 – right margin
• 10px – bottom margin
• 15px – left margin.

Just imagine a clock dial to remember the syntax :)

Syntax:
margin: [ | | auto ]{1, 4}
where 1, 2, 3, 4 values are:

• 1 – all 4 sides have equal values.
• 2 – the first value is for the top and bottom margins, the second one – for the right and left margins respectively.
• 3 – the top margin length equals the first value. The right and left margins – equals the second value. Bottom margin equals the third value.
• 4 – the top margin equals the first value; the right bottom equals the second; the bottom margin equals the third; the left margin equals the forth value.

Example:

margin: 5px 0;
 

So, this means that the top and the bottom margins have 5px lenths, the left and the right margins have zero lenths