CSS text properties

With CSS text properties, you can define how text is displayed. You can specify the color of text, alignment of text, and more.

This lesson focuses on:

Setting the color of text
Aligning text
Decorating text
Setting letter spacing

Setting the color of text

Text color is set with the color property. You can specify the color of text with a color name, a hex value, or an RGB value.

Example:

<html>
<head>
<title>Background properties</title>
<style type="text/css">
<!--
h1 {color: green;}
p {color: #00008B;}
p.text{color: rgb(47, 49, 49);}
-->
</style>
</head>
<body>
<h1>This text is green</h1>
<p>
This text is darkblue
</p>
<p class="text">
This text is darkslategray
</p>
</body>
</html>

Output:

This text is green

This text is darkblue

This text is darkslategray

In the above example, text displayed using the <h1> heading tag is set to be green. Text displayed using the <p> tag is set to be darkblue with its hex value 00008B. Text displayed with the <p> tag that is part of the "text" class is set to be darkslategray with its RGB value (47, 49, 49).

Aligning text

The alignment of text in an element is set with the text-align property. With this property, you can set text to the left, right, or center.

Example:

<html>
<head>
<title>Background properties</title>
<style type="text/css">
<!--
h2 {text-align: left;}
p {text-align: center;}
h1 {text-align: right;}
-->
</style>
</head>
<body>
<h2>This text is aligned to the left</h2>
<p>This text is aligned to the center</p>
<h1>This text is aligned to the right</h1>
</body>
</html>

Output:

This text is aligned to the left

This text is aligned to the center

This text is aligned to the right

In the above example, text displayed using the <h2> heading tag is set to be aligned to the left. Text declared using the <b> tag is set to be aligned to the right. Text displayed using the <p> is set to be aligned to the center.

Decorating text

Text decoration is set with the text-decoration property. With this property, you can set text to be underlined, have an overline, and more.

Example:

<html>
<head>
<title>Background properties</title>
<style type="text/css">
<!--
p {text-decoration: underline;}
a {text-decoration: overline;}
h2 {text-decoration: line-through;}
h1 {text-decoration: blink;} 
-->
</style>
</head>
<body>
<p>
This text is underlined
</p>
<a href="http://www.landofcode.com">
Landofcode.com main page
</a>
<h2>This text has a line through it</h2>
<h1>This text is blinking</h1>
</body>
</html>

Output:

This text is underlined

Landofcode.com main page

This text has a line through it

This text is blinking

In the above example, text displayed using the <p> tag is set to be underlined. Links are set to have an overline. Text displayed using the <h2> tag is set to have a line through it. Text displayed using the <h1> tag is set to be blinking.

Setting letter spacing

Letter spacing is set with the letter-spacing property. You can increase or decrease the letter spacing between text with this property. The letter-spacing property takes the value "normal" for normal spacing between text characters or a numeric attribute specified by pixels followed by "px" for a fixed space between text characters.

Example:

<html>
<head>
<title>Background properties</title>
<style type="text/css">
<!--
p {letter-spacing: normal;}
p.two {letter-spacing: 5px;}
p.three {letter-spacing: 10px;}
p.four {letter-spacing: 15px;}
-->
</style>
</head>
<body>
<p>
The characters in this paragraph have normal spacing
</p>
<p class="two">
The characters in this paragraph have a spacing of 5 pixels
</p>
<p class="three">
The characters in this paragraph have a spacing of 10 pixels
</p>
<p class="four">
The characters in this paragraph have a spacing of 15 pixels
</p>
</body>
</html>

Output:

The characters in this paragraph have normal spacing

The characters in this paragraph have a spacing of 5 pixels

The characters in this paragraph have a spacing of 10 pixels

The characters in this paragraph have a spacing of 15 pixels

In the above example, text declared with the <p> tag is set to have normal spacing between characters. Text declared with the <p> tag that is part of the "two" class is set to have a spacing of 5 pixels between characters. Text declared with the <p> tag that is part of the "three" class is set to have a spacing of 10 pixels between characters. Text declared with the <p> tag that is part of the "four" class is set to have a spacing of 15 pixels between characters.