CSS Text

📣 Sponsor

CSS has a lot of ways we can manipulate a page, but perhaps one of the most fundamental is adjusting text and fonts on a page. There are a lot of ways to alter how text looks in CSS, let's take a look.

Text Color

To change text color, we use the color property.


p {
    color: red;
}

The above would make all paragraphs have red text.

Aligning text

We can align text within an element using text-align. This property can be set to left, right, center, or justify.


p {
    text-align: center;
}

This text has text align set to center!

Text Transformations

Text transformations refer to changing the case of text. We can do this with text-transform. This property can be set to:

initial - use the original case for the text, i.e. do not change any characters.
uppercase - change all characters to uppercase
lowercase - change all characters to lowercase.
capitalize - capitalize the first letter of each word.


p {
    text-transform: uppercase;
}

This text has text-transform set to uppercase!

Letter and Word Spacing

We can set the space between individual words and individual letters using word-spacing and letter-spacing respectively:


p {
    word-spacing: 10px;
    letter-spacing: 1px;
}

This text has word and letter spacing

Text Decoration

Text decoration refers to underlining, or adding lines above text. It can be adjusted with the text-decoration property. There are four main properties:

text-decoration-line - the position of the line. It can be underline, overline, none or line-through.
text-decoration-color - the color of the line.
text-decoration-style - the style of the line. This can be solid, double, dotted, dashed or wavy.
text-decoration-thickness - the width of the line, i.e. 5px.

These can all be condensed into one property, i.e:


p {
    text-decoration: underline red wavy 3px;
}

This text has text decoration

Text Shadow

This allows us to add a shadow to our text. It uses a slightly more complex syntax, which looks like this:

text-shadow: x-distance y-distance blur color;

For example, the below adds a red shadow 2px from the left, 2px from the top, and with 10px of blur:


p {
    text-shadow: 2px 2px 10px red;
}

This text has text shadow

Last Updated 1617479238324