HTML, CSS, & JavaScript – Getting Started

Adding in CSS

With our HTML page populating with content, we might want to style it to look a little nicer than our browser defaults. By adding a Cascading Style Sheet (CSS), we can request that the browser renders sections of our document in specific ways. In this exercise we will continue to add our enhancements inline, then in the following section, we will break our single document into multiple files to create a true HTML project.

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Hello World</title> 
    <style type="text/css"> 
      body { 
        font-family: Arial, Helvetica, sans-serif; 
        color: blue; 
      } 
      #intro{ 
        font-style: oblique; 
        font-weight: 800; 
        color: #ff0000; 
      } 
    </style> 
  </head> 
  <body> 
    <div id="intro">Hello World!</div> 
    <div id="context1"></div> 
    <div id="context2"></div> 
    <div id="context3"></div> 
    <script type="text/javascript"> 
      var intro = document.getElementById("intro"); 
      intro.innerHTML = "JavaScript Hello World!!"; 
      function populateDiv(theDiv, populateWith){ 
        var divID = document.getElementById(theDiv); 
        divID.innerHTML = populateWith; 
      } 
      populateDiv("context1", "this is more hello world goodness!!!"); 
      populateDiv("context2", "this is context2!!!"); 
      populateDiv("context3", "this is context3!!!"); 
    </script> 
  </body> 
</html>

Example of rendered page


Completed files from this step:

HelloWorld_Step3.zip