RK1 logo and web banner
top of left boarder of box

Write shorthand css

Save space in your CSS documents by writing it in shorthand. So when you create your margins you might write them out for each section, top, bottom, left and right. By using the shorthand method you can condense it to just one line.

Margin shorthand

element{
margin:10px 5px 10px 5px; /*each correspond to a section in this order
TOP, RIGHT, BOTTOM, LEFT */
margin: 10px 5px; /*each correspond to a section in this order
TOP & BOTTOM - LEFT & RIGHT */
margin: 5px; /*This puts a 5px margin around the element*/
}

This can apply to other elements aswell like padding and border.

Padding Shorthand

element{
padding:2px 5px 2px 5px; /*each correspond to a section in this order
TOP, RIGHT, BOTTOM, LEFT */

padding: 10px 5px; /*each correspond to a section in this order
TOP & BOTTOM - LEFT & RIGHT */
padding: 5px; /*This puts padding of 5px around the element*/
}

Border Shorthand

With the border they can be put in any order and it will still work.

element{
border:1px solid #ff0000; /*in order from first part is line thickness, line type and colour*/
}

 

bottom of left boarder of box
top of Right boarder of box bottom of Right boarder of box