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.
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>
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.
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}
This is just a question of changing the background and foreground colours:
body {color: white; background-color: blue}
You can use any number of possibilities to find out. Here is one (garish) possibility:
body {color: aqua; background-color: fuchsia}
h1 {color: teal}
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.)
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.
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.
Same answer as for Example 1.
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.
The note hints at the answer:
body {width: 40em}
or
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}
h1, h2, h3, h4, h5, h6 {
color: white; background-color: blue;
text-align: right
}
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.
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
Hints:
Resize the window to make sure it still works at different sizes.
To make this example easier, the practical3.html document has been prepared with all presentation markup taken out.
So what is to be done?
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 */
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 too 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).
Now the abstract:
p.abstract {font-style: italic}
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}
Now lets do the callouts. These are blockquotes, identified with classes for different stylings.
.callout-top, .callout-side-a,
.callout-top-a, .callout-side
{ font-weight: bold; font-family: sans-serif;
line-height: 1; width: 30%; margin-left: 35%
}
.callout-top {
border-top: 0.5em #c00 solid; padding-top: 0.5em}
.callout-top-a {
border-top: 0.5em #c00 dotted; padding-top: 0.5em}
.callout-side-a {
border-left: 0.5em #c00 dotted; padding-left: 0.5em}
.callout-side {
border-left: 0.5em #c00 solid; padding-left: 0.5em}
Now to go back to the top.
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}
Finally the <hr>s: we want to make these shorter, and left-aligned (but only the ones in the body of the article):
div hr {width: 30%; text-align: left}
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.
The purpose of this exercise is to introduce XML, demonstrate the different manner of linking to a style sheet, show what the default styling looks like in a browser, and give you a lot of work!
The document uses a large number of 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. It is actually an XHTML document with the DOCTYPE and xmlns taken out, since some browsers use those things to determine that it is XHTML, and style it properly anyway. Take a look. As you can see, XML has no pre-defined presentation.
Put at the top of the file, just after the line beginning '<?xml':
<?xml-stylesheet type="text/css" href="practical4.css"?>
This should show the default presentation for XML: everything is
display: inline, with a medium-size font. (This is the same as the document looks without a stylesheet on some browsers.)
Well, since the document was originally an HTML document you should 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}
and so on and so on...
A couple of special cases. <hr> is an empty element, so what you do is make it width 100% and add a border:hr {display: block; width: 100%; border-bottom: thin black solid}
And now we have the thorny issue of the <a> element. If you specify:
a {color: blue; text-decoration: underline}
you will see that a lot of unexpected elements turn blue, in particular all the headings. Why? Because the headings all include <a name="..." id="..." ...> to make them target anchors.
But if you change the rule to
a:link {color: blue; text-decoration: underline}
nothing is made blue! What is the problem?
The problem is that the rule for a:link says how to style an <a> element that is a link, but the browser doesn't know which <a> elements are links, or indeed that any <a> elements are links!
You know that it is XHTML, but the browser doesn't (that is why we removed all identifying markup, so that the browser would only treat it as generic XML).
Worse yet, there is as yet no standard way to even tell a browser which elements are links. It is being worked on, but for now each browser has a different method.
To style your <a> elements reasonably, you need to use CSS2:
a[href] {color: blue; text-decoration: underline}
which only takes <a> elements with an href attribute. But while your <a> elements now look OK, they are still not clickable, and there is currently no standard way to fix that. Sorry!