What html code do I use to offer viewers text size options (ex., sm, med, lg text)?

[Debbie Stevens]

What html code do I use to offer viewers of my webpage different text sizes?

[Frinavale]

Is your web page static or is it dynamically created by a server side script?

Are you permitted to use JavaScript in your solution.

Typically you would use CSS to set the font-size for your web page.

For example, if you want your page's content to be small font size you might have the following css:

body{
  font-size:small;
}

For medium:

body{
  font-size:medium;
}

For large:

body{
  font-size:large;
}

Now the thing is that you need to apply the CSS to your page when the user indicates that they want to change the font size.

You could submit the page to sever-side code which would apply the corresponding font-size-css style to the value that the user selected.

Or you could use JavaScrpt to change the font-size css style....

Or you could redirect the user to a page that is exactly the same but uses the font-size style that the user selected.

-Frinny

[Markus Igeland]

This is a solution using jQuery, and my preferable way of doing it (because it's small and fast and everyone on the Internet already have jQuery in their cache).

CSS-code:

.smalltext { font-size: small; }
.mediumtext { font-size: medium; }
.largetext { font-size: large; }
 

JavaScript-code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript">
<script type="text/javascript">
$(#small).onclick(function(){${'body').addClass('smalltext');});
$(#medium).onclick(function(){${'body').addClass('mediumtext');});
$(#large).onclick(function(){${'body').addClass('largetext');});
</script>
 

HTML-code (snippet):

<a href="#" id="small" class="smalltext">aA</a>&nbsp;
<a href="#" id="medium" class="mediumtext">aA</a>&nbsp;
<a href="#" id="large" class="largetexttext">aA</a>