CSS: CSS Text - Learn CSS for Free and Fun

What we can do with CSS Text?

 We can set the color of the text
 We can set the background-color of the text
 We can specify the space between characters
 We can specify the space between lines
 We can align the text
 We can add attributes to the text
 We can indent text
 We can control the letters in a text
 We can increase the white space between words
 We can disable text wrapping inside an element


How CSS Text is used?

Syntax: tag1 { color: color1;}

Example: p {color: red;}

The CSS text decorates the text of the website and sets the background color. Besides this the
CSS text also sets the space between the characters and between lines. It further incorporates
indent text, aligns the text, controls the letters in the text and increases the white space
between the words. The CSS text adds attributes to the text, changes its direction wherever
necessary and disables text wrapping inside an element.

The CSS text changes the webpage in terms of color and alignment with the following syntaxes
respectively:

<style type="text/css">
h1 {color: #00ff00;}
h2 {color: #dda0dd;}
p {color: rgb(0,0,255);}
</style>

and

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

To change the background-color of the text, the syntax used is

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

The text specifies the space between characters and lines, through these syntaxes respectively

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

and

<style type="text/css">
p.small {line-height: 90%;}
p.big {line-height: 200%;}
</style>

It adds to the indent text by adding the syntax

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

It controls the letter in a text by the syntax

<style type="text/css">
p.uppercase {text-transform: uppercase;}
p.lowercase {text-transform: lowercase;}
p.capitalize {text-transform: capitalize;}
</style>

The CSS text also increases the white space between words and disables text wrapping inside
an element by adding the following syntax respectively

<style type="text/css">
p {
word-spacing: 30px;
}
</style>
and
<style type="text/css">
p {
white-space: nowrap;
}
</style>