BLOGS BY TOPIC
BLOGS BY AUTHOR
BLOGS BY YEAR
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).
- A Full Worked Example of CSS for a Website (this blog)
- Two Guiding Principles in Using CSS for a Website
- Creating the Page Template
- Setting Styles for HTML Tags
- Specific Class Styles
- Formatting Tables and Gridviews using CSS
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:
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.