title: change text-font size of whole page content
body: <p>is there a way in javascript/css that i can change text size of all the labels, headings, paragraphs etc on a single click and without explicitly getting element's id and then changing its font size.</p>
  
  <p>what i am doing right now is that i get element's id through javascript and change its font size explicitly. To get a clear picture of what i am doing check this <a href="http://www.simon.kaulius.com/dynamically_change_text_javascript.htm" rel="noreferrer">link</a> or check the following code</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function changemysize(myvalue) {
      var div = document.getElementById("mymain");
      div.style.fontSize = myvalue + "px";   
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML code</p>
  
  <pre class="lang-html prettyprint-override"><code>Choose a text size:
  &lt;font size="2"&gt;&lt;a href="javascript:void(0);" onclick="changemysize(16);"&gt;A&lt;/a&gt;&lt;/font&gt;
  &lt;font size="4"&gt;&lt;a href="javascript:void(0);" onclick="changemysize(20);"&gt;A&lt;/a&gt;&lt;/font&gt;
  &lt;font size="5"&gt;&lt;a href="javascript:void(0);" onclick="changemysize(25);"&gt;A&lt;/a&gt;&lt;/font&gt;
  &lt;div id="mymain"&gt;
  Only this text gets affected
  &lt;/div&gt;
  </code></pre>