CSS Text

Previous Next

Text properties control color, alignment, spacing, decoration, case, shadows, wrapping, and truncation. Use these to improve readability and hierarchy.

1) Text Color


p {
  color: #333;
}

Readable body color often uses a dark gray instead of pure black.

2) Text Alignment


.left   { text-align: left; }
.center { text-align: center; }
.right  { text-align: right; }
.justify{ text-align: justify; }

Left aligned

Center aligned

Right aligned

Justified text will stretch to fill the width of the container, adjusting spaces between words.

3) Line Height (Leading)


p.tight { line-height: 1.2; }
p.loose { line-height: 1.8; }

Tight line-height makes lines closer together. Use carefully to avoid hurting readability.

Loose line-height gives more breathing room and improves readability for long paragraphs.

4) Letter & Word Spacing


.tracking { letter-spacing: 0.05em; }
.wordspace { word-spacing: 0.2em; }

Letter spacing increased slightly

Word spacing increased slightly

5) Text Transform (Case)


.upper { text-transform: uppercase; }
.lower { text-transform: lowercase; }
.cap   { text-transform: capitalize; }

Heading style

SHOUTING reduced

page section title

6) Text Decoration


a           { text-decoration: none; }
.under     { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.dotted    { text-decoration: underline dotted; }

Link without underline

Underlined text

Discounted ₹999

Dotted underline is often used for hints

7) Text Shadow


.shadow { text-shadow: 1px 1px 2px rgba(0,0,0,.25); }

Soft text shadow headline

8) White-space & Wrapping


.ws-normal  { white-space: normal; }     /* wrap as needed */
.ws-nowrap  { white-space: nowrap; }     /* single line */
.ws-pre     { white-space: pre; }        /* preserves spaces & line breaks */
.ws-prewrap { white-space: pre-wrap; }   /* preserves breaks, wraps long lines */

Normal wrapping will flow long text into multiple lines as needed.

No wrap prevents line breaks and can overflow its container if too long.

Pre keeps spaces and line breaks intact.

Pre-wrap keeps line breaks and wraps long long long content as well.

9) Truncate With Ellipsis


.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

This is a very long title that will be truncated with an ellipsis at the end when it exceeds the container width.

10) Text Indent (First Line)


.indent { text-indent: 2em; }

The first line of this paragraph is indented using text-indent. Useful for magazine or book styles.

Quick Notes:

Use comfortable line-height (1.5–1.8) for body text.
Increase readability with proper contrast and spacing.
Use text-transform for case, text-decoration for lines.
Control wrapping with white-space; truncate with text-overflow: ellipsis.
Shadows should be subtle; avoid harming readability.

Previous Next