CSS online training course

CSS lesson 10, Text properties

Text properties

Subsequent to font properties know we are going to look at a few text properties which influence the design of the text also.
Text-align determines how text and images within a block element are aligned.
The values are : left, right, center, justify and inherit

For example:
h3 { text-align: center;}

Text decoration

This adds decoration to a text like for example a underscore.
The values are : none, blink, underline, overline, line-through or none.

For example:
h3 { text-decoration: blink;}

Line height

This code controls the distance between two subsequent baselines of a text.
The shape is : normal, number, width or percentage.
Example :
P {line-height: 3; }
P {line-height: 110%; }
P {line-height: 1.5em; }

Letter spacing

With letter-spacing you can enlarge or lessen the space that the browser makes between punctuation.
Values : normal or width
A list with other values which are also valid in letter-spacing:

  • px: pixels
  • in: inch
  • em: the size relativly compared to the font size of the element
  • %: percentage
  • mm: milimeters
  • pt: points

Example:
p { letter-spacing: 110%;}

Text indent

This is used to indent in the first rule of a line of text.
How much this indent must be we can control with a width or percentage indication.
The most common used values are : em, pt, px and %

For example:
p { text-indent: 1.5em}

Text transform

This has to do with capitalizing letters.
Values : capitalize, uppercase, lowercase, inherit or none.

Example:
p { text-transform: uppercase;}

White spacing

Handling of whitespacing within a element.
Values : normal, inherit, pre, pre-wrap, pre-line or nowrap
In this training lesson we arent going to give more attention to this subject.