CSS - reference

Writing CSS using shorthand rules not only keeps your document smaller and more efficient it can save you time on coding.

This is done by using the simplified name of the properties group, followed by the group style values which need to be applied in the correct order to work across the various browsers.

There are five properties that can be shortened (margin and padding examples are included here as one)

1. margin / padding
2. font
3. border
4. background
5. list-style

Color values can also be shortened but this applies to web safe colors only.

1. margin / padding

The following margin styles:

.margin-long{
    margin-top:10px;
    margin-right:10px;
    margin-bott:10px;
    margin-right:10px;
    }

can be shortened to:

1 property + 4 values applied in a clockwise order – 1. top, 2. right, 3. bottom, 4. left

.margin-short-4 {
    margin: 10px 10px 10px 10px ;
    }

1 property + 3 values applied – 1. top 2. left and right 3. bottom

.margin-short-3 {
    margin: 10px 10px 10px ;
    }

1 property + 2 values – 1. top and bottom 2. left and right

.margin-short-2 {
    margin:10px 10px;
    }

1 property + 1 value – all 4 sides have equal values

.margin-short-1 {
    margin: 10px ;
    } 

Padding
All of the examples for margin also apply for padding shorthand

.padding-short-4 { 
    padding: 10px 10px 10px 10px; 
    }
    
.padding-short-3 { 
    padding: 10px 10px 10px ; 
    }
    
.padding-short-2 {
    padding: 10px 10px; 
    }
    
.padding-short-1 {
    padding: 10px; 
    }

Top

2. font

The following font styles:

.font-long {
    font-style:italic;
    font-variant:small-caps;
    font-weight:bold;
    font-size:12px;
    line-height: 16px;
    font-family:Arial, Helvetica, sans-serif;
    }

can be shortened to:

.font-short {
    font:italic small-caps bold 12px/16px Arial, Helvetica, sans-serif;
    }

Notes

• Any of the values can be removed except for the font itself
• Font size and line height are joined by / if line height isn’t needed remove the /16px or / value)
• This can be used for anything generally enclosed in text i.e body, h1 – h6, p, ul, li, em, table, input etc….

Top

3. border

The following border styles:

.border-long{
    border-width:1px;
    border-style:solid;
    border-color:#ff0000;
    }

can be shortened to:

.border-short {
    border : 1px solid #f00;
    }

Adding borders to individual sides:

.border-top { 
    border-top: 1px solid #f00; 
    }
    
.border-right { 
    border-right: 1px solid #f00; 
    }
    
.border-bottom { 
    border-bottom: 1px solid #f00; 
    }
    
.border-left { 
    border-left: 1px solid #f00; 
    }
    

Adding borders to 3 sides example:

.border{
    border : 1px solid #f00; border-top : none;
    }

Note:

• the last property in the CSS is classed as the default, so if you had 3 borders colours like the following example red will be the default border-color.

.border{
    border-color:black
    border-color:white
    border-color:red
    }

Tips:

• Having a simple .border {1px solid #f00;} in your CSS can help identify elements on the screen by temporarily adding the class to the div in question
• Useful border-styles: solid, dotted, dashed and none.

Top

4. background

The following background styles:

background-long {
    background-color: #fff;
    background-image: url(../images/bg.gif);
    background-repeat: repeat-x;
    background-attachment: fixed;
    background-position: top center;
    }

can be shortened to:

.background-short {
   background: #fff url(../images/bg.gif) repeat-x fixed top;
   }

Note:

• the two last values for the background position apply to the horizontal position first and the vertical position second.
• 3 Values types can be used
• % – 0% would be left or top, 50% would be middle or centre 100% right or bottom
• px – for pixel increments
• text – left, centre, right, top, centre and bottom

Top

5. list-style

The following list styles:

#list-style ul.long {
    list-style-type:square;
    list-style-position:outside;
    list-style-image:none;
    }

#list-style li.long{
    list-style-type:square;
    list-style-position:outside;
    list-style-image:none;
    }
    

can be shortened to:

#list-style ul.short { 
    list-style:square outside none;
    }

#list-style li.short { 
    list-style:circle outside none;
    }

For lists using background images

#list-img ul.long {
    list-style-type:none;
    padding:0px;
    margin:0px;
    }

The ul stays as is but li can be shortened from:

#list-img li.long {
    background-image:url(../images/arrow.gif);
    background-repeat:no-repeat;
    background-position:0px 5px;
    padding-left:14px;
 }

to:

# list-img li.short {
    background: #fff url(images/arrow.gif) no-repeat 0px 5px;
    padding-left:14px;
    }

Top

color

Web safe colours with 6 characters or 3 pairs of 2 equal characters can be shortened to 3 by removing the second character of each pair i.e.

#FFFFFF = #FFF
#FFFF00 = #FF0
#FF9900 = #F90
#CC0000 = #C00
#990033 = #903
#0033FF = #03F
#000000 = #000

.colour-long{
    color:#ff0000;
    }
    
.colour-short{
    color:#f00;
    }

Top