Chapter 3 - Adding Style (CSS)

What We Will Do

In this chapter we will:

• Create a CSS style sheet for the site
• Add a link to the style sheet in our pages

Create a CSS Style Sheet

In the demoweb folder, create a new file named site.css.
Put the following code inside the CSS file:

site.css

body {
    font-family: "Trebuchet MS", Verdana, sans-serif;
    font-size: 16px;
    background-color: dimgrey;
    color: #696969;
    padding: 3px;
}

#main {
    padding: 5px;
    padding-left:  15px;
    padding-right: 15px;
    background-color: #ffffff;
    border-radius: 0 0 5px 5px;
}

h1 {
    font-family: Georgia, serif;
    border-bottom: 3px solid #cc9900;
    color: #996600;
    font-size: 30px;
}

The CSS file above defines the styles to be used used for:

• The HTML body element <body>
• The HTML element with id="main"
• The HTML heading element <h1> 
•  

• Edit the Home Page

  In the demoweb folder, edit the file index.html.
  Change the content of the file to the following:
  

  index.html

  <!DOCTYPE html>
  <html>
  
  <head>
    <title>Our Company</title>
    <link href="site.css" rel="stylesheet">
  </head>
  
  <body>
  
    <div id="main">
    <h1>Welcome to Our Company</h1>
    <h2>Web Site Main Ingredients</h2>
  
    <p>Pages (HTML)</p>
    <p>Style Sheets (CSS)</p>
    <p>Computer Code (JavaScript)</p>
    <p>Live Data (Files and Databases)</p>
    </div>
  
  </body>
  </html> 
  The home page above, is a copy of the home page from the previous chapter.
  We have added a link to a style sheet, and a <div id="main"> element to define a "section" in the content.
  The changes are marked red.
  
  

  Edit the About Page

  To complete your work, do the same changes in about.html.
  1. Add a link to the style sheet.
  2. Add a <div id="main"> element.
  

  about.html

  <!DOCTYPE html>
  <html>
  <head>
    <title>About</title>
    <link href="site.css" rel="stylesheet">
  </head>
  
  <body>
  
    <div id="main">
    <h1>About Us</h1>
    <p>Lorem Ipsum Porem Lorem Ipsum Porem</p>
    </div>
  
  </body>
  </html>

  
  
    Need help? Try KimmyJusTips!