Shorthand coding. (GL)

For Giselle's next seminar we've been asked to look at shorthand coding. Shorthand coding makes the CSS style sheet a lot easier to read & a lot shorter.


Colours
Hexadecimal colours consists of 6 letters or numbers that corresponds to a single colour. The 6 letters/numbers represent 3 colours, Red, Green and Blue. Each set of numbers/letters identifies how much of red, green or blue there is in a colour. If there are colours for example that are made up of 3 pairs or is 6 letters/numbers of the same then the colours can be shortened to just 3. For example:


#FFFFFF - white can become #FFF
#000000 - black can become #000
#FF0000 - red can become #F00

& so on & so fourth.


Margin & Padding
The code for margin & padding consists of 4 values that stands for the top, right, bottom & left. The values work in a clockwise order hence top, right, bottom then left. Rather than writing out something like :

margin-top: 1em ;
margin-right: 0em;
margin-bottom: 2em;
margin-left: 0.5em;


It can be replaced with:

margin: 1em 0 2em 0.5em;

The 0 doesn't need em after it because 0 is 0 and the em part will be ignored anyway! This is also the same principle when it comes to the padding.


Borders.
Borders can also be shortened to help make the css style sheet easier to read. Let's say for example the border has the following code:


border-width: 0.25em;
border-style: solid;
border-color: #FFFFFF

It can be shortened to:

border: 0.25em solid #FFF; (hexadecimal codes can be shortened remember!)


If you want to put a border around a set of text, to make the box you use the same principle as with the margin code. So it would be as follows:

border-width:1em 2em 3em 4em;


Backgrounds
Codes for backgrounds tend to get quite long winded. So if your code for your background looks like this:


background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;


It can be shortened to this:


background:#f00 url(background.gif) no-repeat fixed 0 0;


Fonts
From looking at the codes above, it seems as though they all follow the same pattern. Font codes can be shortened too.


font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;

shortened to:

font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;