CSS Tutorial - CSS Text

By using CSS we can control text style. For example, we can change text color, we can control text alignment, indent, letter-spacing and etc.

Text Color

The color property sets the color of the text.

We can use the following ways to specify the colors.

  • a HEX value - like "#ff00ee"
  • an RGB value - like "rgb(255,0,255)"
  • a color name - like "red"

The following code sets header 1 to red.

h1 {
    color: red;

Text Align

text-align specifies the alignment for a block of text

Its possible values are: start end left right center justify.

The following code shows the text-align property applied to blocks of text.

p#left {
    text-align: left;
p#center {
    text-align: center;
p#right {
    text-align: right;
p#justify {
    text-align: justify;


text-decoration applies a decoration to a block of text, such as underlining it.

Its possible values are:none underline overline line-through blink.

The default value is none and no decoration is applied.

The following code shows how to use the text-decoration and text-transform Properties.

p  {
    text-decoration: line-through;
    text-transform:  uppercase;
p.one {
    text-decoration: underline;
p.two {
    text-decoration: overline;
p.three {
    text-decoration: line-through;
p.four {
    text-decoration: underline overline line-through;


text-transform applies a transformation to a block of text.

Its possible values are: none capitalize uppercase lowercase.

The default value is none.

The following code shows how to use the text-decoration and text-transform Properties.

span.lower {
    text-transform: lowercase;
span.upper {
    text-transform: uppercase;
span.capitalize {
    text-transform: capitalize;
span.example {
    background: pink;
Property Description CSS
letter-spacing Set the space between characters in a text1
tab-size Set the tab char size3
word-break Set line breaking rules for non-CJK scripts3
word-spacing Set the space between words in a text1
word-wrap Break long, unbreakable words3
text-align-last how the last line is aligned3
text-align horizontal alignment of text1
text-decoration-color Set the color of the text-decoration3
text-decoration-line Set the line style for text-decoration3
text-decoration-style Set decoration style3
text-decoration Shorthand property for decoration3
text-indent Set text index size1
text-justify Set the justification method3
text-overflow Set what to do for overflowed content3
text-shadow Add shadow to text3
text-transform Set the capitalization of text1