HTML Casebook: Cascading Stylesheets

Tim Fountain introduces a Web feature that's unfamiliar to users of most RISC OS browsers

For at least as long as I've been on the Internet, whenever a browser-related thread comes up in the Acorn newsgroups, people end up talking about the deficiencies of RISC OS browsers when compared with Internet Explorer or Netscape. We often end up with a list of things that RISC OS browsers "need to support" before RISC OS can become an accepted platform for Internet access. Over the years, this list has gradually got smaller. First came JavaScript, then (eventually) SSL, and then, earlier this year, a freeware Flash player was released. However, one big thing still remained: CSS support.

One of the first things I did when I got to the Wakefield show this year was to walk over to Castle's stand and have a play with their new browser, Oregano, which was released at the show. To my surprise, I saw in the help files that "limited CSS support" was one of the features listed as having been introduced in the latest version. I got chatting to one of the software engineers, and he said that basic CSS support had only been added a few days before the show, which was why it hadn't been announced. Since then, support for a few other CSS elements has been added, and while the support is still very limited, the groundwork is there, so it can only get better over time.

So what exactly are Cascading Stylesheets?

In a nutshell, stylesheets provide a way of separating page content and style. They were introduced by the W3 Consortium because Web designers had started to use various hacks to get around the presentational limitations of HTML. Pages had become littered with invisible single-pixel GIFs, unnecessary images and the dreaded <font> tag.

Stylesheets allow the application of styles to Web pages without breaking the structure of the document. One of their main advantages is that they degrade gracefully, so that sites that use them can still be displayed perfectly acceptably with browsers that don't support CSS.

A simple example

Let's say you've got a blue logo on your site, and to follow some sort of vague colour scheme you'd like all your main text headings to be displayed in blue as well. To achieve this using plain HTML, you'd have to do something like this:

<H1><FONT COLOR="#0000FF">A heading</FONT></H1>

Wouldn't it be easier if you could just tell the browser to display all headings (i.e. text surrounded by <H1> and </H1>) in blue? That's where CSS comes in. To achieve this effect, all you'd have to do is to create a simple stylesheet that contains the following:

H1 {


   COLOR: #0000FF;


   }

Easy!

A closer look at the code

Each CSS "rule" contains a selector and a declaration. The selector is the HTML tag that the style is being attached to, so in the above example the selector is H1. The declaration defines the style being applied, and also consists of two parts: the property (in this case, COLOR) and the value (#0000FF;, which is the hexadecimal RGB code for blue).

The declarations for each selector are enclosed in curly brackets ({ }). This allows you to apply more than one style to a HTML tag; for example, you might want to do this:

H1 {


   BACKGROUND: #EEEEEE;


   COLOR: #0000FF;


   FONT-STYLE: italic;


   }

This will display all text surrounded by <H1></H1> in blue, italicised letters with a grey background.

Classes

Sometimes you don't want the style to be applied to all instances of the selector. For example, say you had a page containing a lot of text, but you wanted one paragraph to stand out from the rest (perhaps this paragraph is a summary of the page content). You might want to give that paragraph a slightly different coloured background to the rest of the page. To do this, you define a style for a summary class of paragraph, like this:

P.summary {


   BACKGROUND: #EEEEEE;


   }

Then, in your HTML code, you need to assign the class to the paragraph that you wish to apply the style to:

<P CLASS="summary">Text goes here.</P>

And that's all you need to do! You can create as many classes as you like, and they can be applied to almost any HTML tag.

Oregano

A list of the style elements that Oregano currently support can be found in the browser's FAQ, which is available at http://www.castle.org.uk/Support/faq/oregano.htm. At the time of writing, the supported elements are as follows:

Inline <STYLE>
<LINK REL="stylesheet" HREF="blah">
'style', 'id' and 'class' attributes on most tags
Style elements supported:
- BACKGROUND:
- BACKGROUND-COLOR:
- BACKGROUND-COLOUR:
- COLOR:
- COLOUR:
- FONT-SIZE: (pixels/points/ems/textual size)
- FONT-STYLE: (italic)
- FONT-WEIGHT: (bold)
- TEXT-DECORATION: (underline)

Included with this article is a simple page demonstrating some of these features, which is intended for viewing in Oregano. For those of you who are using a different browser, a screenshot of what the page looks like in Oregano is also provided (to see it, click on the thumbnail image to the right).

Implementation

Okay, so now we know how to create stylesheet code, but where exactly do we put it? There are two main approaches:

1: Creating a stylesheet and linking to it

A stylesheet is simply a file with a '.css' extension, so create this file and put your stylesheet code in it. To link to the file, include the following line in the <HEAD> section of your code:

<LINK REL="stylesheet" TYPE="text/css" HREF="style.css">

The HREF should contain the path to the location of the stylesheet (so it might be something like ../../mystyles.css).

2: Embedding stylesheet code

Embedded stylesheet code is placed in the <HEAD> section of your page, surrounded by the <STYLE> tag. You should also put HTML comments around the code to stop it being displayed by older browsers. So, your page might look something like this:

<HTML>


<HEAD>


 <TITLE>Embedded stylesheet code example</TITLE>


 <STYLE TYPE="text/css">


 <!--





H1 {


   COLOR: #0000FF;


   }





 -->


 </STYLE>


</HEAD>





<BODY>





<H1>A heading</H1>





<P>Some text!</P>





</BODY>


</HTML>

So, which method should you use?

Both have advantages and disadvantages, so it's up to you. The main advantage of the first method is that the same stylesheet can be used for all the pages on your site, so to modify a style you only have to edit a single stylesheet rather than each individual page. However, if someone were to save one of your pages onto their hard disc for later reference, unless they saved the stylesheet as well, when they next viewed it they would only see the plain HTML. The second method gets around this problem because the stylesheet code is embedded within the HTML code.

To summarise

We've only covered the very basics of CSS in this article, as Oregano's implementation is currently quite limited. There are lots of other things you can with stylesheets, such as positioning of elements and more advanced typographic effects like line spacing, letter spacing and margins. Unfortunately, Oregano doesn't yet support these features, but hopefully they will be added at some point in the future.

As with all aspects of Web site design, the simplest way to learn is to look at other people's code and then experiment yourself. For example, if you view the source of this very page you'll discover that Foundation RISC User uses a linked stylesheet, which can be found here. (It's a very simple stylesheet that causes links in the text to turn red while the pointer hovers over them; a feature which is not yet supported by any RISC OS browser.) So, have a look and then add some styles to your own Web site!