A Practice Page for Implementing a CSS

Step 1: Where you'll save your .css page and your .html pages.

At the top of your html page you will include this text to set the rules for your page allowing it to be validated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Within the <head> you'll include your statement identifying the display rules and you css file call coding.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="X.css" type="text/css" title="X" />

Stage 2: CSS syntax rules

This stage introduces two basic rules of css syntax:

  1. all commands follow this form:
    tag { property: value }
  2. there can be multiple commands for a single tag and each command must be separated by a semi-colon.

You'll apply these rules to change the background and text colo(u)r of this page

Step 3: Block Level Elements

In this stage you'll style some block level elements and make adjustments to their spacing using some of these properties:

You'll also learn how to specify these changes for single instances of a block level element using "classes".

For instance you might want to make this paragraph red.

You may want to make this paragraph green.

Changing colours is only one of many styles that you can change using your css. It is also easy to change size, weight and font type. This paragraph for instance might look good in Georgia. Be sure that when you specify Georgia you use a capital "G". In this case your css entry might look like this.

p.georgia {font-family: Georgia; }

And your html entry would look like his:

<p class="georgia">.........</p>

Step 4: Spans

The <span> tag is a handy tool for styling small pieces of text. By creating classes for your most common stylings you can refer to them multiple times to create the same styling.

An example of this use might be to assign italics and a cursive font for the purposes of creating an quote. Try making this a quote "The rain in Spain falls mainly on the plain".

Step 5: Hypertext Reference Links

Links are at the heart of navigation and navigating between files is the heart of the World Wide Web. It is impossible to overstate their importance.

As a consequence selecting the style, colour, appearance and functioning of links is the most important design decision. It will impact almost all other aspects of your design in some way so give it due consideration.

The most important thing to keep in mind, regardless of the colours and effects you attach, is links must work and be easy to use.

Try making this link red with a green hover.

Try making this link dull red without underlining with a bright red underlined hover.

Try making this link red with a white hover on a purple background.

Try making this link red with a green hover and this link blue with a red hover.

Step 6: Images

Images can be an important part of a Web page and they can be styled just like other elements in your page.

Your image goes here.

A pony is most commonly a certain breed of small horse, generally of northern European origin, that usually measures less than 14.2 hh (hands high) at the withers.

The term "pony" can be used in general(or affectionatelly) for any small horse, regardless of its actual measurements, or breed. It is interesting to note, however, that some equine breeds are not considered ponies, even if they are under 14.2 hh. One such breed is the Egyptian Arabian. Although they are often taller than 14.2 hh, they can sometimes be shorter, but are not considered a true "pony" breed. The Icelandic Horse and Fjord Horse can also be pony sized, and of northern European breeding, but they are generally considered horses. The small horses used for polo are called "polo ponies", though they can be a mixture of both "horse" and "pony" breeds.

When in doubt, simply refer to the "under 14.2 hh" rule. Ponies are 14.2 hands (abbreviated hh) (1.47 m) at the withers or less, while a horse is generally taller than 14.2 hh at the withers. A hand is about 4 inches, or 10cm tall. But be warned, to refer to a member of a breed usually considered a horse breed, as a "pony" can sometimes be taken as an insult by the animals owner.

Step 7: Spacing

Get the layout and positioning of elements the way you want using margins and padding in your object styling.

This class will have these characteristics: margin: 20px; padding: 0; border: 1px

This class will have these characteristics: margin: 0; padding: 20px; border: 1px

Notice the position of the dotted boxes relative to the page margins.

Try putting some different borders around the following paragraphs:

Try a double border here

Try an inset border here

Step 8: Lists

Create a 5 item <ul> with links as the list items. eg.

<li><a href="http://www.cbc.ca">CBC</a></li>
<li><a href="http://www.msn.com">MSN</a></li>
<li><a href="http://www.bbc.co.uk">BBC</a></li>
<li><a href="http://www.ask.com">Ask</a></li>
<li><a href="http://www.cnn.com">CNN</a></li>