Resources
helping you along the way
Knowledge is the foundation of all wisdom...
Resources >> Web workshops >> CSS shorthand
CSS shorthand
Fonts
When styling fonts with CSS you may be listing the attributes individually in your stylesheet as follows:
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana, serif;
Perfectly acceptable! But there's no need as you can use this CSS shorthand property:
font: 1em/1.5em bold italic small-caps verdana, serifMuch faster! Just a few of words of warning though:
This CSS shorthand version will only work if you're specifying both the font-size and the font-family . Also, if you don't specify the font-weight , font-style , or font-variant then these values will automatically default to a value of normal , so do bear this in mind too.
Colours
Nearly all browsers (version 3 and above, except IE3 Mac) support shorthand hex colours. RGB triplets can be abbreviated if each of the Red, Green, and Blue hex pairs are the same. So when you use colours where there are three pairs, you can abbreviate each colour channel using one character instead of two identical characters. So this:
.dark-yellow {color:#ffcc00;}becomes this:
.dark-yellow {color:#fc0;}
or
.orange {color:#ff6600;}
becomes this:
.orange {color:#f60;}Browsers automatically expand these three-character colours into six by replicating the R, G, and B values. This technique saves a few bytes for each colour abbreviated with shorthand hex notation.
Borders
When writing a border rule you'll usually specify the colour, width and style (in any order). For example,
border: 3px solid #000;
will give you a black solid border, 3px thick. However the only required value here is the border style.
If you were to write just
border: solid;
then the defaults for that border will be used. But what defaults? Well, the default width for a border is medium (equivalent to about 3 to 4px) and the default colour is that of the text colour within that border. If either of these are what you want for the border then you can leave them out of the CSS rule!
Padding and margins
Instead of specifying up to four longhand padding or margin values, you can use the padding and margin shorthand properties. The sequence is clockwise from the top — top, right, bottom, left.
div {margin: 20px 0px 100px 10px; }
Note that there are just spaces between the values, no semicolons.
So instead of this:
div { padding-top:1em; padding-right:2em; padding-bottom:1em; padding-left:2em; }
You can do this:
div{padding:1em 2em;}
Note that these values replicate according to the CSS specification when values are ommitted. For our example above the top and right values replicate to the bottom and left padding respectively. The margin and border shorthand properties uses the same syntax.
