Changing text-size ???

[j4mes_bond25]

I happened to stumbled upon this website http://www.tristarwebdesign.co.uk/ whereby on the (near) top-left corner, the option of user being able to select text caught my attention. This could help the viewers of my website to select the tex-size they feel comfortable with.

Similar JavaScript can be found in http://www.dynamicdrive.com/dynamicindex9/textsizer.htm but this ONLY has two links of "Larger Font" and "Smaller Font", which users CONTINUOUSLY have to press to see the desired font size.

However, from the above website, you can see that the user can select the font-size STRAIGHT-AWAY by simply "choosing" (rather than continuously clicking) the font-size they desire.

You can see from this site: http://members.lycos.co.uk/darsh25/Personal%20Website/services.php that although, I've achieved the desired look but not the function as yet (top-left corner). Text file of "services.php" i.e. the coding can be seen from http://members.lycos.co.uk/darsh25/Personal%20Website/services.php.txt

Can anyone hence help me achieve the result EXACTLY as it occurs in http://www.tristarwebdesign.co.uk/ ??? I only wish to have this changes appearing ONLY in my "centerContent" container (hence NOT in the "footer" area). I could do with either using CSS (if such a thing is possible without creating a whole new stylesheet & increasing the size of ALL elements) or JavaScript (which would only need one single file, rather than many different stylesheets.)

My other related documents (like stylesheet & "inc" file, etc.) can be seen on:
http://members.lycos.co.uk/darsh25/Personal%20Website

[alpha_foobar]

Its funny you ask your question this way, because using 3 css files is exactly how the website you want to copy does it..

They use the javascript method you can see when you mouseover the link to disable the unwanted styles...

function setStylesheet(title) {
   var i, cacheobj;
   for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) 
   {
      if(cacheobj.getAttribute("rel").indexOf("style") != -1 && cacheobj.getAttribute("title")) {
         cacheobj.disabled = true;
         if(cacheobj.getAttribute("title") == title)
            cacheobj.disabled = false; //enable chosen style sheet
      }
   }
}

function chooseStyle(styletitle, days){
   if (document.getElementById){
      setStylesheet(styletitle);
      setCookie("mysheet", styletitle, days);
   }
}

<link rel="stylesheet" type="text/css" href="css/style.css" />

<link rel="alternate stylesheet" type="text/css" media="screen" title="style1" href="css/style2.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="style2" href="css/style3.css" />

[Gizmologic]

well as you just want to make some of your content sizeable there is an easy solution.
put a div tag arround that content and give it for example an ID

<div id="sizeable">center content</div>

Now put this javascript function into your head tag

<script language="JavaScript" type="text/javascript">
<!--             
function changeFontSize(thesize){
     var fontSizer = document.getElementById("sizeable");
           fontSizer.style["fontSize"] = thesize + "px";
}
//-->
</script>

now you have to call that function by using on those 3 Elements the onMouseDown="changeFontSize(30)" event handler.
find the font size you want by changing the value .. 30 is very big but good to check if it works.. gl