CSS Text

What Is CSS Text?

CSS text styling means applying CSS properties that control the visual appearance and behavior of text. These properties are commonly used for headings, paragraphs, links, buttons, captions, labels, navigation menus, cards, tables, and article content.

p {
  color: #212529;
  text-align: left;
  line-height: 1.6;
}

Text styling should make content easier to read, scan, and understand across mobile, tablet, and desktop screens.

Why CSS Text Styling Is Important

• Improves readability for paragraphs and long-form content.
• Creates visual hierarchy between headings, subtitles, and body text.
• Helps users scan links, labels, buttons, and navigation items.
• Supports accessibility with readable spacing and contrast.
• Improves responsive design across screen sizes.
• Helps present SEO content clearly to users.
• Supports brand style through consistent typography and text treatment.

CSS Text Properties Cheatsheet

The following table explains the most commonly used CSS text properties with examples.

CSS Text Color

The color property controls the color of text.

body {
  color: #212529;
  background-color: #ffffff;
}

.text-primary {
  color: #0d6efd;
}

.text-danger {
  color: #842029;
}

Always check color contrast between text and background for readability and accessibility.

CSS text-align

The text-align property controls horizontal alignment of inline content.

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

Center alignment works well for short headings and hero sections. Left alignment is usually better for long paragraphs.

CSS text-decoration

The text-decoration property adds visual lines to text. It is commonly used for links.

a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

a:hover,
a:focus-visible {
  text-decoration-thickness: 0.12em;
}

.old-price {
  text-decoration: line-through;
}

Do not remove link underlines unless you provide another clear visual indicator.

CSS text-transform

The text-transform property changes the visual casing of text.

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.lowercase {
  text-transform: lowercase;
}

Use uppercase carefully because large blocks of uppercase text can be harder to read.

CSS text-indent

The text-indent property indents the first line of a text block.

.article-content p {
  text-indent: 2rem;
}

Text indentation is common in editorial layouts, books, and long-form reading experiences.

letter-spacing and word-spacing

letter-spacing controls space between characters. word-spacing controls space between words.

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.readable-text {
  word-spacing: 0.05em;
}

Use spacing carefully. Too much letter spacing can reduce readability.

CSS line-height

line-height controls the vertical spacing between lines of text.

body {
  font-size: 1rem;
  line-height: 1.6;
}

.article-content {
  max-width: 70ch;
  line-height: 1.7;
}

A line height between 1.5 and 1.8 is usually comfortable for paragraphs and long-form content.

CSS text-shadow

The text-shadow property adds shadow behind text.

.hero-title {
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

Text shadows can improve contrast on images, but they should not replace proper readable background overlays.

CSS white-space

The white-space property controls how spaces and line breaks are handled.

.badge {
  white-space: nowrap;
}

CSS text-overflow and Ellipsis

The text-overflow property controls how hidden overflowing text is shown. It is commonly used with overflow: hidden and white-space: nowrap.

.single-line-title {
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Ellipsis is useful for cards, table cells, navigation labels, and compact UI layouts.

CSS overflow-wrap and word-break

Long words, URLs, and code strings can break layouts. Use wrapping properties to prevent horizontal scrolling.

.content {
  overflow-wrap: break-word;
}

.code-text {
  word-break: break-all;
}

Prefer overflow-wrap: break-word; for normal content. Use word-break: break-all; carefully because it can reduce readability.

Text Direction and Writing Mode

CSS can support different writing directions and writing systems.

.rtl-text {
  direction: rtl;
}

.vertical-title {
  writing-mode: vertical-rl;
}

For multilingual websites, combine proper HTML language attributes with CSS only when visual direction or writing mode needs styling.

CSS Text and Accessibility

Accessible text is readable, scalable, well-spaced, and high contrast.

body {
  font-size: 1rem;
  line-height: 1.6;
  color: #212529;
  background-color: #ffffff;
}

a {
  color: #0a58ca;
  text-decoration: underline;
}

a:focus-visible {
  outline: 3px solid #111111;
  outline-offset: 3px;
}

• Use readable font sizes.
• Keep enough line height.
• Use strong color contrast.
• Do not use color alone for important meaning.
• Keep links visually recognizable.
• Avoid large blocks of centered or uppercase text.

CSS Text and SEO

CSS text styling does not directly create metadata or rankings, but it affects readability, mobile usability, accessibility, engagement, and page quality.

• Readable text helps users stay on the page longer.
• Good line length improves article reading experience.
• Responsive text improves mobile usability.
• Accessible text supports a larger audience.
• Clear link styling improves navigation and internal linking usability.

Common CSS Text Mistakes

• Using low contrast text colors.
• Removing underlines from links without another clear style.
• Using tiny font sizes for body text.
• Using too much letter spacing in paragraphs.
• Center-aligning long paragraphs.
• Using uppercase for large blocks of text.
• Forgetting line-height.
• Not handling long URLs or words.
• Using text shadows instead of proper contrast.

CSS Text Best Practices

• Use readable text color and background contrast.
• Use left alignment for long-form content.
• Use line-height around 1.5 to 1.8 for paragraphs.
• Use max-width with ch units for readable line length.
• Use underlines or clear visual cues for links.
• Use overflow-wrap: break-word; for long content.
• Use text-transform carefully.
• Avoid excessive text shadows.
• Test text on mobile, desktop, and zoomed views.
• Keep typography consistent across the site.

Key Takeaways

• CSS text properties control text appearance and behavior.
• color controls text color.
• text-align controls horizontal alignment.
• text-decoration is important for links.
• line-height improves readability.
• overflow-wrap helps prevent layout overflow.
• Good text styling improves accessibility, readability, UX, and SEO-friendly content presentation.