CSS TextFormatting

Text Formatting

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 text.

Colors are most often specified through CSS:

Hexadecimal value - e.g.:＃FF0000
An RGB value - e.g.:RGB(255,0,0)
The name of a color - e.g.:red

See AlsoCSS Color ValuesView the full color values.

The background color of a webpage refers to the selection within the body:

Example

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

Try it Yourself »

Remark For W3C standard CSS: if you define the color property, you must also define the background-color property.

Text alignment

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

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

When text-align is set to "justify", each line is expanded to equal width, and the left and right margins are aligned (as in magazines and newspapers).

Example

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

Try it Yourself »

Text Decoration

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

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

Example

a {text-decoration:none;}

Try it Yourself »

You can also decorate text like this:

Example

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

Try it Yourself »

Remark We do not recommend emphasizing text that is not a link, as this often confuses users.

Text Transform

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

It can be used to make all words uppercase or lowercase, or to capitalize the first letter of each word.

Example

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

Try it Yourself »

Text Indentation

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

Example

p {text-indent:50px;}

Try it Yourself »

More Examples

Specify the space between characters
This example demonstrates how to increase or decrease the space between characters.

Specify the space between lines
This example demonstrates how to specify the space between lines in a paragraph.

Set the text direction of an element
This example demonstrates how to change the text direction of an element.

Increase the white space between words
This example demonstrates how to increase the whitespace between words in a paragraph.

Disable text wrapping within an element
This example demonstrates how to disable text wrapping within an element.

Vertically align an image
This example demonstrates how to set the vertical alignment of text with images.

Add text shadow
This example demonstrates how to set text shadow.

All CSS text properties.

Property	Description
color	Set text color
direction	Set text direction
letter-spacing	Set character spacing
line-height	Sets line height
text-align	Align text in an element.
text-decoration	Add decoration to text
text-indent	Indent the first line of text in an element.
text-shadow	Set text shadow
text-transform	Control the letters in an element.
unicode-bidi	Set or return whether the text is rewritten.
vertical-align	Set the vertical alignment of an element.
white-space	Set the way whitespace in an element is handled.
word-spacing	Set letter spacing

other extensions