Worked CSS Examples

Example 1

This is a fairly straightforward HTML document, produced using 'save as HTML' from a word processor. The purpose of this exercise is to introduce the basic concepts, and demonstrate how easy it is to radically change the style of a page with CSS.

Create a CSS file called practical1.css, and edit the HTML file to use it.

This is simply a case of adding a line to the <head> of the document:

<HTML>
<HEAD>
<TITLE>...</TITLE>
<LINK REL="stylesheet" HREF="practical1.css" type="text/css">
</HEAD>

Make <em> elements have a yellow background

In the CSS file, add a line

em {background-color: yellow}

Note that you could write em or EM. As was explained, it is better to use lower-case.

Make headings in a sans-serif font

There are 6 levels of headings possible. The document doesn't use them all, but it is not hard to include all 6 anyway:

h1, h2, h3, h4, h5, h6 {font-family: sans-serif}

Now make the presentation white text on blue.

This is just a question of changing the background and foreground colours:

body {color: white; background-color: blue}

What colours are aqua, fuchsia and teal?

You can use any number of possibilities to find out. Here is one (garish) possibility:

body {color: aqua; background-color: fuchsia}

h1 {color: teal}

On your browser, what sizes are the font-sizes small, medium, large, x-small, xx-small, x-large, xx-large?

Create a separate document with an <h1> to <h6> and a body paragraph, and assign suitable fonts to each of them (xx-large to <h1>, x-large to <h2>, etc.)

How many of the 9 font-weights does the default sans-serif font have?

Create a document with 9 copies of the same word, and put a span around each, each with a different class. For example:

<span class="w1">weight1</span>
<span class="w2">weight2</span>

etc. Then set the body to font-family sans-serif, and add a separate rule for each of the words:

.w1 {font-weight: 100}
.w2 {font-weight: 200}

etc.

Example 2

This example is a good-quality hand-written HTML document. The purpose of this exercise is to do some serious styling using margins, fonts, and colours, and to demonstrate something useful you can do more than just purely styling the page.

Use the file practical2.html; create and link to practical2.css

Same answer as for Example 1.

Indent all text except for headings by some amount

The problem here is "all text". The best approach is to indent everything, and then unindent just the headings:

body {margin-left: 1cm}
h1, h2, h3, h4, h5, h6 {margin-left: -1cm}

Remember that you shouldn't use the 'em' and 'ex' widths here, because the width of 1em, being related to the font used for the element in question, is different for body, h1, h2, etc.

Limit the width of the page to some length
(note: bug in IE 5: setting width on <body> is not honoured)

The note hints at the answer:

body {width: 40em}

body {width: 80%}

etc.

It is OK to use 'em' here, because it sets the width of <body> (and everything in it) to 40ems of the body font.

To make this work on IE5 as well, you need to put a <div> around the content of the body:

<body><div class="body">....</div></body>

and use

div.body {width: 40em}

Make the headings white on blue, and right align them

h1, h2, h3, h4, h5, h6 {
    color: white; background-color: blue;
    text-align: right
}

Make a stylesheet where only the headings are visible, and indented according to their depth (h1, h2, etc)

Remember that you cannot make <body> be display: none, and then the headings display: block, since if the body is not displayed, then it is just not displayed, including all its content, regardless of the settings of display for the content.

So you have to set all contained elements except the headings to display: none. You can find the contained elements by looking at the document, or trying as many as you can think of, and then seeing what needs to be added.

p, ul, ol, ... /*fill in the rest*/ {display: none}

Then indent the headings to something suitable:

h1 {margin-left: 0}
h2 {margin-left: 20pt}
h3 {margin-left: 40pt}

etc.

Example 3

This is an example page taken from an existing site, where all styling is done using HTML tags and images. The purpose of this exercise is to practise creating a real-world page design using CSS rather than HTML, and explore what can and can't be done easily.

Take a look at practical3.html, and example3.html

Create a style sheet to make practical3.html look like example.3

Hints:

Use <span> where necessary in the HTML
Use negative margins where necessary
Use class="..." where necessary

Resize the window to make sure it still works at different sizes.

To make this example easier, here is a prepared HTML version of the document, with all presentation taken out.

So what is to be done?

The Body

Let's start with the easy things.

First note that the first part of the document and the last part are less indented than the body of the article. The article proper is enclosed in a <div>, so we'll create a margin for the <body> and another one for the <div>; while we're at it, we'll describe the base colours:

body {margin-left: 1cm;
      color: black; background-color: white}
div {margin-left: 1cm} /* relative to body */

The Top Headings

Now let's handle a little bit of the initial headings (we'll do more soon):

h1 {background-color: black; color: white}
p.author {background-color: red; color: white}

Well, a bit of experimentation will show that the color is not 'red' but actually closer to '#c00'.

And we immediately see that the <h1> font is too large, and not the right family:

h1 {font-size: 100%; font-family: sans-serif}

Now to fix the width: experiment a bit. How about 15em? Too wide. 12em? Still to wide. 11 em?

h1 {width: 11em}

Hmm. The padding is wrong.

h1 {width: 11em; padding: 1em 1em 1em 1em}

Ooh, too much, except perhaps at the bottom:

h1 {width: 11em; padding: 0.5em 0.5em 0.5em 0.5em}

Better. Now the author. The name is at the moment underlined and in blue: because it is a link within the <p>. Lets fix that:

p.author a {color: white; text-decoration: none}

and the font, width and padding is wrong. Move it up and right:

p.author {margin-top: -1.4em; margin-left: 7em;

add a width and font-weight:

width: 10em; font-weight: bold

and suitable padding:

padding: 0 0.5em 0.2em 0.5 em;

and a width:

width: 9.5em }

(these values come from some experimentation).

The Abstract

Now the abstract:

p.abstract {font-style: italic}

The Contents

The contents is a <ul>, but with no styling; and the links are a shade of red:

a:link {color: #b77}
a:vlink {color: #77b}
a:active {color: #fe9}
ul.contents {list-style: none; color: #c00}

The Callouts

Now lets do the callouts. These are blockquotes, identified with classes for different stylings.

blockquote.callout-top, blockquote.callout-side-a,
blockquote.callout-top-a, blockquote.callout-side
{ font-weight: bold; font-family: sans-serif;
  line-height: 1; width: 30%; margin-left: 35%
}
blockquote.callout-top {
    border-top: 0.5em #c00 solid;   padding-top:  0.5em}
blockquote.callout-top-a {
    border-top: 0.5em #c00 dotted;  padding-top:  0.5em}
blockquote.callout-side-a {
    border-left: 0.5em #c00 dotted; padding-left: 0.5em}
blockquote.callout-side {
    border-left: 0.5em #c00 solid;  padding-left: 0.5em}

Now to go back to the top.

The Logo

A logo is normally done with a GIF image. However this one is sufficiently textual to be do-able in CSS. Note that it is a <p> with class 'firstmonday', containing an <a>, which itself contains two <span>s, with classes 'first' and 'monday':

.firstmonday a { text-decoration: none }

.first, .monday {
    color: white;
    font-family: sans-serif;
    font-weight: bold;
    letter-spacing: 0.5em;
}
.first {background-color: #c00}
.monday {background-color: black}

You might want to play with some of these values to get it closer to the original.

The tag line under the logo is a <p> with class tagline. We want it flush against the logo, as well as the line underneath, so it has to have a zero margin top and bottom, and the logo has to have a zero margin bottom:

p.firstmonday {margin-bottom: 0}
p.tagline { font-family: sans-serif; font-size: 60%;
    margin-top: 0
}

Similarly the line underneath has to have a zero margin-top:

p.related {margin-bottom: 0}

And that about wraps it up. The only thing we have failed to do is add the little blocks before the <hr>s. I had expected two possibilities, neither which seem to work: making <hr> display: list-item, and tweaking the list-item properties, or using hr:before.

Example 4

The purpose of this exercise is to introduce XML, demonstrate the different manner of linking to a style sheet, and show what the default styling looks like in a browser.

The document uses a large number of HTML constructs, so you have to deal with a lot of different CSS properties. This is a fairly open-ended exercise, since you can do as much as you want to make the document look good.

File practical4.xml is an xml document. Take a look. As you can see, XML has no pre-defined presentation.

Add a link to a style-sheet file from the document.

Put at the top of the file, just after the line beginning '<?xml':

<?xml-stylesheet type="text/css" href="practical4.css"?>

Start off with an empty CSS file; how does the document look now?

This should show the default presentation for XML: everything is display: inline, with a medium-size font.

Start defining CSS rules for the elements

Well, you should be able to recognise that the document is meant to be an HTML document, so you know roughly what the document is meant to look like.

You could take a short cut and look what they did for HTML 2 at http://www.w3.org/TR/REC-CSS1#appendix-a.

Lets start with some display values:

head {display: none}
body {display: block}
p, h1, h2, h3, h4, h5, h6 {
    display: block; margin-bottom: 1em
}

As you will see, the document is now more readable. Let's fix the headings.

h1, h2, h3, h4, h5, h6 {
    font-weight: bold; font-family: sans-serif
}

The document uses <h1> both for the main title of the document, as for the top-level headings within the body, so the font-size has to be relatively small. Furthermore, there are only <h1>, <h2> and <h3>:

h1 {font-size: 150%}
h2 {font-size: 125%}
h3 {font-size: 110%}

Now the lists:

dl, ul, ol, dd, dt {display: block}
ol {list-style-type: decimal}
ul {list-style-type: disc}
li {display: list-item;
    margin-left: 1em;
}
dd {margin-left: 2em}

(Note that the list-style goes on the outer elements <ul> and <ol>, and not on the <li>).

You'll see that some of the <ul>s at the beginning look a bit odd now. If you look in the source, you'll see that they are <ul>s with a class, and you can fix that easily (by making that class list-style-type: none).

Now some text styles:

em, i {font-style: italic}
strong, b {font-weight: bold}
code {font-family: monospace}

and fix up the display of the examples:

pre { font-family: monospace; white-space: pre}

<a>

<hr>

Worked CSS Examples

Example 1

Create a CSS file called practical1.css, and edit the HTML file to use it.

Make <em> elements have a yellow background

Make headings in a sans-serif font

Now make the presentation white text on blue.

What colours are aqua, fuchsia and teal?

On your browser, what sizes are the font-sizes small, medium, large, x-small, xx-small, x-large, xx-large?

How many of the 9 font-weights does the default sans-serif font have?

Example 2

Use the file practical2.html; create and link to practical2.css

Indent all text except for headings by some amount

Limit the width of the page to some length (note: bug in IE 5: setting width on <body> is not honoured)

Make the headings white on blue, and right align them

Make a stylesheet where only the headings are visible, and indented according to their depth (h1, h2, etc)

Example 3

Create a style sheet to make practical3.html look like example.3

The Body

The Top Headings

The Abstract

The Contents

The Callouts

The Logo

Example 4

Add a link to a style-sheet file from the document.

Start off with an empty CSS file; how does the document look now?

Start defining CSS rules for the elements

Limit the width of the page to some length
(note: bug in IE 5: setting width on <body> is not honoured)