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.&nbsp; 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).

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 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:

Choosing what tasks to show.

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

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:

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.