building a basic css layout

This short tutorial will show you how to create a basic but effective CSS layout.

  1. On your Desktop (at school) click on HOME#, and then click to until you open the “public.www” folder. Create a new folder called “styles” (use all lowercase!).
  2. Using Firefox, go to http://users.rowan.edu/~wolffw/sample/template/index.html.
  3. Select View | Source (or Page Source). Copy the entire code.
  4. Open an HTML editor (HTML-kit on the PC, TextWrangler on a Mac) and start a new HTML document.
  5. Delete any code that shows up. Paste the code you just copied from step 3 into your new document. If your HTML editor has a Preview function, select it and you’ll see the same gray boxes and lines the Layoutomatic created.
  6. Go to File | Save As and scroll to the public.www folder in Home Directory. Save the file as “index.html” (Note: all lowercase!). By doing this you are saving directly to the school server. At home, you may need to drag and drop to the server using SecureFX or Fetch.
  7. Open a new file and save that file in the “styles” folder you created in step 1 as “stylesheet.css”. (Note: all lowercase!)
  8. Go back to “index.html” and cut the following code:
    <style type="text/css">
    #container {
    width: 760px;
    \width: 780px;
    w\idth: 760px;
    border: 1px solid gray;
    margin: 10px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    }
    #banner {
    padding: 5px;
    margin-bottom: 5px;
    background-color: rgb(213, 219, 225);
    }
    #content {
    padding: 5px;
    margin-left: 215px;
    background-color: gray;
    }
    #sidebar-a {
    float: left;
    width: 200px;
    \width: 210px;
    w\idth: 200px;
    margin: 0;
    margin-right: 5px;
    padding: 5px;
    background-color: rgb(235, 235, 235);
    }
    #footer {
    clear: both;
    padding: 5px;
    margin-top: 5px;
    background-color: rgb(213, 219, 225);
    }
    </style>
  9. Press Save.
  10. Copy the following code and paste it in to “stylesheet.css”:
    #container {
    margin-left: auto;
    margin-right: auto;
    width: 760px;
    border: 1px solid gray;
    margin: 10px;
    padding: 10px;
    }
    * html div #container { /* This is the Tan hack */
    width: 782px;
    w\idth: 760px; }
    #banner {
    padding: 5px;
    margin-bottom: 5px;
    background-color: rgb(213, 219, 225);
    }
    #content {
    padding: 5px;
    margin-left: 215px;
    background-color: gray;
    }
    #sidebar-a {
    float: left;
    width: 200px;
    margin: 0;
    margin-right: 5px;
    padding: 5px;
    background-color: rgb(235, 235, 235);
    }
    * html div #sidebar-a { /* This is the Tan hack */
    width: 210px;
    w\idth: 200px; }
    #footer {
    clear: both;
    padding: 5px;
    margin-top: 5px;
    background-color: rgb(213, 219, 225);
    }

    These changes may not make sense now, but will be discussed on page 2 of the tutorial.
  11. Enter the following line just below the <head> tag:
    <link rel="stylesheet" href="styles/stylesheet.css" type="text/css" />
  12. Save the document. Open a new Firefox tab (OpenApple + T) and in the address bar type: http://users.rowan.edu/~yourusername/index.html. You should see a group of grey boxes. From this point forward all you need do is refresh this page to see your updates.
  13. If you look back at “test.html” you will see code similar to this:
    <div id="container">
    <div id="banner"> </div>
    <div id="sidebar-a"> </div>
    <div id="content"> </div>
    <div id="footer"> </div>
    </div>
    The code corresponds to the gray lines and boxes in the following manner:
    layout with labels
  14. To help you remember what is what for now, please add text so your “index.html” page looks something like this: <div id="container">
    <div id="banner">This is my banner.</div>
    <div id="sidebar-a">This sidebar-a, where links can go </div>
    <div id="content">This is where my main content will go. </div>
    <div id="footer"> This is my footer.</div>
    </div>
    Refresh “http://users.rowan.edu/~yourusername/index.html” and you will see something like the following:
    layout with text in their appropriate div
  15. Go to “stylesheet.css” and find the following bit of code: #content {
    padding: 5px;
    margin-left: 215px;
    background-color: gray;
    }
    This code controls the appears of the content section of your web page. Lets make some changes to the code, so it looks something like this: #content {
    padding: 0 5px;
    margin-left: 215px;
    background-color: white;
    border: 1px solid #333;
    } #content p {
    font-family: verdana, arial, sans-serif;
    color: #000;
    font-size: 12px;
    }
    Now go back to “index.html” and change <div id="content">This is where my main content will go. </div> so it looks like this: <div id="content"><p>This is where my main content will go.</p> </div> Refresh the page in the browser you will see something like the following:
    layout with stylized content area

Continue on page 2.

Leave a Reply

Your email address will not be published. Required fields are marked *