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
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.
background-position: top left;
background: #f5f5dc url(es.gif) no-repeat top left
list-style: disc outside url(es.gif)
margin: 2px 3px 4px 3px
(top, right, bottom, left)
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 firstname.lastname@example.org.