Nw we're going to show you how to add some style to your web page.
When you created your web page for the previous lab, you used some formatting commands (such as <B> or <I>), but you mainly used tags to describe the structure of the document—what the title was, where the headings were, what the paragraphs were, and to define a couple of lists with items. The web browser saw that structure, and for each element applied a default style. The specific style used depends on the particular browser; one may display a title in 20-point font, another is 24-point font, and so forth.
In this exercise, you will learn how to override the default style by instructing the browser to use a particular style.
Please get a copy of the web page you turned in for the last laboratory exercise. You can modify its contents if you wish; we won't compare what you turn in this time to what you turned in last time!
Your current page doesn't specify what color the text and background should be. So, the browser displaying its page uses its defaults. Usually, this is black on white (black text, also called foreground; on a white background). Let's change this.
We're going to use a convention called CSS (for "Cascading Style Sheets"). These are instructions embedded in a special section of the web page. It looks like this:
<STYLE type="text/css"> ... css instructions ... </STYLE>
The attribute "type" for the STYLE tag says what kind of commands the style section contains. The value "text/css" means it contains text CSS commands.
Let's apply this to make your web page purple on yellow. Insert the following right after your title:
<STYLE type="text/css">
body {
color: purple;
background-color: yellow;
}
</STYLE>
The "curly braces" "{" and "}" enclose specific properties, each of which consists of a property name and a value. Here, "color" and "background-color" are property names, and "purple" and "yellow" are the values. The selector precedes the curly braces and says to what the enclosed properties apply. Here, the selector "body" means that what is between the "{" and "}" are to be applied to the body of the page.
You can name several colors; the common ones are:
| aqua | black | blue | fuchsia | gray | green | lime | maroon |
| navy | olive | purple | red | silver | teal | white | yellow |
The other way to specify a color is to think of mixing red, green, and blue paint in different amounts. You do this by giving a value of the form "#rrggbb", where "rr" is two hexadeciman digits representing the amount of red, "gg" is two hexadeciman digits representing the amount of green, and "bb" is two hexadecimal digits representing the amount of yellow. So the name "red" and the value "#ff0000" both mean red, because "ff" symbolizes full intensity, and is in the "rr" position. As yellow is an equal mixture of red and green, "yellow" and "#ffff00" both mean yellow. You don't need to use this because the names for color are suitable for most purposes, but you may see this on existing web pages.
From the handout All About Lab Exercises and the Term Paper (see the web page), you know that the term "font" in the computer world often refers to what printers call a "typeface". That's the case here. You can specify which font you want your page displayed in.
Specifying the exact font to use may be slightly dangerous because the reader's computer may not have that particular font. So, you normally specify a sequence of fonts, and the computer will pick the first one it finds. This works like this:
font-family: Georgia, "Times New Roman", Times, serif;
This says that if the reader's computer has the "Georgia" font, the web page is to be displayed using that font. If not, the reader's computer should use the font "Times New Roman". If neither is available, then the font "Times" should be used. And if none of those fonts are available, then the computer should pick any serif font. By the way, all of the Georgia, Times New Roman, and Times fonts are serif fonts; look at the capital "T" and you'll see little things hanging off the end of the crossbar. Those are called "serifs".
You can specify any fonts you like in the list. If the font name is more than one word, as with "Times New Roman", you must put quotation marks around the name. Otherwise, you can omit them, as I did above. The last name in the list should always be a "generic font type" so the computer will be able to choose a font you don't name, but that it has. The generic font types are:
serif sans-serif cursive fantasy monospace
Let's display your headings in the above font, and your body in a sans serif type. Change the STYLE section to the following:
<STYLE type="text/css">
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
color: purple;
background-color: yellow;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
}
</STYLE>
In the above, the Geneva, Arial, and Helvetica fonts are sans serif fonts.
Note that we also used a selector called "h1". That selector corresponds to the tag "H1" (remember, capital letters and lower-case letters are the same as far as HTML is concerned). The properties associated with that selector are applied to the "H1" tag's contents, the section header. They override the properties of the body for that particular tag.
As another example, try this. Change the STYLE section to be:
<STYLE type="text/css">
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
color: purple;
background-color: yellow;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
}
ul {
color: red;
}
</STYLE>
What happened to the bullets in your unnumbered list?
For some more fun, add the following property and value to the "ul" selector:
list-style-type: circle;
Now what happened to the bullets in your unnumbered list?
Sometimes you want to format two elements with the same name differently. For example, you may want the first heading in your page to be red, and the second green. To achieve this effect, you use the "CLASS" attribute.
Here's a very simple web page:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>A really short web page</title> </head> <body> This text is not in a paragraph element, and should be in green. <p class="first">This is the first paragraph and should be displayed in red. <p class="second">This is the second paragraph and should be displayed in blue. </body> </html>
Now, let's say we want the page to be green on yellow in general, but the paragraphs labeled "first" should be in red and the paragraphs labeled "second" should be in blue. To make the first paragraph's text red, instead of making the selector just "p", we make it "p.first". That matches the tag "p" with class "first", which is the first paragraph. We do the same things with the second paragraph. So, if we put the following right after the title:
<STYLE type="text/css">
p.first { color: red; }
p.second { color: blue; }
body { color: green; background-color: yellow; }
</style>
we will get that we want.
Your web page contained several links. By default, web browsers display links to pages you haven't visited in blue, and ones you have visited in purple. Let's change the colors a bit.
The "pseudo-classes" "visited" and "link" are associated with the tag "A". Let's make the links you have already visited show up as red, not purple. In your STYLE section, add the following line:
a:visited { color: red; }
Note that you need a colon ":" rather than a dot "."! Now links you have visited will show up as red, not purple. Similarly, if you add
a:link { color: green; }
the links you have not visited show up as green, not blue.
The links are still underlined. Let's get really fancy. We will change the visited links to have a line through them. For this, we use the property called "text-decoration". This property can have several values: "none", "underline" (the default for links), "overline", "line-through", and "blink". In general, avoid blink; it gets annoying very quickly.
Change the "a.visited" entry to:
a:visited { color: red; text-decoration: line-through; }
and see what it looks like. Remember to go to a web page you haven't visited yet!
If you want to learn more or try other things, there are a couple of good tutorials:
Please do the following to the web page you created last week:
Experiment a bit to find fonts and colors that you think look good. We won't take off because we don't like your tastes, as long as we can read it.
You can use any program to create the web page, but we strongly recommend you use Notepad, as described in the previous exercise. Your index.html file must be clean and readable, that is, without unnecessary characters, tags, and formats.
To hand it in, create a ZIP file containing index.html and any pictures you include in your web page. Call that ZIP file lab5.zip. In the labs, you can use the FilZip utility to create the ZIP file. Go to Start, then to All Programs, then to Utilities, then to FilZip. In FilZip, go to File, then to New Archive, and create lab6.zip on the Desktop. Click the Add (+) button and select the files. Note that you must click two Add buttons before they are added to the archive. Save your zip file in MySpace, and also submit it to MyUCDavis.