CSS Text Appearance

CSS includes loads of powerful commands for styling text - from changing the font and color to adding underlines, you can add pretty much any effect you can think of to an HTML element that includes text. Let's run through all of the commands we can use and take a look at what sort of effects they can produce.

I've arbitrarily split CSS text styling into three areas - text appearance covers aspects such as changing the font color and decoration, font properties covers how to change the font face, size, and weight among others, and text positioning and spacing covers things like line and letter spacing. At the very least it would be worth skimming through these sections and checking out the examples, just to get an idea of what each command does.

Text color

Allows you to set the font color, by specifying either a color name, RGB value or Hex code:

p {
color: blue
}

or

p {
color: rgb(0,0,255)
}

or

p {
color: #0000FF
}

text-decoration

The CSS text-decoration property can be used to apply various effects to your text. It is most commonly used to underline or strikethrough text (underline, line-through), but it can also be used to add a line above the text (overline) or to make the text flash (blink). You can also specify a text-decoration value of none, which is particularly useful for removing underlines from HTML links, as we will see a little later on.

Usage is as follows:

p {
text-decoration: underline
}

text-transform

The CSS text-transform property can be used to change the case of our text. Values can be either capitalize, uppercase, lowercase or none.

p {
text-transform: uppercase
}

Note that capitalize and uppercase are not the same thing - capitalize makes just the first letter of each word uppercase, whereas uppercase makes all letters uppercase.