CSS Syntax

Every style should be given a name. This can be the same as a valid HTML element (or tag), in which case all instances of that element have that style applied. If it is different, you must apply the style manually wherever you want it to appear. To do this, modify an existing tag in your document or create a new one, for example <P CLASS="mystyle">.

Most CSS properties apply to most HTML tags. If they don't, the browser ignores them. Check out www.htmlhelp.com/reference/css/.

CSS Selectors

Each style definition comprises one or more rules. Each rule is in the format selector {property:value;}. The element (selector) specifies a property, and declares the value or style of the property (the way the element is to be displayed by the browser).

There are 4 types of selectors: simple (single HTML elements), 'in context' (multiple HTML elements), CLASS (a group of elements), or ID (a subgroup of elements).

Placing CSS Style Information

There are two ways to place style information within your page - in-situ (e.g. assign a style to a paragraph), or SPAN (surround some text and add style to it). You can also use style blocks to set the styles at the top of the document instead of having to go through the whole document. Even better than changing each document's style block, is to link to a common document which contains the style declarations, which you can use for the whole web site, even when it has multiple authors.

CSS Styles and Properties

Details of the styles and properties that you can add to your document using CSS.

Using the DIV tag to divide a document

If you want to keep a longer page, but want to change some of the page elements for certain sections (e.g. font or the background colour) use the DIV tag. Add a <DIV CLASS = classname> at the beginning of the section, and </DIV> at the end. Add the required style to the style block, for example:


<STYLE>

...

.exhibit {background:white;}

...

</STYLE>

Note, MSIE 3.x colours only areas that are NOT enclosed in <P> or other block tags, MSIE 4.x+ colours the entire DIV area, and Netscape 4.x only colours areas directly behind words, so that the coloured area has jagged edges. If you use JUSTIFY, there will be gaps in the colour between words. If you two or more font sizes on a line, there will be gaps between lines. Also note that grey has to be spelt with an 'a'.

Page Breaks

To assist printing the documents, there are two style properties - page-break-before and page-break-after. They should look the same in the browser. They can be set in the definition of block elements, like DIV, H, P, BLOCKQUOTE and lists, for example: DIV {page-break-before:always;}

'Always' will force a page break. 'Auto' ensures that the page break does not occur in the middle of the object, though it does not force a page break.

Linking to a Style Sheet

If you move your style blocks from the document to a style sheet (a plain text document), then you can change your whole web site by changing the style sheet. You then place a link from inside the HEAD tag of each document to the style sheet:

Property	Possible values	Example
page-break-after	Auto or always	{page-break-after:always;}
page-break-before	Auto or always	{page-break-before:auto;}