Let's get started with JavaScript CSS Changes!

  1. Open Notepad++
    1. Open your index.html file
    2. Choose: File -> New
    3. Copy the JavaScript Styles Page Template (HTML) code (below)
    4. Paste that code into your new file
    5. Choose: Save
    6. Save the file as: js_styles.html
    7. Change the Save as type:
      to: Hyper Text Markup Language file (*.html)
    8. Change your page title, your Author name, and your page heading to something appropriate
    9. In your index.html file
    10. Add a link to this page.
      Change: <li>Use JavaScript to Change Document (DOM) Page</li>
      to: <li><a href="js_styles.html">Use JavaScript to Change Document (DOM) Page</a></li>
    11. Save your changes
    12. Click: Run
    13. Choose: Launch in IE
      or Launch in Chrome
      or Launch in Firefox
    14. View your web page
    15. Make any changes
    16. Save your changes

JavaScript Styles Page Template (HTML)

<!doctype html>
<html>
  <head>
    <title>page title goes here</title>
    <!-- Author: put your name in this comment line --> 
    <link href="includes/styles.css" rel="stylesheet"/>
  </head>
  <body>
    <h1>put page heading here</h1>
    <form id="myForm">
       <fieldset>
         <legend>Page Background Color</legend>
         <label for="bgRed">Red:</label>
         <input type="radio" id="bgRed" name="bgColor"
          onclick="document.body.style.backgroundColor='#F00';"><br/>
         <label for="bgGreen">Green:</label>
         <input type="radio" id="bgGreen" name="bgColor"
          onclick="document.body.style.backgroundColor='#0F0';"><br/>
         <label for="bgBlue">Blue:</label>
         <input type="radio" id="bgBlue" name="bgColor" 
          onclick="document.body.style.backgroundColor='#00F';"><br/>
       </fieldset>
       <fieldset>
         <legend>Page Text Color</legend>
         <label for="txtWhite">White:</label>
         <input type="radio" id="txtWhite" name="txtColor" 
         onclick="document.body.style.color='#FFF';"><br/>
         <label for="txtGrey">Grey:</label>
         <input type="radio" id="txtGrey" name="txtColor" 
         onclick="document.body.style.color='#DDD';"><br/>
         <label for="txtYellow">Yellow:</label>
         <input type="radio" id="txtYellow" name="txtColor" 
          onclick="document.body.style.color='yellow';"><br/>
       </fieldset>
       <fieldset>
         <legend>Page Font Family</legend>
         <label for="fontCalibri">Calibri:</label>
         <input type="radio" id="fontCalibri" name="fontName" 
          onclick="document.body.style.fontFamily='Calibri, Arial, sans-serif';"><br/>
         <label for="fontScript">Script:</label>
         <input type="radio" id="fontScript" name="fontName" 
          onclick="document.body.style.fontFamily='\'Script MT Bold\', cursive, serif';"><br/>
         <label for="fontCourier">Courier:</label>
         <input type="radio" id="fontCourier" name="fontName" 
          onclick="document.body.style.fontFamily='Courier, helvetica, sans-serif';"><br/>
       </fieldset>
       <fieldset>
         <legend>Page Font size</legend>
         <label for="font10pt">10 pt:</label>
         <input type="radio" id="font10pt" name="fontsize" 
          onclick="document.body.style.fontSize='10pt';"><br/>
         <label for="font16pt">16pt:</label>
         <input type="radio" id="font16pt" name="fontSize" 
          onclick="document.body.style.fontSize='16pt';"><br/>
         <label for="font24pt">24pt:</label>
         <input type="radio" id="font24pt" name="fontSize" 
          onclick="document.body.style.fontSize='24pt';"><br/>
       </fieldset>
       <fieldset>
         <legend>Show/Hide</legend>
         <label for="showDiv">Show:</label>
         <input type="radio" id="showDiv" name="showDiv" 
          onclick="document.getElementById('thisDiv').style.display= 'block';"><br/>
         <label for="hideDiv">Hide:</label>
         <input type="radio" id="hideDiv" name="showDiv" 
          onclick="document.getElementById('thisDiv').style.display= 'none';"><br/>
         <span id="thisDiv" style="display: none;">This div can be shown or hidden!</span><br/>
       </fieldset>
    </form>
    <p>This page was last modified on: 
     <script>document.write(document.lastModified);</script>.</p>
  </body>
</html>

Example