Stylesheets allow you to have much more fine-grained and concise control over what you are doing. They also should conform closely to standards. In theory, all browsers should interpret the formatting information you put in your stylesheets the same way.

The main advantage of stylesheets is that you can ensure that your design and layout is standard across all pages in a site, and, if you want to change something, you only have to do it once. Stylesheets are essential for large sites and sites with dynamic content.

Using a stylesheet means that, if a person has different requirments to access your text, they only need to change the stylesheet to completely reformat the display.

Unfortunately, there are inconsistencies in how browsers interpret stylesheets. Also, very old browsers will have problems interpreting stylesheets at all. You must perform tests and think about your target audiences to determine how and when to use stylesheets.

Stylesheets make you do more work at the beginning of a project. You don't have the immediacy of diving straight into HTML, and it can be fiddly to get what you want, but it very soon becomes worth it.

There are three main ways you can define styles for an html document.

• Inline styles. These are defined much as standard HTML tags, as tags that surround the exact bit of text you want to style.
• Internal stylesheets: styles are defined at the beginning of the document
• External stylesheets: styles are defined in a seperate document, which other pages and even whole sites, might have access to.

The cascading bit of "cascading style sheets" means that there is a heirachy where an inline style can override an internal style, which in turn can overried a externally defined style. The style definition that is closest to the actual thing you want to style is the one that gets used

Inline stylesheet example:

Internal stylesheet example:

We will focus on external stylesheets, as they are the most powerful and useful in the dynamic environment.

The examples will come from the stylesheet for these pages.

There are two ways to link to an external stylesheet. The

Example: using the link tag

Example: using "import". This method used to be used a lot because Netscape could understand it but could not understand the link tag. It is useful to know because you can use it within other stylesheets.

Here is the stylesheet for this set of pages. You see that it defines properties such as the margins of the whole document, and some different sizes and spacings of text. Note that the margins specfied in the Example are relative to the margins already specified for the body of the document.

• Sizes can be defined in relative or absolute values. Absolute values probably should be avoided unless you know the exact device the page will be viewed, or it might be useful for printing. Absolute measurements you can use are:
  • in (inches)
  • cm (centimetres)
  • mm (millimetres)
  • pt (points)
  • picas (12 points
  Relative measurements in common usage are:
  • pixels (relative to the viewing device
  • em (relative to the last font-size defined)
• font-families: you can specify both generic and specfic fonts to that you get the best possible result from every browser. In the example: the browser first tries to find arial, then helvetica, and if none of those are available, any sans-serif font. There are five generic fonts:
  • serif, such as Times New Roman
  • sans-serif, such as Arial
  • cursive, such as Zapf-Chancery
  • fantasy
  • monospace, such as courier
• Colours should be defined by their hexadecimal value. Or you can use one of the 16 predefined colours.
• Margins and padding: if you use just a single value it will be applied to all sides of the element. If you use two values eg. padding: 0 10px The first value will be applied to the top and bottom, and the second to the left and right, 3 values apply to top, right and left, bottom, and 4 values go in clockwise order ie. top, right, bottom, left. I think its easier to define them explicity. Values can be in pixels, or use ems or percentages to create layouts that change as the user changes the size of their browser window.

Look at the source code for this document and see how the styles are selected

• <span> </span> marks up a section of text to be fomatted "inline".
• <div> </div> marks up a "block" of content. A block will always begin on new line. A block element can have properties like a background colour or border.

You can also control the layout of your document with your Stylesheet. Layout with styles is quite badly supported in older browsers, but it is very good to do. It separates the content and the formatting information of your site, making it easier to incorporate dynamic elements and to update a whole site.

You can define the position of each block as either "abolute" or "relative". You can also define an element as "fixed" so that it always appears, in the same place, no matter where the viewer has scrolled down to. This can be useful for navigation elements. You can use styles to position text or images

See this lovely layout. Cut and paste the code into your own text editor and play with it.

Old browsers that do not understand your stylesheet will simply display the blocks in the order that they appear. Therefore a good tip is to make sure that you type your blocks in an order that would still make sense even if the positioning elements were not understood.

Next: Project