CSS Shortcuts
I try making my CSS more lighter and compact, here are a few 'shortcuts' that can make writing CSS more easier.
Fonts
First I'll start off with fonts, this is a CSS snippet of some typical font attributes:
font-family: arial, verdana;
All of them attributes can be combined into the 'font' attribute, off course if you decide not to use one of the attributes such as having a line height then you can skip that property by deleting the /18px:
font-weight: bold;
font-size: 12px;
line-height: 18px;
font: bold 12px/18px arial, verdana;
Borders
Now I'll work the same way with borders.
border-top-width: 2px;
This is the far more compact version:
border-top-style: dashed;
border-top-color: #ff0000;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #ffff00;
border-left-width: 2px;
border-left-style: dashed;
border-left-color: #ff0000;
border-right-width: 2px;
border-right-style: solid;
border-right-color: #ffff00;
border-top: 2px dashed #ff0000;
Additionally if you have the same style for all four borders, you can do this:
border-bottom: 2px solid #ffff00;
border-left: 2px dashed #ff0000;
border-right: 2px solid #ffff00;
border: 2px solid #000;
Backgrounds
You can control the way your background looks and still use shorthand techniques, heres four background properties:
background-color: #ff0000;
And one, two, three, here is the shortened version:
background-image: url(image.jpg);
background-repeat: no-repeat;
background-position: top left;
background: #ff0000 url(image.jpg) no-repeat top left;
Margins (and paddings)
Margins and paddings have a similar structure:
margin-top: 10px;
It's shortcut time!
margin-right: 5px;
margin-bottom: 20px;
margin-left: 15px;
margin: 10px 5px 20px 15px;
The values work in this order top, right, bottom, left (in a clockwise format). If your changing the padding then replace the word 'margin' with 'padding' and change any values.
Grouping
If for some reason you have the same style for two different headers, you can group them.
h2, h3 {
font: 12px/14px arial;
}