Creating a One Column Site

Written by Amanda Kern

It's time to put what we've learned thus far to create a one column web page. You will begin with an html file and all images needed. [Download Files]

Creating and linking to a new CSS file

  1. The first step is to create a CSS folder. Name the folder css. Create a new document and save it as style.css
  2. Go to the html file provided and in the <head> portion of the document add:

    <link href="css/style.css" rel="stylesheet" type="text/css" />

    Remember, this links our css file to our html file so that our styles show up

Styling our <body>

  1. When creating your styles always think about the common styles that will apply to your entire page. By redefining our <body> tag we can apply styles to our entire page. Here's what we're going to add to our css document:

    body {
    background-image: url(../images/bgpattern.gif);
    text-align: center;
    margin: 0;
    font: 12px/1.5em "Trebuchet MS", Verdana, Arial, sans-serif;
    }

    So let's translate this into English so it begins to make a bit of sense. Basically as soon as our <body> tag appears in our html document it will apply the following styles

    background-image: a background image is applied to our entire document, by default it repeats
    text-align: center This aligns our page so it is centered. For now all of our text is centered but we can fix that in a moment.
    margin: 0 - by default there is about 10-20px of a margin around the browser. Changing the margin to 0 will get rid of the margin.
    font: The styles for the font basically tell our font to be 12px in size with 1.5em line spacing. The fonts are specified in the order we would like them to appear as they are available. Quotemarks around fonts are only necessary if the font has a space in it's name.
  2. Save your files and preview your html file in the browser. Notice the changes. Your background should appear and your text should have changed. Not that impressive yet - but it's a start, let's keep working!

Creating an id and applying to a <div>

  1. Let's go back to our css document and add some style by creating an id. This id will be used to help us create our column. Here's what we'll add below the last style you created:

    #main {
    background-color: #FFFFFF;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    width: 700px;
    margin: 0 auto;
    text-align: left;
    }

    Remember, an id can always be identified with the pound sign prior to the name of the id. Most of the properties and values have been introduced. The only new one is the margin. The margin values are needed in order for our centered effect to work properly. Basically it sets the margin at the top and bottom to 0 and on the left and right it will have an "auto" margin. The text-align will also now be left aligned.
  2. Let's go back to the html file and just below the <body> tag add:

    <div id="main">

    and just above the </body> tag add:

    </div>

    This basically encloses the content of our page into a <div> tag so we can create our one column layout. All styles applied to the #main id will be applied to this content.
  3. Save all files and test your html file. It should be looking a bit cleaner.

Adding our header image

  1. To add our header image lets go back to our html file. Just below the <div> tag you just created insert the following:

    <img src="images/header.jpg" alt="experimenting with css" height="250" width="700" />

  2. Save your file and test your html file.

Adding padding/margin to elements in our page

  1. It's time to add some padding/margin to some elements we have in our page so that they aren't nudged right up against the border of our page. Let's add this to fix the problem:

    p {
    padding: 0px 25px 0px 25px;
    }
    ul, ol {
    margin-left: 40px;
    padding-right: 60px;
    }
  2. Save your files and test your html file.

Creating custom bullets for lists.

  1. As you might have noticed, lists appear pretty generic with standard html. Well, luckily CSS will allow us to customize the style of the bullets. It's super simple, let's add this style:

    ul {
    list-style: url(../images/bullet.jpg);
    }
  2. Save your files and test your html file. Looking better, right?

Styling your links

Before we get to far with styling our links let's clarify a few points about links. In html there are four states to a link: link, visited, hover, and active. So let's note the syntax to style each:

a applies to all link states
a:link applies to just the normal state of a link before it is visited, hovered, or active
a:visited applies to just the visited state of a link. Once a user visits a site if a visited style is available it will appear
a:hover is the rollover state of a link
a:active is the active state or the page you are on

You must style the links in order if you plan to use all four states. If you only plan to have a normal and hover state it is best to just style the a and the a:hover states.

  1. In your CSS document add the following style:

    a {
    font-weight: bold;
    color: #AD3110;
    text-decoration: none;
    }
    a:hover {
    font-weight: bold;
    color: #6B0808;
    text-decoration: underline overline;
    }


    The only new syntax is the text-decoration which tells our links to have both an underline and overline for the hover state.
  2. Save your files and test. If it looks similar to the screenshot provided then you're done!