Let's get started with JavaScript CSS Changes!

  1. Login into your Code.Org account.
  2. Click on your name.
  3. Choose: My Projects
  4. Click on your My First Web Site project.
  5. Click on the Add HTML button.
  6. Right click on: new-6.html
  7. Choose: Rename
  8. Name this file: js_styles.html
  9. Delete all the lines in this file.
  10. Copy the JavaScript Prompt Page Template (HTML) code (below).
  11. Paste that code into your temperature.html file.
  12. Change your page title, your Author name, and your page heading to something appropriate
  13. Click: Refresh and Save

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="style.css" rel="stylesheet"/>
  </head>
  <body>
      <nav>
      <a href="index.html">Home</a> |
      <a href="table.html">Table</a> |
      <a href="form.html">Form</a> |
      <a href="multimedia.html">Multimedia</a> |
      <a href="javascript.html">JavaScript</a> |
      <a href="temperature.html">Temperature</a> |
      <a href="js_styles.html" class="selected">JS Styles</a>
    </nav>
    <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