CSS Text Properties

Text Color

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

Colors can be specified in CSS in several ways:

Hexadecimal values - e.g., #FF0000
RGB values - e.g., RGB(255,0,0)
Color names - e.g., red

The background color of a webpage can be set within the body selector:

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

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

Text can be centered, left-aligned, right-aligned, or justified.

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

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

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

a {text-decoration:none;}

It can also be used to decorate text:

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

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

Text Transformation

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

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

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

Text Indentation

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

p {text-indent:50px;}

All CSS Text Properties

Property	Description
color	Sets the color of the text
direction	Sets the text direction
letter-spacing	Sets the space between characters
line-height	Sets the line height
text-align	Aligns the text in an element
text-decoration	Adds decoration to the text
text-indent	Indents the first line of text in an element
text-shadow	Sets the text shadow
text-transform	Controls the capitalization of text in an element
unicode-bidi	Sets or returns whether the text should be overridden
vertical-align	Sets the vertical alignment of an element
white-space	Sets how white space inside an element is handled
word-spacing	Sets the space between words

More Examples

Specifying Space Between Characters

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>WebCode101(webcode101.com)</title> 
<style>
    h1 {letter-spacing:2px;}
    h2 {letter-spacing:-3px;}
</style>
</head>

<body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
</body>
</html>

Specifying Space Between Lines

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>WebCode101(webcode101.com)</title> 
<style>
    p.small {line-height:70%;}
    p.big {line-height:200%;}
</style>
</head>

<body>
    <p>
    This is a paragraph with standard line height.<br>
    Most browsers' default line height is about 110% to 120%.<br>
    </p>

    <p class="small">
    This is a paragraph with smaller line height.<br>
    </p>

    <p class="big">
    This is a paragraph with larger line height.<br>
    </p>

</body>
</html>

Setting Text Direction

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

<html>
<head>
<meta charset="utf-8"> 
<title>WebCode101(webcode101.com)</title> 
<style type="text/css">
    div.ex1 {direction:rtl;}
</style>
</head>
<body>

<div>Some text. Default writing direction.</div>
<div class="ex1">Some text. Right-to-left writing direction.</div>

</body>
</html>

Increasing Space Between Words

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

<html>
<head>
<meta charset="utf-8"> 
<title>WebCode101(webcode101.com)</title> 
<style type="text/css">
    p
    { 
        word-spacing:30px;
    }
</style>
</head>
<body>

<p>
This is some text. This is some text.
</p>

</body>
</html>

Disabling Text Wrapping Inside an Element

This example demonstrates how to disable text wrapping inside an element.

<html>
<head>
<meta charset="utf-8"> 
<title>WebCode101(webcode101.com)</title> 
<style type="text/css">
p
{
    white-space:nowrap;
}
</style>
</head>
<body>

    <p>
    This is some text. This is some text. This is some text.
    </p>

</body>
</html>

Vertically Aligning an Image

This example demonstrates how to set the vertical alignment of an image.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>WebCode101(webcode101.com)</title> 
<style>
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>
<body>
    <p>An <img src="logo.png" alt="w3cschool" width="270" height="50" /> image aligned to the default.</p> 
    <p>An <img class="top" src="logo.png" alt="w3cschool" width="270" height="50" /> image aligned to text-top.</p> 
    <p>An <img class="bottom" src="logo.png" alt="w3cschool" width="270" height="50" /> image aligned to text-bottom.</p>
</body>
</html>

Adding Text Shadow

This example demonstrates how to set a text shadow.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>WebCode101(webcode101.com)</title> 
<style>
h1 {text-shadow:2px 2px #FF0000;}
</style>
</head>
<body>
    <h1>Text-shadow Effect</h1>
    <p><b>Note:</b> Internet Explorer 9 and earlier versions do not support the text-shadow property.</p>
</body>
</html>