Creating a website using CSS - a full worked example
Part three of a six-part series of blogs

Sometimes online training in style sheets isn't enough: you need a tutorial which takes you through the thought processes involved in creating styles for a web page, step by step.  This blog gives a full worked example (you may find it helpful first to look at the two previous parts of this CSS tutorial, on the >principles of CSS and applying styles to HTML tags).

  1. A Full Worked Example of CSS for a Website
  2. Two Guiding Principles in Using CSS for a Website
  3. Creating the Page Template (this blog)
  4. Setting Styles for HTML Tags
  5. Specific Class Styles
  6. Formatting Tables and Gridviews using CSS

This blog is part of a larger online ASP.NET online tutorial.  If you like the Wise Owl approach to explaining things, have a look at the ASP.NET training courses we run in the UK.

Posted by Andy Brown on 16 May 2012

You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.

Creating the Page Template

The first thing to do is to give our page a default font and background, then a header and footer:

The header and footer

Each page has a blue background, and is divided into 3 sections as shown above.

Creating the Blue Background - the BODY Tag

The first thing to do in any style sheet is write a style for the BODY tag:

/* applies to the whole page */

body

{

background-color: #def;

font:13px Verdana, Arial, Helvetica, sans-serif;

margin:0;

padding:0;

text-align: left;

}

This will give the page the blue background shown above, and set the default font to be 13 pixels Verdana (where available), or any other sans-serif font otherwise.

The HTML for Each Page

To understand the rest of this page, we need to know what the underlying HTML looks like:

The HTML for the page

The HTML for the page consists of:

 

We therefore need to create 3 styles: .header, #container and .footer (if you're not sure of the differences between HTML elements and classes, look at my first blog on the principles of CSS).

You could easily argue that the header will only appear once on each page, and should be an element id style, not a class style.

 The Header Section

The header class style is as follows:

.header

{

background-color: Navy;

border: 1px solid #000;

text-align: center;

font-size: 1em;

font-weight: bold;

color: #fff;

width: 200px;

margin: 10px auto 10px auto;

padding: 5px;

}

This will give a header which has (reading down the styles):

  • a dark blue background;
  • a solid thin black border round it;
  • centre alignment for text within the header;
  • a font size 100% of the normal font;
  • bold type;
  • white font;
  • a 200 pixel width;
  • 10 pixels above and below it, and centre justification on the screen; and
  • a 5 pixel gap between text in the header and its edge.

Here's what the result looks like:

Header with styling

The text appears white on a dark blue background.

 

The Footer Section

The footer style is simpler, except that we also need to control how hyperlinks appear within it:

/* text in footer is centrally aligned */

.footer

{

margin-top: 10px;

text-align: center;

font-size:14px;

}

/* links in footer */

.footer a

{

color: #F00;

font-weight: bold;

text-decoration: underline;

}

.footer a:visited

{

color: #F00;

font-weight: bold;

text-decoration: underline;

background-color: transparent;

}

.footer a:hover

{

color: #F00;

text-decoration: none;

background-color: transparent;

}

Thus the footer appears with a 10-pixel gap above it, in 14 pixel font and centre aligned.  Hyperlinks within the footer appear:

  • in bold, red and underlined normally and when visited; and
  • In normal font when you hover over them.

Here's what the result looks like:

The footer with styling

The footer is centre-aligned, and contains a red, underlined hyperlink.

 

The Main Body of the Page (the Container Id)

Having set how the header and footer should appear, it's time to set how the container should be styled.  Start with the container itself:

/* everything else lies in container */

#container

{

width: 320px;

border: 1px solid Navy;

overflow:hidden;

margin: 0px auto;

padding: 10px 20px;

background-color: #fff;

text-align: left;

}

This will make the container appear as a fixed 320 pixel wide box, with internal padding of 10 pixels (top/bottom) and 20 pixels (left/right), with - most importantly - a white background colour:

Blank container

What the container would look like without any contents.

 

We can now set how headers and paragraphs will appear within the container:

/* HTML tag styles within container */

#container h1

{

/* top header appears in dark blue */

display: block;

margin: 0px 0 20px 0;

padding: 0;

color: #000080;

font-size: 1.4em;

}

#container h2

{

/* other headers also in dark blue */

display: block;

margin-top: 10px;

padding: 0;

color: #000080;

font-size: 1.2em;

}

#container p

{

/* paragraphs have right padding */

display:block;

overflow:hidden;

padding:0 40px 0 0;

line-height:20px;

font-size:14px;

margin: 20px 0;

}

In a full website, we would also now need to set default styles for all HTML tags - I've included some thoughts for how to do this in the next part of this blog. 

This blog has 0 threads Add post