CSS Text Formatting

CSS text formatting allows us to customize the appearance of text: we can set color, size, alignment, letter spacing, decorations, and line spacing. These settings play a key role in readability and visual experience.

Basic Text Formatting Properties

For text we can define color, font size, and alignment. These properties determine the initial visual impression of the text.

In the following example, the paragraph is given a dark blue color, 18px font size, and center alignment:

Text Alignment

With the <text-align> property, text can be aligned left, right, center, or justified.

Text Transformation and Decoration

With <text-transform> we can make text uppercase, lowercase, or capitalize it. <text-decoration> allows for underlining or strikethrough, while <letter-spacing> controls spacing between characters.

In the following example, the text appears fully uppercase, underlined, and with extra letter spacing:

Line Height and Word Spacing

The <line-height> property sets the distance between lines, while <word-spacing> controls the spacing between words. These are important tools for improving text readability.

The following example sets a line height of 1.8 and word spacing of 5px for the text:

Text Shadow (text-shadow)

With <text-shadow> you can add shadow to text, making it stand out or decorate it.

More Advanced Typographic Settings

With the <white-space> and <word-break> properties, you can control when text breaks onto a new line or how it handles long words.

Tips for Text Formatting

The following advice helps to make text readable and aesthetically pleasing:

• Always ensure proper contrast between the background and text.
• Avoid using too many decorations, as they can make text distracting.
• Use appropriate line height so that text remains easily readable on different devices.