Style Sheets Technical Investigation

Cascading Style Sheets (CSS) has been a recommendation from the WWW Consortium for a while now, and the browsers are slowly adopting it. Partial solutions hamper the writer's progress in attempting to lay out their documents, but style sheets are still worth using.

Basics

HTML was designed to be a language which describes the structure of a document. It divides the document into paragraphs and headings, lists and tables, but allows the web browser total control over how these are rendered on the screen, or on paper.

Style sheets were developed to allow the document writer more control over how their document is displayed, without having to resort to dirty hacks like inserting invisible images to space out text.

A style sheet defines how the various HTML elements are to be displayed. This allows the writer to specify size, colour and spacing of text among other things. It also adds a new CLASS attribute to the HTML tags, so the writer can define a number of paragraph or heading styles. Here's an example:

<style type="text/css">
P {color: blue; font-size: 100%}
P.red {color: red}
P.tiny {font-size: 70%}
</style>

<P>Here is a normal paragraph</P>
<P CLASS=red>Here is a red one</P>
<P CLASS=tiny>And here's a small one</P>

Here is a normal paragraph

Here is a red one

And here's a small one

Notice that the classes red and tiny inherit the styles from P, then override one or more values.

Style Files

There are several ways you can apply style sheets to your HTML. You can use an inline section (Note: inline style definitions should be placed in the HEAD of your document), as in the code above, you can include it in individual tags, or you can put your styles in a separately included file. This last way is my preferred way of using style sheets. I have a defstyle.css file which I include in all my HTML files that use styles. Here's an example style file:

P   {
    font: 90%/120% "Zurich BT" Helvetica; 
    color: #000000; 
    }

P.text	{
	margin-left: 10%; 
	margin-right: 10%;
	text-indent: 2em;
	text-align: justify;
	}

The file is included in an HTML document with the LINK tag, in the HEAD of the HTML. For example:

<HTML>
<HEAD>
<TITLE>My Page</TITLE>
<LINK REL=StyleSheet HREF="defstyle.css" 
    TYPE="text/css" TITLE="Default Styles">
</HEAD>
<BODY>
...

Size Matters

You can set the size of your text using style sheets, using inches, points or pixels. This is great until you get a user who can't see very well, and tries to change the default font size in their browser, only to find that your text sticks to the size you've set it at. This is where relative sizes come in. There are two relative units: percentage and em. An em is the size of a capital M in the default font size, so you can specify that your font is to be 1.2em, or 120%, which amounts to the same thing.

Bug warning - Microsoft's Internet Explorer version 3 interprets ems as pixels, giving slightly difficult to read text. I stick to using percentages. Also, note that the relative sizes are cumulative in some browsers. If you start several paragraphs without ending them, the text will get bigger and bigger, as below:

<style type="text/css">
P {font-size: 120%;}
</style>

<P>Here is the first paragraph
<P>Here is the second
<P>Here is the third

Here is the first paragraph

Here is the second

Here is the third

Div and Span

CSS defines elements as being block and inline level. Block level elements are those that start on a new line, such as P, H1, UL, etc. Inline elements are those which are part of a block, and change some characteristic, such as B, EM, STRONG.

There are general block-level and inline elements which are useful when using CSS. The block-level element is called DIV, and can be used to mark out an area of the HTML and give it a different style. The inline element is called SPAN, and can be used in a similar manner to STRONG and EM.

<style type="text/css">
.blueback {background-color: blue; color: white;}
</style>
This is outside the DIV...
<DIV CLASS=blueback>
this is inside,
</DIV>
and now out again.
<BR>
Here is <SPAN CLASS=blueback>an example</SPAN> of span.

This is outside the DIV...

this is inside,

and now out again.
Here is an example of span.

Technical Investigations - Style Sheets

Basics

Style Files

Size Matters

Div and Span

Links