Creating a website using CSS - a full worked example
Part two 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 (this blog)
  3. Creating the Page Template
  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.

Two Guiding Principles in Using CSS for a Website

There are 2 decisions you can make to make your life easier as a website developer.

Create a Fixed Width Container

Virtually every large website is contained in a fixed width container (I've just checked Microsoft, Dell and Yahoo, and they all follow this rule).  Consider the Wise Owl site at the time of writing:

The Wise Owl website

The Wise Owl site at the time of writing this blog, with notes.

Every page of the website is contained in a fixed width container 900 pixels wide, so that it will display in the same way on old-fashioned monitors as on new screens.

I'm going to assume throughout this blog that you're designing for laptops and desktop computers, not mobile devices (although the principles are the same for both).

Use a White Background for the Main Content

You can do whatever you like with the area around your page.  For example, this style would repeat an image across and down the page:

body

{

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

margin:0;

padding:0;

text-align: left;

background:#0082C3 url(shading.gif) repeat-x;

}

However, make sure that the content of the page itself has a white background:

White background on page
 

Using a white background will make it easier to read your site and add images.

The test is the same: if most other large-scale websites do something, there's probably a very good reason for it!

With these two guiding principles out of the way, it's time to start laying out our page.

This blog has 0 threads Add post