Your Online Presence > Designing A Site

Getting a Website - Stylesheets

By Lasa Information Systems Team

Style sheets allow you to control the look of your site from a single file, maintaining a consistent look across your site with minimal effort. They give you finer control of how your pages are displayed than any other method available. Best of all they help you separate your content from instructions on how that content is presented. This has great benefits when it comes to accessibility and listings on search engines. You really should use style sheets on your website.

CSS

CSS, or Cascading Style Sheets, is a language related to HTML focussed on telling web browsers how to display content on web pages.  Each element (or tag) in HTML has a number of attributes that can be changed using CSS resulting in a different look when the page is viewed in a browser.  Much of this can be achieved using HTML itself, but CSS has emerged as the preferred method, with a number of advantages over HTML methods such as the font tag.

Key to consistency

There are few things that separate a professional looking site from one knocked together in a few hurried lunch breaks than a lack of consistency in formatting.  When using old methods, such as the font tag, to add a little sparkle to web pages, each and every time you want a heading with a pink background and blue bold Comic Sans font, you must say so in the underlying HTML.  A few days later someone with much poorer taste than you might create a new page and decide headers should be a duller Times New Roman bold in black on white.  This results in a site with pages that look very different to each other.  This does not convey the image of an organisation where the left hand knows what the right is doing.

Style sheets mean that all a site’s formatting is defined in a single place.  Those creating new pages never have to worry about getting the style right, as it is taken care of already in the style sheet.

All pages on a site may use a single style sheet which tells the browser to always display the h1 tag in a certain way, for example.  Should a boardroom battle over the merits of cheerful Comic Sans versus the serious world of Times New Roman result in a decision to change the look of your site, this single style sheet can be edited, resulting in all pages on the site that use that style sheet taking on the new look.  It is that easy.

Fine tuned control

Style sheets expand the number of options you have over older HTML methods.  The CSS language allows you to position elements on a page, draw borders around them, keep them apart using margins and padding, and a change how text looks using a wide range of typographical settings. 

CSS also allows a great deal of flexibility.  If a browser does not understand an instruction in CSS (or doesn’t understand CSS at all) it will simple ignore it.  Your website may not look exactly as you intended, but visitors will still be able to read your wonderful content.

Extra interactive

CSS also gives you a few more options than available using HTML alone.  A common desire is for links to change colour when a visitor hovers the mouse pointer over them.  This is easily achievable using CSS, and impossible when only using HTML.

It is also possible to use more than one style sheet on a single page – on this very site we use several style sheets to give different options.  The control at the top right of every page allow visitors to increase the font size and view pages in a higher contrast colour scheme should they need to.  When printing pages from this site, a different style sheet is used to hide things such as navigation bars and controls which make no sense on the printed page.

Multiple style sheets can also be used to style a sites pages differently if it is being viewed on small screen, such as a PDA or mobile phone.  A stylesheet can even be used to control the tone used by audio browsers when they reach an emphasised bit of text.

Each of these extra features is only possible using style sheets.

The CSS Zen Garden is a fantastic illustration of the level of control given by style sheets, and how multiple style sheets to change the look of the same page.

The Holy Grail - separate content from presentation

The Holy Grail in web building is for HTML files to only contain content and information about content – i.e. what is a header, which bits are paragraphs or quotations etc.  Instructions for how that content is displayed should be stored elsewhere – i.e. in the style sheet.  In theory it should be possible for anyone to read an excellent HTML file in its raw form and understand it.  Looking at many web pages which use hundreds of tags to describe how the page should look, this isn’t feasible.

This isn’t just for fun.  By keeping design away from content you can save yourself time by using templates to create pages, and use the same HTML content files for different purposes.

Flexibility = Accessibility

The separation of style from content makes web pages more accessible for the same reasons.  Simple HTML pages can be viewed in a greater range of browsers than complex ones.

Search engine optimised

A further benefit is that search engines only look at HTML files, and concentrate on the meaning within them.  A badly created page may spend 80% of the time using HTML to define how a page should look, leaving only 20% of the page that people are actually looking for.  Compare this to a well crafted page where only 10% is HTML instructions.  Search engines will better rank the second of these two pages.

So to sum up, you have nothing to lose and much to gain from using style sheets on your website.  If you are building your pages yourself, links to some great learning resources are given below.  If a web developer is making your site for you, make sure they are using style sheets.

Learning more

To really get into CSS you should start by learning the basics.  The following sites have very good tutorials.

• W3 Schools CSS Tutorial
• Webmonkey introduction to style sheets
• Brain Jar

Once you understand the basic syntax you will need a reference of the main properties you can work with.  The following are good references.

• Dot CSS
• O’Reilly CSS Pocket Reference – nice little book, that also includes browser support tables

Browser support for CSS varies – the following sites give tips on how to get pages looking the same across different browsers:

• CSS/Edge
• Position is Everything

As mentioned above, CSS can do lots of interesting things.  The following sites regularly describe new techniques you can use to improve your pages:

• A List Apart
• Eric Meyer on CSS - a great book detailing a number of nice techniques.

This page is one part of a longer document about getting a website. If you want to read through the whole thing, you'll want to start with the Introduction.

If you are reading the whole thing from start to finish, then you should move on to the next article: Test Everything