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 over the next few weeks.

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:

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) will default to a value of normal.

For background:

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:

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:

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:

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 rule 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.


<p class="one two">...</p>

More hints and tips next time. 

By the way: anyone looking for an experienced technical writer or Web designer, contact me at

No comments: