CSS Tutorial - CSS Text

• « Previous
• Next »

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

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

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;
}

Related Properties

• Next »
• « Previous