Lay out pages using CSS

Lay out
Create layout areas
  1. Create a new folder within the HTML Files folder called Travel.
  2. In Notepad, create a home page (file name index.html) titled Traveling Down South.

    TIP: Make sure that your new home page has all the necessary tags:






  3. Save it in the Travel folder.
  1. Below the tag, put a
    tag:

  2. Add the attribute id="links":

    id="links">
  3. Close the
    tag:

  4. Add the word Links, so it's enclosed by the
    tags:

  1. Link the page to a style sheet called format.css.

    The code should look like this:




    On this page, there will be an area for navigational links, and an area for the page's content.

    Links

    Content

    You've created the area for links:

    Links

    Content

  1. Create an area to contain the page's content:



    Content


  2. Save index.html.
  1. In Notepad, open format.css from the Dogs folder.

    Then save it in the Travel folder.
  2. In format.css, add formatting for the links area.

    Make its background gray:

    body {
    background: #ffffcc;
    }

    h1 {
    font-family: verdana,helvetica,sans serif;
    font-weight: bold;
    font-size: 16pt;
    }

    h2 { font-family: verdana,helvetica,sans serif;
    font-weight: bold;
    font-size: 14pt;
    }

    p {
    font-family: arial,helvetica,sans serif;
    font-size:10pt;
    }

    li {
    font-family: arial,helvetica,sans serif;
    font-size: 10pt;
    }

    a {
    color: #ff0000;
    }

    #links {
    background: #cccccc;
    }
  1. Add formatting for the content area.

    Make its background white:

    a {
    color: #ff0000;
    }

    #links {
    background: #cccccc;
    }

    #content {
    background: #ffffff;
    }
  2. Save format.css.
  3. In the browser, open index.html from the Travel folder.

    It should look like this:


    Web Layout HTML & CSS