HTML, HTML5, XHTML, CSS and CSS3 Tutorials
CSS Text Tutorials
CSS text properties allow you to control the appearance and spacing of text.
CSS Text Color
The CSS color property is used to specify the color of a text.
The code example below shows you how to specify the color of text.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>LearnWebsiteDesign.com</title>
<style type="text/css">
p.red
{
color:red;
}
p.blue
{
color:blue
}
</style>
<body>
<p class="red">
This text has a color of red.
</p>
<p class="blue">
This text has a color of blue.
</p>
</body>
</html>
The web page that the code example creates is here: CSS color Property Example.
CSS Text Decoration
The CSS text-decoration property specifies the decoration added to text. Most of the time the text-decoration property
is used to remove underlines from hyperlinks.
The code example below shows you how to remove underlines from hyperlinks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>LearnWebsiteDesign.com</title>
<style type="text/css">
a
{
text-decoration:none
}
</style>
<body>
<p>
This is a <a href="http://freecssvideotutorials.com/" title="free css video tutorials">text link</a>.
</p>
</body>
</html>
The web page that the code example creates is here: CSS color Property Example.
CSS Text Alignment
CSS allows you to control the horizontal alignment of text in an element.
Text can be centered, or aligned to the left or right, or justified.
The code example below shows you how to align text.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>LearnWebsiteDesign.com</title>
<style type="text/css">
p.left
{
text-align:left;
}
p.center
{
text-align:center;
}
p.right
{
text-align:right;
}
</style>
<body>
<p>
This is a paragraph with no text alignment applied to it.
</p>
<p class="left">
This paragraph is aligned to the left.
</p>
<p class="center">
This paragraph is aligned to the center.
</>
<p class="right">
This paragraph is aligned to the right.
</p>
</body>
</html>
The web page that the code example creates is here: CSS text-alignment Property Example.
CSS Text Transformation
The CSS text-transform property specifies the capitalization of text. You can specify to turn every letter into capital letters,
only lowercase letters or to turn only the first letter of every word into a capital letter.
The code example below shows you how to specify the capitization of text.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>LearnWebsiteDesign.com</title>
<style type="text/css">
p.uppercase
{
text-transform:uppercase;
}
p.lowercase
{
text-transform:lowercase;
}
p.capitalize
{
text-transform:capitalize;
}
</style>
<body>
<p>
This is a paragraph.
</p>
<p class="uppercase">
This is a paragraph.
</p>
<p class="lowercase">
This is a paragraph.
</>
<p class="capitalize">
This is a paragraph.
</p>
</body>
</html>
The web page that the code example creates is here: CSS text-transformation Property Example.
CSS Text Indentation
The CSS text-indent property allows you control the indentation of the first line in a text-block.
The code example below shows you how to specify the indentation of text.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>LearnWebsiteDesign.com</title>
<style type="text/css">
p.indent
{
text-indent:200px;
}
</style>
<body>
<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.
</p>
<p class="indent">
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>
</body>
</html>
The web page that the code example creates is here: CSS text-indent Property Example.
CSS Letter Spacing
The CSS letter-spacing property can be used to set the space between characters in a text.
The code example below shows you how to set the letter spacing between characters in a text.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>LearnWebsiteDesign.com</title>
<style type="text/css">
p.one
{
letter-spacing:5px;
}
p.two
{
letter-spacing:-2px;
}
</style>
<body>
<p>
This is a paragraph.
</p>
<p class="one">
This paragraph has a letter-spacing of 5 pixels.
</p>
<p class="two">
This paragraph has a letter-spacing of -2 pixels.
</p>
</body>
</html>
The web page that the code example creates is here: CSS letter-spacing Property Example.
CSS Word Spacing
The CSS word-spacing property allows you to control the spacing between words in a text.
The code example below shows you how to set the word spacing between words in a text.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>LearnWebsiteDesign.com</title>
<style type="text/css">
p.one
{
word-spacing:5px;
}
p.two
{
word-spacing:20px;
}
</style>
<body>
<p>
This is a paragraph.
</p>
<p class="one">
This paragraph has a word spacing of 5 pixels.
</p>
<p class="two">
This paragraph has a word spacing of 20 pixels.
</p>
</body>
</html>
The web page that the code example creates is here: CSS word-spacing Property Example.
CSS Line Spacing
The CSS line-height property allows you to control the spacing between lines in a text.
The code example below shows you how to set the spacing between lines in a text.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>LearnWebsiteDesign.com</title>
<style type="text/css">
p.one
{
line-height:15px;
}
p.two
{
line-height:50px;
}
</style>
<body>
<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="one">
This paragraph has a line height of 15 pixels. This paragraph has a line height of 15 pixels. This paragraph has a line height
of 15 pixels. This paragraph has a line height of 15 pixels. This paragraph has a line height of 15 pixels. This paragraph has
a line height of 15 pixels. This paragraph has a line height of 15 pixels. This paragraph has a line height of 15 pixels. This
paragraph has a line height of 15 pixels. This paragraph has a line height of 15 pixels.
</p>
<p class="two">
This paragraph has a line height of 50 pixels. This paragraph has a line height of 50 pixels. This paragraph has a line height
of 50 pixels. This paragraph has a line height of 50 pixels. This paragraph has a line height of 50 pixels. This paragraph has a
line height of 50 pixels. This paragraph has a line height of 50 pixels. This paragraph has a line height of 50 pixels. This
paragraph has a line height of 50 pixels. This paragraph has a line height of 50 pixels.
</p>
</body>
</html>
The web page that the code example creates is here: CSS line-height Property Example.
Disable Text Wrapping
The CSS white-space property allows you to control the white-space inside of an element.
The code example below shows you how to control the white-space inside of an element.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>LearnWebsiteDesign.com</title>
<style type="text/css">
p.pre
{
white-space:pre;
}
p.nowrap
{
line-height:50px;
}
</style>
<body>
<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="pre">
This paragraph has a white-space property with a value of pre. This paragraph has a white-space property with a value of pre.
This paragraph has a white-space property with a value of pre. This paragraph has a white-space property with a value of pre.
</p>
<p class="nowrap">
This paragraph has a white-space property with a value of nowrap. This paragraph has a white-space property with a value of
nowrap. This paragraph has a white-space property with a value of nowrap. This paragraph has a white-space property with a
value of nowrap.
</p>
</body>
</html>
The web page that the code example creates is here: CSS white-space Property Example.
CSS Text Direction
The CSS direction property allows you to specify the direction of a text.
The code example below shows you how to specify the direction of a text.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>LearnWebsiteDesign.com</title>
<style type="text/css">
p.rtl
{
direction:rtl;
}
</style>
<body>
<p>
This is a paragraph. This is a paragraph.
</p>
<p class="rtl">
This is a paragraph. This is a paragraph.
</p>
</body>
</html>
The web page that the code example creates is here: CSS direction Property Example.
CSS Image Vertical Alignment
The CSS vertical-alignment property sets the vertical alignment of a text or an image.
The code example below shows you how to set the vertical alignment of an image.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>LearnWebsiteDesign.com</title>
<style type="text/css">
img.top
{
vertical-align:text-top;
}
img.middle
{
vertical-align:middle;
}
img.bottom
{
vertical-align:text-bottom;
}
</style>
<body>
<p>
This is a paragraph. <img class="top" src="css_valid_icon.png" alt="image" title="image" /> This is a paragraph.
</p>
<p>
This is a paragraph. <img class="middle" src="css_valid_icon.png" alt="image" title="image" /> This is a paragraph.
</p>
<p>
This is a paragraph. <img class="bottom" src="css_valid_icon.png" alt="image" title="image" /> This is a paragraph.
</p>
</body>
</html>
The web page that the code example creates is here: CSS vertical-align Property Example.
