CSS Text

CSS provides a rich set of properties to control how text is displayed on a web page. These properties affect color, alignment, spacing, decoration, transformation, indentation, and more. Proper text styling is a core part of making a web page readable and professional.

1. color

Sets the color of the text content.

p {
    color: #333333;   /* Dark gray — easier to read than pure black */
}

h1 {
    color: #1a1a2e;
}

2. text-align

Controls the horizontal alignment of text within its container.

h1 { text-align: center; }
p  { text-align: left; }     /* Default for most languages */
p  { text-align: right; }
p  { text-align: justify; }  /* Text stretches to fill the full line width */

3. text-decoration

Adds or removes decorative lines on text such as underlines and strikethroughs.

a {
    text-decoration: none;         /* Removes the default underline from links */
}

.deleted-item {
    text-decoration: line-through;  /* Strikethrough effect */
}

.important {
    text-decoration: underline;
}

h2 {
    text-decoration: overline;     /* Line above the text */
}

4. text-transform

Changes the capitalization of text without modifying the actual HTML content.

.header-title {
    text-transform: uppercase;    /* CONVERTS TO ALL CAPS */
}

.tag {
    text-transform: lowercase;    /* converts to all lowercase */
}

.card-title {
    text-transform: capitalize;   /* Capitalizes First Letter Of Each Word */
}

5. text-indent

Adds indentation to the first line of a paragraph.

p {
    text-indent: 40px;  /* First line starts 40px to the right */
}

6. letter-spacing

Controls the space between individual characters.

h1 {
    letter-spacing: 3px;   /* Extra space between each letter */
}

.tight-text {
    letter-spacing: -1px;  /* Characters closer together */
}

7. word-spacing

Controls the space between individual words.

p {
    word-spacing: 8px;  /* Extra space between each word */
}

8. line-height

Sets the vertical distance between lines of text. It is measured as a multiplier of the font size. A value of 1.6 means the line height is 1.6 times the font size, providing comfortable reading spacing.

p {
    font-size: 16px;
    line-height: 1.6;   /* 16 × 1.6 = 25.6px line height */
}

/* Also accepts fixed values */
h2 {
    line-height: 40px;
}

9. white-space

Controls how white space and line breaks inside an element are handled.

pre {
    white-space: pre;   /* Preserves spaces and line breaks (default for <pre> elements) */
}

p {
    white-space: nowrap;  /* Prevents text from wrapping to the next line */
}

p {
    white-space: normal;  /* Default — collapses extra spaces and wraps text */
}

10. text-shadow

Adds a shadow behind text. The values are: horizontal offset, vertical offset, blur radius, and color.

h1 {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    /* 2px right, 2px down, 5px blur, 30% opacity black shadow */
}

/* Glowing effect */
.glow {
    text-shadow: 0px 0px 10px #00bfff;
}

11. text-overflow

Specifies what happens when text overflows its container. Most useful when combined with overflow: hidden and white-space: nowrap.

.card-title {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  /* Shows ... at the end of cut-off text */
}

Complete Text Styling Example

body {
    color: #444;
    line-height: 1.7;
}

h1 {
    color: #1a1a2e;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.15);
}

p {
    font-size: 16px;
    text-align: justify;
    text-indent: 20px;
    word-spacing: 2px;
}

a {
    color: #2980b9;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

Summary

CSS text properties control every visual aspect of text content. color and text-align are the most frequently used. text-decoration handles underlines and strikethroughs, while text-transform manages capitalization without changing HTML. line-height and letter-spacing improve readability. text-shadow adds depth, and text-overflow handles long text gracefully in constrained containers.