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).
.selector { declaration }
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;}
| Property | Possible values | Example |
|---|---|---|
| page-break-after | Auto or always | {page-break-after:always;} |
| page-break-before | Auto or always | {page-break-before:auto;} |
'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.
Page-break properties do not affect the display, only the printing.
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:
<link rel="stylesheet" href="YourStyleSheetURL.css" type="text/css">
CSS comment tags
/* Look - CSS comment tags are different from HTML ones */
CSS Sampler
Click here to see a sampler showing different colours and styles.