Learn how to build and design websites with our tutorials.

CSS and CSS3 Text Tutorial

View Tutorial Contents


There are CSS properties that allow you to manipulate text and its positioning.

CSS Text Color

The CSS color property allows you to specify the color of text.

If you define the color property, you also have to define the background-color property for your CSS to be W3C compliant.

When specifying colors in CSS, the most common ways to do this is to use either the color name, RGB value or a HEX value.

Color Format Example
color name red
RGB value rgb(255,0,0)
HEX value #ff0000

The CSS example below shows you how to define the color of an HTML element, in this example, a paragraph.


p{
color: red;
}


CSS Text Alignment

The CSS text-align property allows you to align text.

The values for the text-align property are listed below.

Property Values
text-align left, right, center, justify

The default value of a text is left.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

h2{
text-align: center;
}
p.right{
text-align: right;
}
p.justify{
text-align: justify;
}

</style>

</head>
<body>

<h1>
This heading is aligned in the center
</h1>

<p>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
</p>

<p class="right">
This paragraph is aligned to the right. This paragraph is aligned to the right. This paragraph is aligned to the right.
This paragraph is aligned to the right. This paragraph is aligned to the right. This paragraph is aligned to the right.
This paragraph is aligned to the right. This paragraph is aligned to the right. This paragraph is aligned to the right.
This paragraph is aligned to the right. This paragraph is aligned to the right. This paragraph is aligned to the right.
</p>

<p class="justify">
This paragraph has a text-align value of justify. This paragraph has a text-align value of justify. This paragraph has a
text-align value of justify. This paragraph has a text-align value of justify. This paragraph has a text-align value of justify.
This paragraph has a text-align value of justify. This paragraph has a text-align value of justify. This paragraph has a
text-align value of justify. This paragraph has a text-align value of justify. 
</p>

</body>
</html>

This heading is aligned in the center

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

This paragraph is aligned to the right. This paragraph is aligned to the right. This paragraph is aligned to the right. This paragraph is aligned to the right. This paragraph is aligned to the right. This paragraph is aligned to the right. This paragraph is aligned to the right. This paragraph is aligned to the right. This paragraph is aligned to the right. This paragraph is aligned to the right. This paragraph is aligned to the right. This paragraph is aligned to the right.

This paragraph has a text-align value of justify. This paragraph has a text-align value of justify. This paragraph has a text-align value of justify. This paragraph has a text-align value of justify. This paragraph has a text-align value of justify. This paragraph has a text-align value of justify. This paragraph has a text-align value of justify. This paragraph has a text-align value of justify. This paragraph has a text-align value of justify.


CSS Text Decoration

The CSS text-decoration property allows you to specify wether a text is underlined, over-lined or has a strikethrough.

The CSS text-decoration is most commonly used to specify wether a text link should have an underline or not have one.

The possible values of the text-decoration property are listed below.

Property Values
text-decoration inherit, none, underline, overline, line-through, blink

The blink value is not supported by IE. Also, it is generally a very bad practice to use any kind of blinking text on a web page.

The CSS example below shows you how to specify that a text link has an underline in its normal state and then is not underlined when it is hovered over.


a{
text-decoration: underline;
}
a:hover{
text-decoration: none;
}

It is not recommended that you underline text that is not a text link.

The CSS example below shows you how to specify that a text has a line through it.


.strike-through{
text-decoration: line-through;
}


Specify The Case of Text

The CSS text-transform property allows you to manipulate the case of text. For example, to make all of the characters of a text uppercase or lowercase.

The possible values of the text-transform property are listed below.

Property Values
text-transform capitalize, uppercase, lowercase, none

The default value of the text-transform property is none.

The CSS example below shows you how to have a text be all uppercase using the text-transform property.


h2.uppercase{
text-transform: uppercase;
}

This Is A Heading

The CSS example below shows you how to have a text be all lowercase using the text-transform property.


h2.lowercase{
text-transform: lowercase;
}

This Is A Heading

The CSS example below shows you how to have the first letter of every word of a text be capitalized using the text-transform property.


h2.capitalize{
text-transform: capitalize;
}

this is a heading


CSS Text Indentation

The CSS text-indent property allows you to indent the first line of a text.

The possible values of the text-indent property are listed below.

Property Values
text-indent length values, percentage values

The CSS example shows you how to indent a text.


p.intro{
text-indent: 15%;
}

This paragraph has an indention. This paragraph has an indention. This paragraph has an indention. This paragraph has an indention. This paragraph has an indention. This paragraph has an indention. This paragraph has an indention. This paragraph has an indention. This paragraph has an indention. This paragraph has an indention. This paragraph has an indention.


CSS Letter Spacing

The CSS letter-spacing property allows you to control the spacing between characters in a text.

The letter-spacing property accepts any length value that is supported by CSS.

The CSS example below shows you how to specify the spacing between letters in a text.


p{
letter-spacing: .5em;
}

The example paragraph below has a letter spacing of .5em;

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.


CSS Word Spacing

The CSS word-spacing property allows you to control the spacing between words in a text. It functions exactly like the letter-spacing property.

The word-spacing property accepts any length value that is supported by CSS.

The CSS example below shows you how to specify the spacing between words in a text.


p{
word-spacing: .5em;
}

The example paragraph below has a word spacing of .5em;

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.


CSS Line Height

The CSS line-height property specifies the line height of a text.

The possible values for the line-height property are listed below.

Property Values
line-height normal, number values, length values, initial, inherit

Negative values are not allowed.

The CSS example below shows you how to set the line height of a text.


p{
line-height: 1.5em;
}


Vertical Alignment Of An Image

This is an image image.

This is an image image has a vertical-align property with a value of top.

This is an image image has a vertical-align property with a value of bottom.


CSS Text Shadows

The CSS text-shadow property allows you to apply a shadow to a text. You can specify the horizontal shadow, the vertical shadow, the blur distance and the color of the shadow.

The CSS example below shows you how to apply a shadow to a text.


h2{
color: black;
text-shadow: 3px 3px 5px red;
}

This Is A Heading

The first value specifies the horizontal distance of the shadow. The second value specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value specifies the color of the shadow.

Internet Explorer 9 and earlier DO NOT support the text-shadow property.

Multiple Text Shadows

The CSS example below shows you how to apply two text shadows to a text.


h2{
color: #000;
text-shadow: 2px 2px 0 #fff, 4px 4px 0 #000;
}

This Heading Has Multiple Text Shadows


CSS Text Overflow

Every HTML element is essentially a rectangular box and CSS allows you to be able to control the sizing, position and behavior of each HTML element. The CSS text-overflow property allows you to specify how you would like that to be handled if content does overflow an element's box.

The table below shows the values that are available for the overflow property.

Property Values
overflow visible (default), hidden, scroll, auto

The CSS example below shows you how to set the overflow property value to visible. In general, there is no reason to set the value to visible.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

.box{
width: 150px;
height: 150px;
border: 1px solid black;
overflow: visible;
}

</style>

</head>
<body>

<div class="box">

<p">
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
</p>

</div>

</body>
</html>

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

The CSS example below shows you how to set the overflow property value to hidden. When the value of the overflow property is set to hidden, any content that overflows outside of the containing element is not displayed.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

.box{
width: 150px;
height: 150px;
border: 1px solid black;
overflow: hidden;
}

</style>

</head>
<body>

<div class="box">

<p>
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
</p>

</div>

</body>
</html>

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

The CSS example below shows you how to set the overflow property value to scroll. If any content overflows beyond the containing element, scrollbars can be used to view the rest of the content.

Most web browsers now handle both the scroll and the auto values the same.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

.box{
width: 150px;
height: 150px;
border: 1px solid black;
overflow: scroll;
}

</style>

</head>
<body>

<div class="box">

<p">
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
</p>

</div>

</body>
</html>

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

The CSS example below shows you how to set the overflow property value to auto.

Most web browsers now handle both the scroll and the auto values the same.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

.box{
width: 150px;
height: 150px;
border: 1px solid black;
overflow: auto;
}

</style>

</head>
<body>

<div class="box">

<p">
This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.
</p>

</div>

</body>
</html>

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.


CSS Word Wrap

The word-wrap property with a value of break-word allows the web browser to break lines within words to prevent overflow.

The word-wrap property has been renamed overflow-wrap in the current draft of the CSS3 Text specification. Currently though, the property name word-wrap is supported in all web browsers.

The CSS example below shows you how to use the word-wrap property to prevent overflow.


<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>Your Page Title</title>

<style>

.box{
width: 150px;
height: 150px;
margin-bottom: 25px;
border: 1px solid black;
word-wrap: break-word;
}

</style>

</head>
<body>

<div class="box">

<p">
Thisaveryverylongword that is broken so that it does not go beyond the element that contains it.
</p>

</div>

</body>
</html>

Thisaveryverylongword that is broken so that it does not go beyond the element that contains it.