Text Styling

Lesson 1 of 16 Beginner Interactive

CSS provides many properties to control how text appears on your web pages.

Text Properties

color — sets the text color
text-align — horizontal alignment: left, right, center, justify
text-decoration — line on text: none, underline, line-through
text-transform — capitalization: uppercase, lowercase, capitalize
line-height — space between lines (e.g., 1.6 for 160%)
letter-spacing — space between characters
word-spacing — space between words
text-shadow — adds shadow to text
white-space — how whitespace is handled: nowrap, pre
word-break — how words break: break-word

Syntax

CSS

/* Text Alignment & Decoration */
h1 { text-align: center; }
a { text-decoration: none; }

/* Text Transform */
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }

/* Spacing */
p {
    line-height: 1.6;
    letter-spacing: 0.5px;
    word-spacing: 2px;
}

/* Text Shadow */
h1 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

Text Styling Properties

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Text Styling Properties</title>
    <style>
        h1 {
            font-size: 36px;
            font-weight: 700;
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #2c3e50;
        }
        p {
            font-size: 16px;
            line-height: 1.8;
            text-indent: 2em;
        }
        .link {
            text-decoration: underline;
            text-underline-offset: 4px;
            color: #3498db;
        }
        .small-caps {
            text-transform: uppercase;
            font-variant: small-caps;
        }
    </style>
</head>
<body>
    <h1>Text Styling</h1>
    <p>This paragraph shows font-size: 16px, line-height: 1.8 and text-indent: 2em. Here is <span class="small-caps">small caps text</span> via font-variant.</p>
    <p>Visit the <a class="link" href="#">documentation link</a> styled by text-decoration: underline.</p>
</body>
</html>

Try It Yourself

Practice

Exercise

Center-align an h1 and remove the underline from all links.

Answer

h1 { text-align: center; }
a { text-decoration: none; }

Exercise

Set the line-height of all paragraphs to 1.8 and letter-spacing to 0.5px.

Answer

p {
    line-height: 1.8;
    letter-spacing: 0.5px;
}

Quick Quiz

Which property removes the underline from a link?

text-decoration: none

text-transform: none

text-shadow: none

text-underline: false

text-decoration: none removes the default underline from links.

What value of text-transform capitalizes the first letter of each word?

uppercase

lowercase

capitalize

titlecase

capitalize transforms the first character of each word to uppercase.

Interview Questions

Line-height controls the vertical space between lines of text. A value of 1.5-1.8 provides comfortable reading. Too tight (1.0) makes text hard to read; too loose (2.5+) scatters the eye. It is one of the most important typography properties for user experience.

text-transform changes the visual casing of text (uppercase, lowercase, capitalize). font-variant controls typographic variations like small-caps (font-variant: small-caps). text-transform is purely visual; font-variant uses special font glyphs.

Next Lesson

Web Fonts