Creating a website using CSS - a full worked example
Part six 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
  6. Formatting Tables and Gridviews using CSS (this blog)

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.

Formatting Tables and Gridviews using CSS

In our simple system you can display a list of things to do:

Gridview to-do list

When you click on the top of a column, you can sort by it (here someone is about to sort the tasks into alphabetical order).


Here's how to create styles to get this to work.

First, Remember a Gridview is Just a Table

The layout for the table above comes from an ASP.NET web page, and initially looks nothing like HTML:

Gridview code

The HTML for the gridview shown at the top of the page.

However, when you look at the source for the web page rendered by the gridview above, it's obvious that it's just a table:

HTML for gridview

The underlying source makes it clear this is just a table.

The trick is to set the CssClass attribute of the gridview (in our case we'll use the style name gv), then apply table styles as if you were using normal HTML.

In particular, there are good reasons to avoid server-side themes and skins in ASP.NET.

Setting a General Style for the Table

Let's start with a style for the whole table:

/* gridview: general style */

.gv table


padding: 0px;

margin: 0px;

border: solid 0px #000;


This shows that the table will appear with no margins, padding or borders.

Setting a Style for the Table Heading Row

The table cells appear in white on a dark blue background, and the clickable links appear in yellow when you hover over them:

/* gridview table headings */

.gv th


color: white;

text-align: left;

background-color: #006600;

border-color: Navy;

vertical-align: middle;

background: navy;

font-weight: bold;

padding: 5px 10px;

font-size: 0.9em;


/* click-to-sort hyperlinks */

.gv th a


color: White;

font-weight: bold;



.gv th a:hover


color: #FFFF77;


This gives us the table headings:

Table heading cells

The hover effect gives a colour of #FFFF77 (or yellowish).


Setting a Style for the Table Cells

Links within the table cells should appear in red, and underlined:

/* table cells have padding */

.gv td


padding: 5px 10px;

text-align: left;

vertical-align: top;

border: 1px solid #000;

font-size: 1em;


/* links within cells (edit/delete) */

.gv td a


color: #F00;

font-weight: bold;

text-decoration: underline;


.gv td a:hover


color: #F00;

text-decoration: none;


Colouring Different Lines

The final part of our styling is to apply different colours according to the status of each task (Not started, Ongoing or Complete).  We'll do this using 3 different styles:

/* different types of task have different colours */

.notbegunGv td


/* not begun: light */

background-color: #F2FFFF;


.ongoingGv td


/* ongoing tasks: darkish */

background-color: #D9FFFF;


.completeGv td


/* complete tasks - darker */

background-color: #A8E2FF;


See my separate blog about using gridviews in ASP.NET to show how to apply these different styles to different rows in server-side code (this also contains a repeat of the content above, presented in a slightly different way).

This blog has 0 threads Add post