Alternate Stylesheets

For changing just text size

[abbeyvet]

I want to provide users with an on-page way to change the text size, and only that, of a site.

The current stylesheet uses percentages throughout, and does not define a size for 'body'. Thus if a user has font size increased permanently in their brower then there is no issue. But there are people who may just wish to increase the size from on the page.

I know I could provide an alternate stylesheet to the current one, but loading a whole new stylesheet seems very inefficent just to change one thing.

All I should need to do is add a stylesheet that is only invoked if the user wants it, with a single line:
body {font-size:120%}

Or ideally a series, with
body {font-size:120%}
body {font-size:140%}
body {font-size:160%}

Anyone know a way of doing this?

What I would like to do

[choster]

In theory a browser can swap a stylesheet for an alternate stylesheet with the same title, e.g.

<link rel="stylesheet" type="text/css" href="text.css" title="text">
<link rel="alternate stylesheet" type="text/css" href="bigtext.css" title="text">
<link rel="alternate stylesheet" type="text/css" href="hugetext.css" title="text">

In practice, this is almost useless as it isn't supported by Internet Explorer and few Firefox users even notice the option exists. But you can use Javascript and cookies triggered by icons or menus.

The article "Alternative Style: Working With Alternate Style Sheets" by Paul Sowden is a good start (try a web search for it).

[DanA]

You can use CSS/PHP and cookies or a mysql field.
Look for dynamic css php cookies to switch style

[garann]

Could you just use Javascript? The test below worked nicely for me.

<script type="text/javascript">
function changeFont(size) {
var bod = document.getElementsByTagName("body")[0];
bod.style.fontSize = size + "%";
}
</script>
...
<select onchange="changeFont(this.value)">
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="500">500</option>
</select>