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
- Two Guiding Principles in Using CSS for a Website
- Creating the Page Template
- Setting Styles for HTML Tags
- Specific Class Styles (this blog)
- 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.
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:
This form has a blue background and black border.
To make these look reasonably attractive, we'll create a style called divForm:
/* container for most forms */
border: 1px solid #000;
padding: 10px 20px;
Here's the start of a typical use of this style in HTML:
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).
When someone fills in a form wrongly, we'll display an error message:
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):
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 */
border: 1px solid red;
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!