use alternative style sheets to give users control of critical elements such as text size or colour on your web pages.
I apologise if this weeks tip is a bit more 'techy' than usual; it just happens to be about a topic I am particularly interested in at the moment.
If you have visited the CSS Zen Garden (http://www.csszengarden.com) website you will be well aware of the transforming power of applying alternative style sheet to web content. If you have never visited CSS Zen Garden I recommend you surf over there now (and have your view of what web design is about turned upside down).
In this weeks tip: by providing alternative style sheets for your own visitors; you are providing a way for your visitors to modify the presentation of your content to suit their own needs. My weekly tip is not the place for an in-depth look at the technical details - you will find many of these on the web - but what I can do is give you a quick overview.
As you probably already know, you can use a style sheet to alter the presentation of content that has been 'marked up' with standard HTML, i.e. all the structures in you pages are labeled appropriately (e.g.
My Heading
,My first paragraph...
and so on). The rules in the style sheet can be used to alter the appearance your tagged text, e.g. make all your main headings red and very big, or all your text displayed using the Georgia font.So how do you offer alternative style sheets to your website visitors?
When you provide a choice of external style sheets, Mozilla browsers display your alternatives in the View menu - making it easy for visitors to switch between different styles (Internet Explorer unfortunately does not provide this facility, although there are ways to get around this problem).
You will find a good explanation of implementing alternate style sheet on 'A List Apart' at http://www.alistapart.com/articles/alternate/. I have attempted to summerise the main points below.
There are three types of style sheet you can link to; persistent, preferred and alternate.
Persistent
As the name suggests the rules within this style sheet are always applied to your page content, no matter what other style sheet is active (the rules in the persistent style sheet are combined with those of the active style sheet). Here is an example style sheet link:
<link rel="stylesheet" type="text/css" href="persist.css" >
Preferred
The preferred style sheet is default style sheet - the one used when the page is first loaded. To indicate that you are providing a preferred style sheet, set the 'rel' attribute to 'stylesheet' and add a title attribute:
<link rel="stylesheet" type="text/css" href="pref.css" title="first alternative" >
Alternate
Alternative style sheets can be chosen by the visitors to your site. Set the 'rel' attribute to 'alternative stylesheet' and add a title attribute:
<link rel="alternate stylesheet" type="text/css" href="alt.css" title="another style" />
Each of the above style sheets could, for example, enable a visitor to change the colour of the background, or alter the size of the text; making the site more accessible to a person with a visual impairment, or someone who has Dyslexia.
This weeks tip may not be the simplest one I have ever put together, but hopefully it will at least give you a sense of what is possible by using standard markup and Cascading Style Sheets.
Links
- Making Connections Unit news: a turbo-charged sheet switcher: http://www.mcu.org.uk
- Javascript style sheet switcher: http://www.alistapart.com/articles/alternate/
- PHP style sheet switcher: http://www.alistapart.com/articles/phpswitch/
- W3C background information: http://www.w3.org/Style/CSS/
The tips archive is at: http://www.mcu.org.uk/weeklytips/