QUICK LINKS

TEXT

There are a number of ways to edit text within css. The first are ways to customize the font itself. Usually at first, you will want to decide which fonts can and will be displayed, using font family. Multiple fonts can be defined, separated by commas. In the case that the first font isn't installed on the computer, the second will be chosen, and so forth. Often times something like Arial and Helvetica will be listed, as most computers have one of the two and they appear very similar in style.

Font size can also be defined, though headers and titles should not be set up simply as large font sizes. The header tags should be used, though at that point they can be changed in size. There are also font weight and style. Weight is either bold or normal, style being either italic or normal. Each attribute when applied to the class specialtext, it would appear as follows:

.specialtext {
      font-family: arial, helvetica;
      font-size: 12px;
      font-weight: bold;
      font-style: italic;
      }


The next few options apply themselves to the text, the first being text decoration. There are three different options here, the being overline, a line over the text, line-through, a like through the text, and underline, which is self explanitory (though it should be noted that this is usually only applied to links). None is of course also an option, which is useful for removing the underline that is automatically applied to the anchor tag.

The option text transform also allows for text manipulation. Capitalize will make the first letter of each word uppercase, uppercase and lowercase making each all caps or all lowercase, and of course the option none is always present.

Last of all, a few different options exist for changing the spacing or alignment of text. Letter-spacing and word-spacing allow for a length to be determined between letters and words. Line-height allows for a lengtht as well as a percentage or a multiple (something like 2 being twice the size of the current font). Text-align allows for left, center, right, or justify, allowing for the positioning of text. Text-indent also allows for a length or percentage, creating a natural indent on paragraphs. Each together would appear so:

.specialtext {
      text-decoration: none;
      text-transform: lowercase;
      letter-spacing: normal;
      word-spacing: normal;
      line-height: 2;
      text-align: center;
      text-indent: 5px;
      }


Quick Reference

font-family
Defines the font or fonts to be cycled through

font-size
Determines the size of the font

font-weight
Either bold or normal

font-style
Either italic or normal

text-decoration
Either overline, line-through, underline, or none

text-transform
Either capitalize, uppercase, lowercase, or none

letter-spacing
Determines a length between letters

word-spacing
Determines a length between words

line-height
Determines a length or multiple

text-align
Positions text with either left, center, right, or justify

text-indent
Sets a length for an indent