CSS Text

CSS Text

CSS text properties allow you to define several text styles such as color, alignment, spacing, decoration, transformation etc. very easily an effectively.

CSS has several properties for defining the styles of text. These properties give you precise control over the visual appearance of the characters, spaces, words, paragraphs, etc.

You can set following text properties of an element:

1) Text Color

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

With CSS, a color is most often specified by:

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
h1 {
   color: blue;
}
p {
   color: green;
}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it with the Editor

2) Text Direction

The direction property is used to change the text direction of an element.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
    direction: rtl;
}
</style>
</head>
<body>
<div>This is default text.</div>
<div class="ex1">This is right-to-left text.</div>
</body>
</html>
Try it with the Editor

3) Text Alignment

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

A text can be left or right aligned, centered, or justified.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
h1 {
    text-align: center;
}
h2 {
    text-align: left;
}
h3 {
    text-align: right;
}
</style>
</head>
<body>
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>
<p>The three headings above are aligned center, left and right.</p>
</body>
</html>
Try it with the Editor

4) Text Decoration

The text-decoration property is used to set or remove decorations from text.Possible values of this property are: none, underline, overline, line-through, blink and inherit.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
h1 {
   text-decoration:overline;
}
h2 {
   text-decoration:line-through;
}
h3 {
   text-decoration:underline;
}
h4 {
   text-decoration:blink;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<p>Note: The blink value is not supported in IE, Chrome, or Safari.</p>
</body>
</html>
Try it with the Editor

5) Text Transformation

The text-transform property is used to set the cases for a text.

It can be used to set the element's text content into uppercase or lowercase letters, or capitalize the first letter of each word. Possible values for the text-transform property are: none, capitalize, uppercase, lowercase and inherit.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
p.up {
     text-transform: uppercase;
} 
p.cap {
     text-transform: capitalize;
} 
p.low {
     text-transform: lowercase;
}    
</style>
</head>
<body>
<h1>Text-transform Effect</h1>
<p class="up">All characters of each word of this paragraph is transformed in uppercase.</p>
<p class="cap">The first character of each word of this paragraph is transformed in uppercase.</p>
<p class="low">All characters of each word of this paragraph is transformed in lowercase.</p>
<p>This is a normal paragraph.</p>
</body>
</html>
Try it with the Editor

6) Text Indentation

The text-indent property is used to set the indentation of the first line of text of an element. Possible values for the text-indent property are: percentage (%), length (specifying indent space) or inherit.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
p {
  text-indent: 100px;
}        
</style>
</head>
<body>
<h1>Text-indentation Effect</h1>
<p>The first line of this paragraph is indent by 100px. Play with the value of text-indent property to see how it works. Negative values are allowed.</p>
</body>
</html>
Try it with the Editor

7) Letter Spacing

The letter-spacing property is used to specify the space between the characters in a text.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
h1 {
   letter-spacing: -3px; 
}
p {
   letter-spacing: 10px;
}          
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it with the Editor

8) Line Height

The line-height property is used to specify the space between lines.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
p.one {
      line-height: 1.2;
      border: 1px solid #00ff00;
}
p.two {
      line-height: 200%;
      border: 1px solid #ff0000;
}           
</style>
</head>
<body>
<h1>Change the values to see how it works.</h1>
<p class="one">The line-height property sets the height between lines of text.
The line height of this paragraph is specified using number.
</p> <p class="two">The line-height property sets the height between lines of text.
The line height of this paragraph is specified using percentage.
</p> </body> </html>
Try it with the Editor

9) Word Spacing

The word-spacing property is used to specify the space between the words in a text.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
h1 {
    word-spacing: 10px;
}
h2 {
    word-spacing: -5px;
}       
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>
Try it with the Editor

10) Text Shadow

The text-shadow property adds shadow to text.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
h1 {
    text-shadow: 3px 2px red;
}     
</style>
</head>
<body>
<h1>Text-shadow effect</h1>
<p>Note:Internet Explorer 9 and earlier do not support the text-shadow property.</p>
</body>
</html>
Try it with the Editor