Creating a website using CSS - a full worked example
Part four 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 (this blog)
  5. Specific Class Styles
  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.

Setting Styles for HTML Tags

The previous part of this blog shows how we could create styles to make our website pages appear as we would wish.  For the sake of completeness, here are the missing bits.

/* body tag as on previous pages */

body

{

background-color: #eff;

font-family: Verdana, Serif;

font-size: 14px;

}

/* level 1, 2 and 3 headings */

h1

{

font-size: 1.5em;

font-weight: bold;

color: #CC0066;

margin-bottom: 20px;

text-decoration: underline;

}

h2

{

font-size: 1.2em;

font-weight: bold;

color: #CC0066;

text-decoration: underline;

}

h3

{

font-size: 1em;

font-weight: bold;

color: #CC0066;

}

/* no extra paragraph formatting */

p

{ }

/* hyperlink tags */

a {

text-decoration: none;

}

/* unvisited links show in red */

a:link {

color: red;

}

/* visited links in green */

a:visited {

color: green;

}

/* hover over for underlining*/

a:hover

{

text-decoration: underline;

cursor: pointer;

}

/* shade when being clicked */

a:active

{

background-color: Red;

color: white;

}

/* table, header and cells */

table

{

margin: 20px 0;

}

th {

font-weight: bold;

}

td

{ }

/* unordered lists */

ul

{ }

ul li {

margin-bottom: 5px;

}

/* ordered lists */

ol

{ }

ol li {

margin-bottom: 5px;

}

/* images appear with border around */

img {

border: 1px solid #000;

}

/* horizontal rows */

hr {

border: 1px double navy;

}

This set of styles is the minimum you should consider, to format the main HTML tags. Note that some tags – like tables – may well be overwritten by class styles, as in the next part of this blog.

This blog has 0 threads Add post