Breathe new life into your old web pages by adding style sheets. With proper use of style sheets you can change the look and feel of your site dramatically with very little editing to the many individual pages that make up your site.

          This article is concerned with the visual look and feel of your site so I'm afraid it will be a little Lynx-unfriendly, however most people who visit your site are not using Lynx: about 90% of web surfers are using IE or Netscape and most of those are level 4.x browsers or higher, so it is important to consider the look of your site from their perspective.

          I may be incorrect in doing so but I assume most of you build your pages on your local system (PC or Mac) and then upload them to CCN via Kermit or the new FTP service. If this is the case then you should be able to see the results of your work locally but you may have difficulty reading the article if you only use Lynx to surf the web.

          First let's talk about what style sheets are then we'll look into how we can use them to give your site a make-over.

          Cascading Style Sheets are a way of adding style in the form of fonts, spacing, and colour to your web pages. The CSS specification recommended by the W3C is currently at level 2, however, level 1 is the only one supported by the major browsers, IE and Netscape, and even then only partially supported.

          So you might ask, "Why would I bother to use CSS if it is only partially supported?" I would answer, "Because the usefulness of partial support is enough to make it worth it. Also, as the CSS specification develops it seems to be one of the few W3C standards that is being followed by both the major browsers."

          There are three ways of implementing cascading style sheets: inline, embedding, and linking.

          An inline style sheet is utilized by including the style as part of a single tag. For example, if you wanted to make a paragraph red with a particular size font you could specify the following html code <p style="font-size: 16pt; color: red"> which includes the style attribute. Here is an example:

The quick brown fox jumped over the lazy dog.

          Using cascading style sheets in this way gives you a very fine granularity of control over the way the content looks. It can really bring text to life as it can be used to specify some very interesting size and colour combinations that cannot be achieved without graphics.

          When you predefine a number of styles and include it in the top of your HTML you have embedded it into your document, hence the name. The advantage here is that one small section of predefined styles change the face of your entire document.

          The following two examples use identical HTML, however, the embedded style sheet is different. As you can see you can get quite a different look and feel from changing just the stylesheet and nothing else. Please note, to see the coding differences you'll want to view the source of the HTML.

          Embedding allows you to control many aspects of a particular document which can be useful but can still doesn't really show what I believe is the real power of CSS...

          Following the progression you may have already guessed what linking is but just in case I'll let you in on it. Linking removes the style sheet specification from the HTML document and places it in its own file. The style sheet becomes a separate entity and is linked to from the HTML document.

          Again, this is where I believe the real power is as you can point all of your pages to a specific CSS document and then when you change the colour of a header, the spacing of your paragraphs, the font face of links, etc., it changes for your entire site!

          Let's take a look at the above two examples again this time using linking...remember, "View Source" is your friend....

          After you look at the above two examples you will notice that the only difference between the two pages is the link to either styles1.css or styles2.css. That is the magic of using linked style sheets. Here are the two style sheets that I specified.

BODY {font-size:16pt; font-family:"Arial"; background:DDDD00}
H1 {font-size:24pt; font-family:"Verdana"; font-weight: bold; color: maroon}
H2 {font-size:16pt; font-family:"Arial"; font-weight: bold; color: blue}
P  {font-size:12pt; font-family:"Arial"; color: black}

BODY {font-size:10pt; font-family:"Arial"; background:D0D0DD}
H1 {font-size:12pt; font-family:"MS Sans Serif"; color: 882288}
H2 {font-size:24pt; font-family:"MS Sans Serif"; color: 00DDDD}
P  {font-size:16pt; font-family:"MS Sans Serif"; color: CC00DD}

          This is an example of something every computer programmer loves: separation of function. If you use CSS by linking you separate the content (your HTML) from the look and feel (CSS) which allows you to change how your entire site looks by editing a single file.

          If your site has been built with good HTML then you need only add the single reference to the style sheet in your pages and then edit your style sheet to give your entire site a facelift. When St. Patrick's Day rolls around, a simple flick of the switch turns your site green for the holiday spirit.

          I won't attempt to give you a course on Cascading Style Sheets as there are already many very good web sites which cover this information. My aim with this article was to show you the power of the CSS and how you can use it to control the look and feel of your site.

          Yahoo has a number of references on learning CSS which seems to be pretty good. Microsoft's MSDN Web Workshop has some excellent information on CSS which also includes informaton on HTML and DHTML.

          You will want to make use of WebReview.COM's Browser Compatibility Charts for CSS so you'll know which tags to stay away from and which tags to make use of as not all the browsers fully support any of the CSS specificiations.

          Happy editing until next issue...

You may direct comments or suggestions about this column to:

Glenn Euloth,  ab593@chebucto.ns.ca

Back To The Beacon Index