CHouseLive

Building a single column webpage from scratch

This tutorial will demonstrate how to create a simple single column web page using CSS for layout.

Our web page will have a fixed width and will be made up of four sections, a header, navigation bar, content area and footer.

Example: Single Column Web Page

Step 1: Creating the HTML and CSS file

Start off by creating two pages, an HTML page and CSS page (style sheet).

The HTML page will require <head> and <body> tags and should look something similar to the following:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<title>The Hobbit</title>
</head>
<body>
</body>
</html>

Notice how the first line is a "DOCTYPE" declaration. It is important that each web page has such a declaration as this line of code tells the web browser what type of language has been used to code the document, in this case xhtml1-strict.

Within the <head> tags there are only two tags, a character set declaration and the title.

The <title> is very important as the information placed between this tag becomes the title of the page and appears in the tab of the browser.

browser tabs

The CSS file needs no special tags and all that needs to be done is to save the file with a .css extension.

Step 2: Attach the style sheet

Step 2 requires attaching the style sheet to the HTML page. A little code between the <head> tags is all that is required.

HTML: Attaching the style sheet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8"http-equiv="Content-Type" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<title>The Hobbit</title>
</head>
<body>
</body>
</html>

Step 3: Prepare the layout

Now we must prepare the style sheet, but before that we must first understand the basic types of style elements used in a style sheet.

Style Elements

There are three main types of style elements.

Pre defined browser elements

These include, amongst many others:

  • body
  • h1, h2, h3, h4, h5, h6 (different levels of importance given to headings)
  • ul, ol, li (lists)
  • p (paragraph text)
#id

id's may only be used once in an HTML document. They are normally used for structure and layout of a page.

In the CSS an id is always preceded by a hash(#) and the names of the id's are determined by the coder, although it is considered good practice to use "meaningful" mark-up. Common examples may include:

  • #wrapper
  • #header
  • #content
.class

A class may be used many times within a single HTML document. Classes are used to add additional styling to other pre defined elements and Id's as well as for structural elements of the page layout which appear more than once.

In the CSS, a class is preceded by a full-stop (.) and like id's the names of a class is to determined by the coder. Possible examples include:

  • .clear
  • .centre
  • .inner-wrapper

Setting up the basic CSS layout styles

Now we will set up the basic layout styles.

CSS: Layout Styles
body {
  font-family: Arial, Helvetica,
  sans-serif;
  font-size: 80%;
  color: #333333;
  padding: 10px 0px;
  margin: 0px;
  background-color: #333333;
}

#wrapper {
  width: 500px;
  border: 2px solid #81371A;
  background: #E2D3B2;
  margin: 0 auto 0 auto;
}

#header{
  background-color: #1D3864;
}

#menu{
  height: 30px;
  background: #841922;
}

#content{
}

#footer{
  background-color: #1D3864;
}

.inner-wrap{
  padding: 5px;
}

Body is a browser pre-defined style. Here we can set the basic styles for our web page. Definitions like font-family, color (font colour) and font-size will be applied to all other styles unless defined other wise. Margins and padding should be set as each browser uses different pre-defined values for these. The background-color determines the colour of the page background, in this case dark gray.

The wrapper is an id, hence the #, and will be used to determine the width of the web page. In order to centre the web page, the left and right margins are set to auto while the top and bottom margins are set to 0. In the HTML we will see that the wrapper encloses all the other elements of the web page.

The header, content and footer id's will be used to define the respective aspects of the web page.

The inner-wrap class will be used to create padding within the other elements of the web page. Theoretically one should be able to to define padding in each elements style, however older browsers render padding incorrectly so this method ensures the page renders correctly, regardless of the browser.

Defining the HTML

Now that we have the basic CSS layout styles we can set up the layout in the HTML.

HTML: Layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="01.css" rel="stylesheet" type="text/css" />
<title>The Hobbit</title>
</head>
<body>
  <div id="wrapper">
    <div id="header">
      <div class="inner-wrap"></div>
    </div>
    <div id="menu"></div>
    <div id="content">
      <div class="inner-wrap"></div>
    </div>
    <div id="footer">
      <div class="inner-wrap"></div>
    </div>
  </div>
</body>
</html>

Notice how everything is inside the wrapper.

The visual result of all our hard work is a little disappointing at this point but not to worry as the sections will fill out as we add content.

Example

Step 4: Adding Content

Now that we have the basic layout sorted, we can add some content.

HTML: Content

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="01.css" rel="stylesheet" type="text/css" />
<title>The Hobbit</title>
</head>
<body>
<div id="wrapper">
  <div id="header">
    <div class="inner-wrap">
    <h1>The Hobbit</h1>
    </div>
  </div>
  <div id="menu"></div>
  <div id="content">
    <div class="inner-wrap">
      <p>In a hole in the ground there lived a hobbit. Not a nasty,
      dirty, wet hole, filled with the ends of worms and an oozy
      smell, nor yet a dry, bare, sandy hole with nothing in it to
      sit down on or to eat: it was a hobbit-hole, and that means
      comfort.</p>
      <p>It had a perfectly round door like
      a porthole, painted green, with a shiny yellow brass knob in
      the exact middle. The door opened on to a tube-shaped hall
      like a tunnel: a very comfortable tunnel without smoke, with
      panelled walls, and floors tiled and carpeted, provided with
      polished chairs, and lots and lots of pegs for hats and
      coats - the hobbit was fond of visitors. The tunnel wound on
      and on, going fairly but not quite straight into the side of
      the hill - The Hill, as all the people for many miles round
      called it - and many little round doors opened out of it,
      first on one side and then on another. No going upstairs for
      the hobbit: bedrooms, bathrooms, cellars, pantries (lots of
      these), wardrobes (he had whole rooms devoted to clothes),
      kitchens, dining-rooms, all were on the same floor, and
      indeed on the same passage. The best rooms were all on the
      lefthand side (going in), for these were the only ones to
      have windows, deep-set round windows looking over his
      garden, and meadows beyond, sloping down to the river.</p>
      <p>This hobbit was a very well-to-do
      hobbit, and his name was Baggins. The Bagginses had lived in
      the neighbourhood of The Hill for time out of mind, and
      people considered them very respectable, not only because
      most of them were rich, but also because they never had any
      adventures or did anything unexpected; you could tell what a
      Baggins would say on any question without the bother of asking him.
      This is a story of how a Baggins had an adventure, and found himself
      doing and saying things altogether unexpected. He may have lost
      the neighbours&#39; respect, but he gained - well, you will
      see whether he gained anything in the end.</p>
    </div>
  </div>
  <div id="footer">
    <div class="inner-wrap"><h6>J.R.R. Tolkien</h6></div>
  </div>
</div>
</body>
</html>

Notice how I have placed the content inside the "inner-wrap" and have used heading tags, <h1> and <h6>, to show the importance of text. My paragraph text has been placed within paragraph tags, <p>, and rather than using breaks to space paragraph text, I have simply used a new paragraph tag for each new paragraph. The result is neat and tidy coding!

Example: Content

Step 5: Styling the content

As you can see from the example above, things are not yet perfect. The content colours don't stand out on the different section backgrounds and the padding and margins around the the headers looks terrible. To sort this out we will add a few more styles to our CSS.

CSS


h1 {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #FFFFFF;
  font-size: 2.5em;
  font-weight: bold;
  padding: 10px 0px;
  margin: 0px;
  text-align: center;
}

h6 {
  font-family: "Times New Roman", Times, serif;
  font-size: .9em;
  font-weight: normal;
  font-style: italic;
  color: #FFFFFF;
  text-align: right;
  padding: 0px;
  margin: 0px;
}

p {
  font-size: 1em;
  line-height: 1.25em;
  margin: 0;
  padding: .4em 0 .8em 0;
}

For each of the pre-defined styles I have included padding and margins, the reason being that if you want to control how your text looks in the browser, you need to over-ride the pre-set styles already defined by the browser. You will also notice that I use "em"as my unit of measurement. "em" is a scalable measurement, which allows the end user (i.e. the person browsing your web site) to determine how big the font will appear. This is considered good practise and will make your web site more accessible for people with sight disabilities.

As you can see in the example below, the result of our styling has had a profound effect on how the web page looks.

Example: Styling the content

Step 6: Add the menu

The last thing we need to do is add the menu.

For this menu, we will use an unordered list. The HTML is fairly simple.

HTML: Menu


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="01.css" rel="stylesheet" type="text/css" />
<title>The Hobbit</title>
</head>
<body>
<div id="wrapper">
  <div id="header">
    <div class="inner-wrap"><h1>The Hobbit</h1></div>
  </div>
  <div id="menu">
    <ul>
      <li><a href="#nogo">Home</a></li>
      <li><a class="current"href="#nogo">The Hobbit</a></li>
      <li><a href="#nogo">Lord of the Rings</a></li>
      <li><a href="#nogo">Short Stories</a></li>
    </ul>
  </div>
  <div id="content">
    <div class="inner-wrap">
      <p>In a hole in the ground there lived a hobbit. Not a nasty,
      dirty, wet hole, filled with the ends of worms and an oozy
      smell, nor yet a dry, bare, sandy hole with nothing in it to
      sit down on or to eat: it was a hobbit-hole, and that means comfort.</p>
    </div>
    </div>
    <div id="footer">
      <div class="inner-wrap"><h6>J.R.R. Tolkien</h6></div>
    </div>
</div>
</body>
</html>

Inside the "menu" div (section) an unordered list <ul> has been placed.

Within the <ul> tags each item of the menu is places within a <li> tag.

Because this is a menu, each item is a link so the text of the link is enclosed in a link <a> tag.

If you remember from the example at the top of this page, the current pages tab (the hobbit) looked different from the other tabs, giving the illusion that it is highlighted. This has been done by adding an extra class to the hobbit link, class="current".

These are the elements that we will need to style in the CSS. In the CSS extract below, comments have been provided to explain the function of the different elements.

CSS: Menu


#menu{
  height: 30px;
  background: #841922;
}

#menu ul{
  padding: 0px; /*Removes the customary indent of a list*/
  margin: 0px; /*Removes the customary indent of a list*/
  list-style: none; /*Removes the disc*/
}

#menu li{
  float: left; /*Forces the links to align horizontally*/
  line-height: 30px; /*Set the line height, equals the height of the menu div*/
  vertical-align: middle; /*Centres the text vertically*/
  border-right: 1px #A35259 solid; /*Creates the light maroon spacer after each link*/
}

#menu a{
  padding: 0 15px 0 15px; /*Creates a little spacing on each side of the tabs text*/
  text-decoration: none; /*Removes the standard line under a link*/
  display: block; /*Forces the whole tab to highlight as apposed to only the text*/
  color: #E2D3B2; /*Sets the colour of the text of the tab*/
  background: #841922; /*Sets the background colour of the tab*/
}

#menu a:hover { /*Defines what the tab will look like when the mouse is hovered over the text*/
  background: #E2D3B2; /*Sets the background colour of the tab*/
  color: #333333; /*Sets the colour of tab's text*/
  border-bottom: 1px #841922 solid; /*Create the illusion of the tab appearing behind the page*/
  line-height: 29px; /*Line height is reduced by 1px to accommodate the bottom border and stop the tab from becoming misaligned*/
}

#menu .current{ /*Defines what the current pages tab must look like*/
  background: #E2D3B2;
  color: #333333;
  border-bottom: none;
  line-height: 30px;
}

#menu a:hover.current { /*Defines how the current pages tab must behave when the mouse is hovered over the tab*/
  border-bottom: none;
  line-height: 30px;
}

And the final result:

Example: Single Column Web Page

Copyright © CHouseLive - 2012 - All Rights Reserved