Cascading Style Sheets and xHTML

Written by: Jonathan Briggs

October 28, 2004 [2491 views]

When we, at the OTHER media, are designing e-commerce or information sites we try to use the most modern design techniques, and for page layouts and design that means xHTML and cascading style sheets or CSS.

Since the web was invented in the mid 1990’s, web pages have been created, either by hand or using tools such as Dreamweaver and Go Live, using various versions of HTML. As new ideas were developed, HTML was extended and became more complex and browsers had to be updated to cope both the new features and with the mistakes that web designers made in their pages.

Designing good web sites means that they should run on multiple platforms (mobile, interactive TV, kiosks etc) and browsers (IE, Opera, Safari, Netscape) and ensuring this as HTML evolved became a bigger and bigger job. We all needed a new version of HTML that was easier to port across browsers and more strictly defined. The result is xHTML which is a tightly specified syntax written in XML. It looks like HTML but with a few differences:

• An XML declaration must be included at the top of the page
• All tags are in lower case
• All open tags must be properly closed
• Tags cannot be nested.

Here is a good tutorial on xHTML

www.w3schools.com

xHTML is used to mark up the content of your pages but should not be used for the design. This should be left to CSS.

A style sheet describes how the pages should look. You can associate a style with each element of xHTML and when the browser renders the page this style will be applied. So if all links should be red then a colour style of red will be applied to all the link anchor tags.

Here are a couple of good introductions to CSS

www.w3.org and www.yourhtmlsource.com

David Lundblad who used to work for us explains why he uses CSS rather than TABLE tags on his site www.davidlundblad.com
One of the beauties of using xHTML and CSS is that different style sheets can be developed for different browsers and for meeting the needs of different audiences. We normally develop a simple text version first (great for search engines and the partially sighted), then a low graphics version and finally a fully graphical version; four versions of the site with one representation of the data and four different style sheets.

To see how this works compare the following versions of our site for the England and Wales Cricket Board:

• www.ecb.co.uk
• www.ecb.co.uk (text version)
• www.ecb.co.uk (mobile)

Our approach to xHTML and CSS

I asked our information architect and CSS guru Chris Harris for some pointers. He suggested that you look at A List Apart www.alistapart.com and also get into the habit of examining the source code for sites that use CSS. He suggested a couple of our recent sites virginexperiencedays.com and www.abbeyboxoffice.co.uk.

Here are a few tips that he has provided to create sites this way:

1. Use heading tags (h1,h2,h3 etc) to outline the various levels of your content
2. Avoid using TABLE tags at all
3. Separate content images from site ‘furniture’ (graphics that are used to define your overall look and feel)
4. Learn how to develop your site using functional blocks but try to avoid making your site look blocky
5. Learn to use the FLOAT attribute to position blocks relative to each other on the page
6. Recognise that different browsers will need slightly different style sheets. We automate the variations by creating the particular style sheet dynamically.
7. Separate your style sheet into two types of classes: columns of varying widths and blocks within them.
8. Initialise every block element (p, body, headings) with 0 padding, border and margins. This will ensure that you don’t get confused later when you add padding to specific elements.
9. When you are designing a new block on the page design each block element styling to be independent of the other classes in your style sheet. This is easier that trying to ensure that properties are correctly inherited from other classes.
10. When defining a block style avoid using height and width properties. Instead, place an outer div tag around it and apply a column width to this tag.
11. Float all column classes to the left.

To see what can be achieved using style sheets take a look at www.paulsmith.co.uk. Chris has spent many days getting the style sheets for this site working.

Recent comments:

What do you think?

Add your comments