Lunanbay HTML HowTo

A very useful site for helping out in the HTML department is www.htmlhelp.com. BrainJar's guide to CSS positioning is very good.

CSS	Cascading Style Sheets
CSS Features	CSS Features

CSS

A better site is www.htmlhelp.com's style sheet page but the basics are to try the following:

add an HTML LINK reference in the HEAD section of your HTML along the lines of
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css">
edit style.css (the choice of file name is your own, it should be available as though it were a normal page) with your style statements, for example
BODY { color: skyblue ; margin-left: 5em } P.warning { color: red } .error { color: yellow }
which would set the BODY of the document to have a sky-blue colour, you could also type the following HTML:
<table class="error">...</table> <p class="warning">...</p>
which would set the appropriate colours. Note that warning is restricted to the tag p whereas error is not restricted.
There is a full list of the possible style attributes here.

You can see the style sheet for this page here

CSS Features

Browser compliance to CSS standards is considerably poorer than their compliance to HTML standards, which isn't good. Features, therefore, abound and I'll document a couple here.

IE6 not displaying CSS floated objects

A very subtle one, this. Take an object, perhaps a div or an img which you want to float to provide a neat collection of related objects. A photo album, say.

.floated { float: left ; }

When you come to view this, potentially you won't see a thing. Maybe, if you're lucky a few images might pop out of the side of the containing block. The problem lies with a lack of position. Without a relative position, IE6 gives the object a z-index of something less than 1. This means that the background will be over the top of the objects (other than those that peek out the side). An easy fix:

.floated { position: relative ; float: left ; }