The address for this web page is:
On to the next lesson!


The purpose of this lesson is to make you aware of the wide variety of properties and values that can be defined using style sheets. There are no index cards; just a couple hours of fun, playing with properties, and seeing the results!

Create an HTML document with the following "shell":


<STYLE TYPE="text/css">
Insert style information here!

<P>The quick brown fox jumps over the lazy dog.</P>


Then, add each of the following lines inside the STYLE container, one at a time, and view the result in a browser. Below each line is a sample that illustrates the resulting style in your particular browser. But, don't take my word for this! Type each line in yourself, to fully familiarize yourself with each of the properties and values. Have fun!

You can read more information about each of these properties and values on pages 400–407 of the Weasel book.

P {font-family: sans-serif}
This is a sans-serif font.

P {font-family: serif}
This is a serif font.

P {font-family: monospace}
This is a monospaced font.

P {font-family: cursive}
This is a cursive font.

P {font-family: fantasy}
This is a fantasy font.

P {font-style: italic}
This is an italic font style.

P {font-style: oblique}
This is an oblique font style.

P {font-variant: small-caps}
This is a small-caps font variant.

P {font-weight: bold}
This is a bold font weight.

P {font-weight: bolder}
This is a bolder font weight.

P {font-weight: lighter}
This is a lighter font weight.

P {font-weight: 100}
This is a 100 font weight.

P {font-weight: 400}
This is a 400 font weight.

P {font-weight: 700}
This is a 700 font weight.

P {font-weight: 900}
This is a 900 font weight.

P {font-size: small}
This is a small font size.

P {font-size: x-small}
This is an x-small font size.

P {font-size: xx-small}
This is an xx-small font size.

P {font-size: medium}
This is a medium font size.

P {font-size: large}
This is a large font size.

P {font-size: x-large}
This is an x-large font size.

P {font-size: xx-large}
This is an xx-large font size.

P {color: red}
This is colored red. You can use color names or hexadecimal color codes.

P {line-height: 1.6}
The current font size will be multiplied by 1.6 to get the distance between baselines of adjacent lines of text. I've tried to type enough text here so that you can see more than one line, even in a very wide browser window! Play with the numbers, and see how the spacing between the lines changes.

P {word-spacing: 2em}
This specifies an additional amount of space to be placed between words in text. An "em" is approximately the width of the letter "m" in the current font.

P {letter-spacing: 2pt}
This specifies an amount of space to be added between characters.

P {text-decoration: underline}
This applies various "decorations" to text, like underlining.

P {text-decoration: overline}
This applies various "decorations" to text, like overlining.

P {text-decoration: line-through}
This applies various "decorations" to text, like line-through.

P {text-decoration: blink}
This applies various "decorations" to text, like blinking (which, of course, only works in Netscape Navigator).

P {text-transform: capitalize}
even though these words aren't capitalized in the source code, you should see them capitalized here!

P {text-transform: lowercase}
These are NOT all LOWERcAsE in the source code, BUT you should see them ALL LOWERCASE HERE!

P {text-transform: uppercase}
These are NOT all uppercAsE in the source code, BUT you should see them ALL upperCASE HERE!

P {text-indent: 1in}

The first line of this paragraph will be indented by one inch.


NOTE: If you want to apply a certain style to a block of text, you can use the <SPAN> </SPAN> container, as illustrated below:

<SPAN STYLE="text-transform: uppercase; font-family: cursive; color: green">
The quick brown fox jumps over the lazy dog.

This code will produce the following:
The quick brown fox jumps over the lazy dog.

There is a nice table summarizing many of the CSS properties and values at:
(You'll need to scroll down the page a bit.) In particular, this table talks about putting BORDERS around a selection of text! There are some examples below:


The following code...

This is some text with a border around it!

will produce...
This is some text with a border around it!

Here are some more examples:

BORDER-WIDTH can take values: thin, medium, or thick (this is thin; the one below is medium)

BORDER-STYLE can take values: solid, dotted, dashed (this is dashed; the one above is dotted).

On to the next lesson!
© 2001 Carol J.V. Fisher    All Rights Reserved