Quick Tip 6 – CSS Shorthand
CSS Shorthand is another method which is regularly used to help cut down the size of Style Sheets, however trying to remember all shorthand tricks can be a bit tricky sometimes, so here is a handy list of the ones I use on a regular basis.
Boxes
Long
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
Shorthand (Every Value Different)
margin: top right bottom left;
margin: 0px 0px 0px 0px;
Long
margin: 20px 10px 20px 10px;
Shorthand (Equal Top and Bottom, Equal Left and Right)
margin: top-bottom left-right;
margin: 20px 10px;
All Values
margin: 10px;
Colour
Long
color: #FFFFFF;
color: #33CCFF;
Shorthand
color: #FFF;
color: #3CFF;
Backgrounds
Long
background-color: #000;
background-image: url (bg.jpg);
background-repeat: no-repeat;
background-position:top left;
background-attachment: scroll;
Shorthand
background: #000 url(bg.jpg) no-repeat top left scroll;
Fonts
Long
font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 0.8em;
line-height: 1.6em;
font-family: Georgia, Times New Roman, Times, serif;
Shorthand
font: italic normal bold 0.8em/1.6em Georgia, Times New Roman, Times, serif;
Borders
Long
border-width: 1px;
border-style: dashed;
border-color: #000;
Shorthand
border: 1px dashed #000;
or
border-width: top left bottom right;
border-width: 1px 2px 3px 4px;
List Styles
Long
list-style-type: circle;
list-style-position: inside;
list-style-image: url (img.jpg);
Shorthand
list-style: circle inside url (img.jpg);
Outline
Long
outline-color: #000;
outline-style: dotted;
outline-width: 1px;
Shorthand
outline: #000 dotted 1px;
Related posts:
- Quick Tip 5 – Compact CSS
- Quick Tip 7 – CSS !Important
- Quick Tip 9 – CSS min height
- Quick Tip 2 – CSS Text Shadow
- Quick Tip 10 – CSS Vertical Alignment
Posted By: Martyn
Hi, I'm Martyn, the Lead Designer for Web Design GM and really hope you find my existing and upcoming articles useful. Please leave comments below and I will try to respond to any questions as soon as possible.
