CSS tips

Monday, 27 October 2008

CSS tips

While I've been designing Web sites recently - to W3C standards I might add - I have put together some CSS tips that I'd like to share with you.

1 Use default values

There is no need to specify a value for a property if you use that property's default value.

2 Less is more

The less code that has to be downloaded, the faster the page loads. So shorten hexadecimal colour notation, where possible.

#000 is the same as #000000, #ffffff is the same as #fff, and #123 is the same as #112233, etc.

3 Less CSS is definitely better

For fonts:

Bad CSS

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: arial;

Good CSS

font: 1em/1.5em bold italic small-caps arial

You must specify both the font-size and the font-family. Unspecified values (font-weight, font-style, or font-variant) default to a value of normal.

For background:

Bad CSS

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Good CSS

background: #f5f5dc url(es.gif) no-repeat top left

For list-style:

Bad CSS

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(es.gif)

Good CSS

list-style: disc outside url(es.gif)

For margins:

Bad CSS

margin-top: 2px;
margin-right: 3px;
margin-bottom: 4px;
margin-left: 3px

Good CSS

margin: 2px 3px 4px 3px

(top, right, bottom, left)

For borders:

Bad CSS

border-width: 1px;
border-color: black;
border-style: solid

Good CSS

border: 1px black solid

4 Using two classes together

Two classes can be combined. They must be separated by a space (not a comma) in the HTML. The rules is that where an overlap between classes occurs (in this case, one and two), the class nearest the bottom of the CSS file takes precedence.

HTML

More hints and tips next time.

By the way: anyone looking for an experienced technical writer or Web designer, contact me at trevor@itech-ed.com.

If you need anything written, contact Trevor Eddolls at iTech-Ed.
Telephone number and street address are shown here.