http://fishcaro.crosswinds.net/day_43_more_css.htm
Create an HTML document with the following "shell":
<HTML>
<HEAD>
<STYLE TYPE="text/css">
Insert style information here!
</STYLE>
</HEAD>
<BODY>
<P>The quick brown fox jumps over the lazy dog.</P>
</BODY>
</HTML>
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.
<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.
</SPAN>
<CENTER>
<SPAN STYLE="BORDER-WIDTH: thick; BORDER-STYLE: solid; BORDER-COLOR: green;">
This is some text with a border around it!
</SPAN>
</CENTER>