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:
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) will 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 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.
HTML
<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 trevor@itech-ed.com.
No comments:
Post a Comment