There are a number of properties that control the appearance of text on the page. You can control everything from the type face to the spacing between letters.
The first CSS font property we will see is font-family. The font family is the kind of type face you want. These can be specific fonts like Arial or Times Roman or Courier. Or it could be a class of fonts. CSS recognizes 5 classes of fonts. They are:
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.
Some notes on font size units. There are 72 points per inch. There are 12 points per pica and 6 picas per inch. There are also relative units as well. A em is the width of a capital M in the current font and an ex is the height of a small x in that font. You can specify font size as a multiple of these sizes. These units scale better than using the absolute measures. You can use pixels as a font size but be careful as a size that is fine on one screen may look bad on another.
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.
The value can be a specific length or a relative amount, a multiplier
of the fonts size.
So to double space the text, use a value of 2.
For titles and such, with big fonts, use a smaller line height to push the
lines of title a little closer, making it stand out a bit more.
For example, the left title is with normal spacing and the right one
is with half that.
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. The vertical-align property takes many values.
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.