Loading different style sheets in the same page

[ControlZ]

Can someone tell me how to create the following:

I have an page that I will use a default syle sheet for, but I want to include the option to allow older users to change the size and color of the font.

Basically I'll create a link that a user will click on thus calling another style sheet and replacing the default style sheet without reloading the html document.

I've seen sites do this, but can't quite figure out how to acheive this.

[tedster]

It takes some javascript - and if you want the user's stylesheet choice to persist when they go to another page, that can be done with cookies.

Here's an earlier thread on the topic:
[webmasterworld.com...]

[zackattack]

Hi ControlZ

Here are a few options:

1) Ensure your CSS font values are relative, i.e. using with % or em - then point out to visitors how font sizes can be changed using their browser options.

2) Put the link to an alternate style sheet at top of page and have larger font settings in here. Point out to visitors how they can choose an alternative style sheet with larger fonts using their browser options.

3) Have another page/copy of site linked from your existing site with larger fonts set from CSS.

4) Use the Javascript switcher method, which enable a user to select the alternative style sheet.

Notes:

1) Is a good standards compliant method. You may have to fiddle with all your font sizes quite a bit if your CSS has a very deep hiarachy, also browsers tend to render fonts not always the same size (someone more experienced here will know exactly what these differences are)

2) Use this link after the first style sheet link <link rel="alternative stylesheet" type="text/css" href="stylesheet.css"> Problem with this is that not all browsers support options for choosing an alternative style sheet MSIE being the main one - (and dominating browser)

3) Not a very useful option...

4) Code is on AListApart site (its often called a 'text sizer'), I believe a gentleman by the name of Paul Sowden has a written a very good article about this along with all the JS for this. This option is great for anyone who has Javascripts enabled and involves having alink on your page which calls the JS, which in turn uses your alternative style sheet (as detailed in point 2) above.

Hope this helps...

ZA

[ControlZ]

Thanks ZA. I found the JS switcher you mentioned. It's going to involve some work and testing, but it looks easy enough. Only hang up may be the cookies, but I'll figure it out.

When I completed, I'll let you know how things work out.