Properties used in styling text

Changing and decorating fonts

first image of text styling

What little visual interest there is in our rhubarb example stems largely from the use of text styling: some of the words are in bold, some are in italics, some are underlined, and some are capitalized. We have also centred most of the headings.

The table below lists a few of the many properties used to style text. Following each property are some of its possible values:

Name Values
font-weight property (font-weight) normal, bold
font-style property (font-style) italic, normal, oblique
text-decoration property (text-decoration) underline, line-through, overline
text-transform property (text-transform) none, capitalize, uppercase, lowercase
text-align property (text-align) left, right, center, justify

Adjusting colour

second image of text styling

Colour is also used to highlight various aspects, either as the colour of the text or as a background colour.

Each of the following properties requires a colour as a value:

  • color property (color) - specifies the colour of the text
  • background-color property (background-color) - specifies the colour of the background

Glimpse of the future

We will discuss shortly how to specify a colour and how to specify a size.

Adjusting size

Other modifications can be made by specifying the size of the text and the amount of spacing between letters, words, or lines or at the beginning of each paragraph.

third image of text styling

The following properties all require sizes for values.

  • font-size property (font-size) - specifies the size of the font
  • letter-spacing property (letter-spacing) - specifies the amount of space between characters
  • word-spacing property (word-spacing) - specifies the amount of space between words
  • line-height property (line-height) - specifies the height of the line
  • text-indent property (text-indent) - specifies the amount of indentation