Web-Development-Tutorials Home

Web Development Tutorials
HTML Tutorials
CSS Tutorials
Javascript Tutorials
PHP Tutorials

Web-Development-Tutorials.com

Web Development Tutorials and Resources for Web Developers
from Beginners to Professionals

CSS Text Formatting Tutorial

CSS Text Formatting Tutorial

CSS text formatting properties allow you to control the appearance of text. They allow you to choose the color of text, align text, increase or decrease the space between characters, etc.


Setting the Color of Text

The following CSS code example shows how to set the color of text.

<html>

<head>
<style type="text/css">
p
{
color: red
}

</style>
</head>

<body>
<p>
The text in this paragraph will be red.
</p>
</body>
</html>

Click on CSS Text Example to the web page the above code produces.


Setting the Background-Color of Text

The following CSS code example shows how to set the back-ground of a part of the text.

<html>

<head>
<style type="text/css">
span.highlighttext
{
background-color:yellow
}

</style>
</head>

<body>
<p>
<span class="highlighttext">This is a text.</span> This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. <span class="highlighttext">This is a text.</span>
</p>
</body>
</html>

Click on CSS Text Example to the web page the above code produces.


Specifying the space between characters.

The following CSS code example shows how to specify the space between characters.

<html>

<head>
<style type="text/css">
h1
{
letter-spacing: -3px
}
h2
{
letter-spacing: 0.5cm
}

</style>
</head>

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

Click on CSS Text Example to the web page the above code produces.


Aligning Text

This CSS code example shows you how to align text.

<html>

<head>
<style type="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}

</style>
</head>

<body>
<h1>
This is header 1
</h1>
<h2>
This is header 2
</h2>
</body>
<h3>
This is header 3
</h3>
</html>

Click on CSS Text Example to the web page the above code produces.


Decorate Text

This CSS code example shows you how to decorate text.

<html>

<head>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration: blink}
a {text-decoration: none}

</style>
</head>

<body>
<h1>
This is header 1 will have a line above it
</h1>
<h2>
This is header 2 will be crossed through
</h2>
</body>
<h3>
This is header 3 will be underlined
</h3>
<h4>
This is header 4 should be blinking
</4>
<p>
<a href="http://freecsstutorial.com">This is link will have no text decoration</a>
</p>
</html>

Click on CSS Text Example to the web page the above code produces.


Indenting Text

The following CSS code example shows how to indent the first line of a paragraph.

<html>

<head>
<style type="text/css">
p {text-indent: 1cm}
</style>
</head>

<body>
<p>
The first line in this paragraph will be indented. 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>
The first line in this paragraph will also be indented. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph.
</p>
</html>

Click on CSS Text Example to the web page the above code produces.


Controlling the letters in Text

This CSS code example demonstrates how to control the letters in text. Pay close attention to which letters are uppercase, lowercase or capitalized in the code and in the browser example.

<html>

<head>
<style type="text/css">
p.one {text-transform: uppercase}
p.two {text-transform: lowercase}
p.three {text-transform: capitalize}

</style>
</head>

<body>
<p class="one">
All of the letters in this paragraph will be uppercase.
</p>
<p class="two">
All of the letters in this paragraph will be lowercase.
</p>
<p class="three">
All of the words in this text will have the first letter capitalized.
</p>
</html>

Click on CSS Text Example to the web page the above code produces.

Web Development Resources

Free Hit Counters
Free Music and
Online Radio Stations

Free SEO Tools
Free Page Rank Checker
Free Back Link Checker
Free Google Banned Checker
Free Keyword Density Checker
Free Link Popularity Checker
Free Search Engine Keyword Position Checker
Free Search Engines Lisitings Preview
Free Link Extractor
Free Source Code Viewer
Free Domain Tools
Free Domain Name Availability Tool
Free Domain Whois Lookup
Free Ping Test
Free Reverse/IP Lookup
Misc Free Web Development Resources View Web Browser Details