Web pages can have style controls in three places. This page has all three. The highest level is a file containing style settings and usually ends in '.css'. In it included in the page using this command.

	<link href="../teach.css" rel="stylesheet" type="text/css">
The contents of the file sre:
.reading {width: 150; border-style: solid; font-size: 12pt;}

.example {font-family:monospace; align:center; background-color:beige;}

em {font-variant: small-caps; font-style:normal; font-weight: bolder;}

The next lowest place to put style settings is in a style section. This is usually in the head section of the web page. In this page it looks like this:

	<style type="text/css">
		em {font-variant: small-caps; font-style:normal; font-weight: bolder;}	
		li {list-style-position: outside;}
		LI.music {list-style-type:circle;}
		LI.movies {list-style-type: square;}
		body {background: white url(../images/logo.jpg) no-repeat fixed center center;}
	</style>

The lowest level is to use a style attribute on an individual tag. Most of this page will show examples of that.

  • disc
  • square
  • circle
  • decimal
  • upper-roman
  • lower-roman
  • upper-alpha
  • lower-alpha
  • This has a special bullet
  • This one doesn't
  • inside. In this case the next lines of text, such as these, will line up with the bullet, whatever it may be. This is just some more text to make sure that it shows up here.
  • outside. In this case the next lines of text, such as these, will line up with the first line of text, whatever it may be. This is just some more text to make sure that it shows up here.
The LI.music and LI.movies classes defined above are applied here.
  • Jimmy Buffett
  • Terminator 2
  • Shakespeares Sisters
  • Local Hero
You can set the background color of a bold tag to get this effect.

Most elements can have a background image as well. So this paragraph is on top of a picture of Half Dome at Yosemite. It is padded with extra text so more of the picture shows up.

You can control the start position of the image using the background-position property. This takes a value that is two values separated by a space. The first value is the distance from the left edge of the space containing the block we are in, like a paragraph. The second value is the distance from the top of the block. These values can be in any distance unit or as a percent.

serif: Letters have little extra bits at the ends of the strokes that make up the letters. This can make the text easier to read when there is a lot of it.

sans-serif: No serifs. Stands out, a little bolder. Tedious for long sections of text.

monospace:Like old typewriters. No variation in character width.

cursive:Looks a bit like handwriting.

fantasy:Odd designs. Special characters.

You can specify a list of fonts in font-family. The browser reads left to right and uses the first one it finds.

The font-size property is used to alter the size of fonts. The value can be a unit of length in mm, cm, in, pt and em. It can also be a keyword like xx-small through xx-large or larger, smaller. It can be a percentage of the font in use at the time.

There are several controls over spacing in text. The letter-spacing property alters the distance between characters. It can have values of normal, or a size like that used in the font size property. The word-spacing does the same thing for the distance between words.

You can control the line separation using the line-height property.
Cascading
Style
Sheets
Cascading
Style
Sheets

The font-style property has values of normal, italic and oblique. The font-weight property controls the darkness of the font. It has values that range from 100 to 900, in steps of 100, normal , bold, lighter and bolder.

The alignment is controlled by two properties. The text-align property has values of

left
,
center
,
right
and
justify which tries to space the text so it lines up of both sides
. The vertical-align property takes many values.
top, so text is pushed to the top
,
bottom, so text is pushed to the bottom

You can control the indentation of paragraphs with the text-indent property which takes values that can be absolute lengths or a percentage of the paragraph width. If you give negative values the first line sticks out to the left. For example, this paragraph has an indent of 5 ems.

While this one has a negative 2 em indent. This can be used to emphasize special paragraphs or to fix some kinds of formatting problems when text is supposed to fit around something else. This is probably more useful when the margins have been set.

Lastly, there are a few special effects. The text-decoration property allows you to put lines over (overline), under (underline) and through (line-through) the text. You can make the text blink, but please don't or you can turn off all these things by using none.

The text-transform can be used to change the case of text. You can capitalize a section of text, make it all lowercase or all uppercase or remove all this, setting it to none.
One way to attract attention to a piece of text is to use the small-caps value of the font-variant property, which is used in this page on all the property names. This is done by setting the style of the em tag in the style section. This also takes a value of none.