Text Formatting with CSS

This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the "Try it Yourself" link.

Text Color

The color property is used to set the color of the text.

Colors are most often specified in CSS using:

• Hexadecimal values - such as: #FF0000
• An RGB value - such as: RGB(255,0,0)
• Color names - such as: red

Refer to CSS Color Values for a complete list of color values.

The background color of a webpage is selected within the body:

Example

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

Text Alignment

The text alignment property is used to set the horizontal alignment of the text.

Text can be centered or aligned to the left or right, or justified.

When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).

Example

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

Text Decoration

The text-decoration property is used to set or remove decorations from text.

From a design perspective, the text-decoration property is mainly used to remove underlines from links:

Example

a {text-decoration:none;}

Text can also be decorated this way:

Example

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

Text Transformation

The text transformation property is used to specify uppercase and lowercase letters in a text.

It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.

Example

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

Text Indent

The text indent property is used to specify the indentation of the first line of the text.

Example

p {text-indent:50px;}

More Examples

Specify the space between characters

Specify the space between lines

Set the direction of the text

Increase the space between words

Disable text wrapping within an element

Vertically align an image

Add text shadow

All CSS Text Properties