Creating a website using CSS - a full worked example
Part one 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 (this blog)
  2. Two Guiding Principles in Using CSS for a Website
  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.

A Full Worked Example of CSS for a Website

I've previously blogged about:

I thought it would be useful to bring these together with a full worked example!

This example uses an ASP.NET website containing master pages, but it is just as applicable for normal HTML pages.

Our Example - a To-Do List

I've deliberately kept this example as simple as I possibly can.  The ASP.NET behind this site (the data classes, gridview code and user controls) will be explained in later blogs in this series; for now, we'll concentrate on the formatting. 

There are 3 pages in the site.  First, you can choose what tasks to search for:

Choose what tasks to show

Choosing what tasks to show.


Secondly, you can then view the tasks, and perhaps edit or delete one:

Viewing tasks

Viewing the tasks for this search - here we're about to edit the Do recycling task.


Thirdly, you can edit a task using a form:

Form for editing task

You can change the text in a task or change its status (the system uses the same form to confirm deletion of a task).


To see how I formatted the pages, I'll start with some guiding principles.


This blog has 0 threads Add post