Inset courses :: Advanced HTML course

Style Sheets are used to define the style of the document, for example the font and size of the text, colours, etc. which are then applied to the document as it is loaded onto the desktop. The term Style Sheets actually refers to a system of HTML tagging incorporated into your web documents, with several different ways of doing this:

Inline Style Sheets : here the style tags are added to very specific parts of the document , for example it may be to only one heading within the document, therefore the remaining headings would not change in style.
Embedded Style Sheets : are when the tags are applied to a whole document. The style tags are put at the top of the document (between the <HTML> & <BODY> tags). The styles outlined within this will then be applied to the whole document, i.e. all your heading 1's will appear the same, although you can still define the style of specific text, by using Inline Style Sheets
Linked Style Sheets : are when the styles are applied across a batch of documents. A master style sheet is created and stored as a separate HTML file on your server, then within each of your web documents a style tag is inserted at the top, pointing to this master Style Sheet. The server recognises these tags and therefore selects the master style sheet and applies the overall styles to the page being uploaded. The styles imported will be applied to the entire document. Again you can override these styles by using either Inline or Embedded Styles within a single document.
Cascading Style Sheets : simply refers to the rules that govern the above. Which is that Inline styles will have precedence over Embedded and Linked, and in turn Embedded Styles have precedence over Linked Style Sheets.

Therefore for your web site, it is usual, to have your overall style defined by a Linked Style Sheet, and then on your web pages specific styles defined, by Inline and Embedded Style Sheets, on those aspects that are an exception on your site, e.g. a particular phrase you may want emphasising.

Styles can be used in many ways. Below are a few examples of controllable elements in styles sheets.

This is a normal 'p' tag, set with a 'class="block"'. The styles used are defined within the embedded style sheet on this page using a 'border' style tag, setting the style of the border and the color.
I've also set the margins around this element and changed the color of the text, the background and the internal padding. So now it no longer looks like a paragraph.

Advantages

ensures that there is consistency of style on page contents throughout your site.
changing the style of your web site requires changes to be made to one file only, rather than to every web page

Disadvantages

many browsers do not handle Style Sheets (only releases of, and above, Netscape 4 and Internet Explorer 3 support Style Sheets)
those browsers that do support them will sometimes interpret the style definitions differently to what was originally intended, e.g. a red arrow may be shown as a green arrow thus misleading any associated text such as click on red arrow.

For a complete reference see the following website: http://www.w3.org/TR/1998/REC-CSS2-19980512/.

To view the style guide see this page.