May 10, 2008, 12:28 am

Website Design

Introduction to Cascading Style Sheets

HTML is unable to provide absolute control over page layout. It was never made to do the job anyway. Unfortunately, when graphic designers began to write web pages, control of appearance was always going to be a priority.

The so called browser war between Netscape and Microsoft resulted in a host of browser specific markup being shipped with each new version. For example, designers soon realised that an invisible 1px gif, with its width attribute set to 10px in the image tag markup, could be placed in such a way as to produce a text indent. Another trick was to make the invisible gif into a 50 x 50 px image and flow text around it. Similar images were also used to set the space between lines of text. So what did Netscape do? They produced Navigator 3.0, and with it arrived the <spacer> tag, which was all well and good for Netscape users, but of no use to someone viewing with Internet Explorer.

Increasingly, HTML purists, and W3C in particular, realised that in order for HTML to do the job that was intended, namely marking up the structure of a web document, the onus on appearance needed to be placed elsewhere. Enter a new standard for the Web, Cascading Style Sheets (CSS).

A few years ago, after learning some HTML, I read an article about CSS and decided to try it. I did not understand too much about how it worked, but I was pleased with the results. Apart from control over display offered by CSS, its true worth is the savings in time and effort required to make modifications. Any change required, to say a font for the main content, can be made in a single CSS file. That modification will be instantly transmitted to any page linked to the stylesheet.
Write once, use many!

In the head of the source code for this page (View/Source in IE, or View/Page Source in Netscape), is this:

This text provides a browser with instructions to find several CSS files on the machine that serves my web pages. As a result, a browser can link those files to this web page. Once they are imported, a browser can parse each CSS file and apply any stylesheet "rules" found in each of them. Each rule corresponds to some specified HTML element and provides instructions as to how the marked up text should be displayed.

Here is an example of a CSS rule (I will return to the use of the <pre></pre> tags later)

pre {
  color: Navy;
  padding:0px;
  margin: 0px;
}

A rule consists of a selector, in this case pre and a series of declarations e.g. color: Navy;. Declarations come in property/value pairs. In this example, color is the property and Navy is the value. I like to display examples of code in Navy blue. Browser software will parse this rule and match it to text found between any <pre></pre> tag sets in the linked web page.

CSS files can be written in a simple text editor and saved with the .css file extension. Like any aspect of computing, it takes time to absorb the fine details of CSS, but it should not take too long to grasp the basics. I will make a further reference to CSS later when I discuss the use of selectors, which are the pattern matching methods for implementing style rules. But rather than attempt to provide any lengthy explanations of CSS here, I will simply refer you to a number of excellent web resources that I have used in the past.

These provide a host of articles, which with a little thought can be adapted to your own needs.

After repeated experiments with the design of this site, I recently opted for a simple two column "liquid layout". Consequently, the layout will expand and contract in reponse to the size of the browser window. The left hand column contains a navigation menu and the right column holds the content. I employ a header for each page, which I use to rotate details from some of my paintings and drawings.

Below this sits a horizontal menu with links to the home page, four principal content sections, and finally a search engine. Using CSS for navigation has led to a much improved performance in download times. These were significantly slower for previous versions that made considerable use of JavaScript. Finally, at the foot of the page sits ... well a footer of course!

After much searching and trial and error, I found just what I needed on this website,
Ruthsarian Layouts
The template I chose required a few changes and additions, but the bulk of the work had been done.

I take the approach that one should:

Understand the fundamental concepts used to develop the software.
Reuse and adapt existing software. (The Web provides so many templates to choose from.)

Unfortunately there are still occasions where use of simple text in combination with CSS is not enough to meet requirements. It is time to look at a subject loathed by HTML purists, the use of graphical text.

Next page » Text as Graphic

Previous page « Basic HTML

John McSweeney

Content

May 10, 2008, 12:28 am

Website Design

Introduction to Cascading Style Sheets