Creating a website using CSS - a full worked example
Part five 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
  4. Setting Styles for HTML Tags
  5. Specific Class Styles (this blog)
  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.

Specific Class Styles

In addition to all of the standard styles, our web page contains two special classes: one for displaying forms, and one for error messages.

Style for Displaying Forms

In our website we'll want to display forms, like this one:

A form

This form has a blue background and black border.

 

To make these look reasonably attractive, we'll create a style called divForm:

.divForm

{

/* container for most forms */

border: 1px solid #000;

padding: 10px 20px;

background-color: #EFF;

}

Here's the start of a typical use of this style in HTML:

The HTML for the form

Anything within the div tag will appear with a 1 pixel black border round it, light-blue background and padding at top/bottom (10 pixels) and left/right (20 pixels).

 

Error Messages

When someone fills in a form wrongly, we'll display an error message:

Error message box

Here we've run a search, but it hasn't returned any results.

 

Here's the HTML to make this appear on screen (it's using ASP.NET, so some properties may not be familiar to HTML developers):

HTML for error message

The error message appears with class errorText, as defined below.

 

Here is the errorText style to make this appear sensible:

/* error message appear in red */

.errorText

{

padding: 10px;

width:300px;

margin:20px 0;

border: 1px solid red;

color: Red;

font-weight: bold;

}

Thus error messages will appear in a red box, in bold red font.

The great benefit of using classes like this isn't just that you can use them to format HTML; it's also that you can subsequently change your mind about formatting, and (for this example) instantly change the formatting of every div tag which uses the errorText class at the same time.

We've nearly finished our worked example - it just now remains to format the table giving the to-do list!

This blog has 0 threads Add post