CSS Text

CSS Text Format

text format

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. 

Text Color

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

Colors are most often specified through CSS:

  • Hexadecimal value-such as: #FF0000

  • An RGB value-such as: RGB(255,0,0)

  • The name of the color-e.g. red

See CSS color values to view the full color values.

The background color of a web page refers to the choice within the main body:


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

 Try It! 

Remark For W3C standard CSS: If you define the color attribute, you must also define the background color attribute.

Text Alignment

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

The text can be centered or aligned to the left or right, and justified at both ends.

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


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

 Try It! 

Text Decoration

The text-decoration attribute is used to set or delete the decoration of the text.

From a design point of view, the text-decoration attribute is mainly used to remove the underline of the link:


a {text-decoration:none;}

 Try It! 

You can also decorate text like this:


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

 Try It! 

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

Text Conversion

The text conversion attribute is used to specify uppercase and lowercase letters in a text.

Can be used to change all words into uppercase or lowercase letters, or capitalize the first letter of each word.


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

 Try It! 

Text Indent

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


p {text-indent:50px;}

 Try It! 


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 white space between words in a paragraph.

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

Align the image vertically
This example demonstrates how to set the vertical alignment of the text to the image.

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

All CSS Text Properties

colorSet text color
directionSet the text direction.
letter-spacingSet character spacing
line-heightSet row height
text-alignAlign the text in the element
text-decorationAdd decoration to text
text-indentIndent the first line of text in the element
text-shadowSet text shadow
text-transformLetters in control elements
unicode-bidiSet or return whether the text is overwritten 
vertical-alignSet the vertical alignment of the element
white-spaceSet the handling of whitespace in the element
word-spacingSet word spacing