What's the point?

What's the point of stylesheets? Styles are an old idea that has been around for 20 years; certainly WordPerfect 5.1 was capable of using stylesheets. Stylesheets :

  • separate structure of document from it's presentation:

    • structure - logical tags represent the text's function.
      For example, <h1> , <blockquote> and <strong>.
      How they are displayed is up to the browser, although Netscape and I.E display common tags the same way.

    • Presentation.
      This has to do with what the text looks like. HTML presentation tags are such as <font>, <b>, <bgcolor>. These should not be used in any web page that I grade - use of a presentation tag will result in marks subtracted.
      We will see how styles can be used to format text very effectively.

  • Define the presentation or 'look' of a web site in a single place (when used as 'external' stylesheet). This results in:

    • consistent look for all pages in a web site
    • smaller size pages leading to quicker download/ refresh. Efficient.
    • ease of web site update and maintenance (you don't have to edit every page to make minor changes in the look of the site).

  • Control over presentation.

    • styles allow precise control over text and graphic positioning, size, and color, as well as overlapping boxes and cool rollover effects for links, without the need for 'spacer' gifs, nested tables and rollover graphics with javascript.

  • Accessibility. Styles improve accessibility by:

    • lack of presentation tags enable devices like screen readers to handle the text they see and read it out loud.
    • ease of reading is enhanced by ability to resize fonts
References
Using Styles

There are three ways of applying styles to a web page:

  1. External stylesheet linked to the web page. When the page is loaded into the browser it reads in the styles and applies them.
  2. Internal style declations. These occur in a <style> section within the <head> section.
  3. Style definitions applied to a tag.

First of all we'll deal with styles within a single page (2), then we'll export the definitions into a stylesheet and link it to another page (1).

We are going to use styles to change:

  • Typography:

    • font family — Serif (Times, Garamond), Sans Serif (Arial, Helvetica), Monospaced (Courier), other
    • font size — relative, measured in ems (size of letter 'm'), %, and pixel.
      — absolute, point (pt).
    • font weight — bold, bolder, levels of boldnosity
    • line height — known as 'leading' in the printing trade
    • word spacing, letter spacing — the latter known as 'kerning' in the trade
    • line positioning - text align\, left, right, justify etc

  • Colours.

    • Text colour - "color"
    • Background colour
    • Box and border colours
  • Link styles
    No need to use complex graphics with javascript to get rollovers; styles will do just as well and are quicker and more efficient to boot! There are four categories of link pseudo-classes :
    • a:link : what the link looks like before clicking it.
    • a:visited : what the link looks like after you have been to that page.
    • a:hover : what the link looks like while the mouse is hovering over it.
    • a:active : what the link looks like at the point it is clicked.

      The link styles need to be declared in the order above.

It's important to know the difference between block level html tags such as <h1>, <p> and <ul>, and inline tags such as <strong>, <sup>. Block level tags always have a blank line around them and you can easily draw a box around a block tag using a style. We'll do just this later on. In the next session we'll use a dummy block tag, <div> in order to draw a box around a graphic and it's associated text.