Text in CSS is controlled by properties that affect how written content appears, flows, aligns, wraps, and behaves inside an element. Text styling is one of the most important parts of web design because most websites are built around reading. Good text CSS makes content clear, comfortable, and scannable. Poor text CSS makes even useful information hard to consume.
CSS has many text-related properties. Some control color, alignment, decoration, and case. Others control spacing between letters, words, lines, and paragraphs. Some properties handle wrapping, overflow, indentation, and direction. These details may look small, but together they decide whether a page feels readable or rough.
Text Color
The color property controls the foreground text color of an element. It is inherited by many child elements, so setting it on the body is a common way to define default text color for the whole page.
body {
color: #222222;
}
.muted {
color: #666666;
}Text color should always be chosen with its background in mind. Light gray text on a white background may look elegant in a mockup but can be difficult to read, especially on low-quality screens or in bright light.
Text Alignment
The text-align property controls horizontal alignment of inline content inside a block. Common values are left, right, center, and justify.
.hero {
text-align: center;
}
.article {
text-align: left;
}Centered text can work well for short headings, buttons, hero sections, and small labels. Long paragraphs are usually easier to read when aligned left in left-to-right languages. Justified text can create awkward spacing on narrow screens if not handled carefully.
Text Decoration
The text-decoration property controls lines added to text, such as underline, overline, and line-through. It is commonly used with links.
a {
text-decoration: underline;
}
.old-price {
text-decoration: line-through;
}Underlines are important because they help users recognize links. Removing link underlines everywhere can hurt usability if links are not clearly styled in another accessible way.
Text Transform
The text-transform property changes the capitalization display of text without changing the actual HTML text. Common values include uppercase, lowercase, and capitalize.
.label {
text-transform: uppercase;
letter-spacing: 0.08em;
}Uppercase text can work for small labels, badges, navigation items, and buttons. Avoid using it for long paragraphs because uppercase blocks are harder to read.
Line Height
The line-height property controls the vertical space between lines of text. It is one of the most important readability properties in CSS.
body {
font-size: 18px;
line-height: 1.6;
}A unitless line height is usually a good choice because it scales with font size. Body text often feels comfortable with a line height between about 1.4 and 1.8, depending on font, size, and line length.
Letter Spacing and Word Spacing
The letter-spacing property adjusts space between characters. The word-spacing property adjusts space between words. These should be used carefully because too much spacing can harm readability.
.eyebrow {
text-transform: uppercase;
letter-spacing: 0.12em;
}
.loose-text {
word-spacing: 0.2em;
}Letter spacing is common for short uppercase labels. It is less useful for normal paragraphs. Large word spacing can make text feel disconnected, so it should rarely be used for body content.
Text Indentation
The text-indent property indents the first line of text inside a block. It is more common in book-like layouts than modern web articles, but it is still valid CSS.
.chapter p {
text-indent: 2em;
}On websites, paragraph spacing is usually handled with margin instead of indentation. But indentation can be useful when copying a print-style reading pattern.
Text Wrapping
Text wrapping controls what happens when text reaches the edge of its container. Normal text wraps automatically at spaces. Long URLs, code-like strings, or very long words may overflow unless wrapping rules are added.
.article {
overflow-wrap: break-word;
}
.code-label {
white-space: nowrap;
}The overflow-wrap: break-word rule helps prevent long strings from breaking a layout. The white-space: nowrap rule prevents text from wrapping, which can be useful for small labels but risky for long content.
White Space in Text
The white-space property controls how spaces and line breaks are handled. Common values include normal, nowrap, pre, pre-wrap, and pre-line.
| Value | Behavior |
|---|---|
| normal | Collapses spaces and wraps text normally |
| nowrap | Collapses spaces but prevents wrapping |
| pre | Preserves spaces and line breaks, no normal wrapping |
| pre-wrap | Preserves spaces and line breaks, allows wrapping |
| pre-line | Collapses spaces but preserves line breaks |
The white-space property is especially useful for code displays, labels, badges, and content where line breaks matter.
Text Overflow
The text-overflow property controls how hidden overflowing text is shown. A common pattern is a single-line ellipsis.
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}All three declarations are needed for the classic ellipsis pattern. The text must stay on one line, overflow must be hidden, and text overflow must be set to ellipsis.
Text Shadow
The text-shadow property adds a shadow behind text. It accepts horizontal offset, vertical offset, blur radius, and color.
.hero-title {
color: white;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}Text shadow can improve readability over images, but it should not be used as the only fix for poor contrast. A background overlay or solid text container is usually more reliable.
Text Direction and Writing Flow
Most English websites use left-to-right text, but CSS also supports direction and writing-mode control. The direction property can set left-to-right or right-to-left direction. The writing-mode property can change text flow for vertical writing systems or special design cases.
.rtl-text {
direction: rtl;
}
.vertical-label {
writing-mode: vertical-rl;
}These properties should be used with care. For real multilingual content, correct HTML language and direction attributes are usually more important than forcing direction only through CSS. CSS can support the presentation, but document semantics should still be correct.
Text Selection Styling
CSS can style selected text using the ::selection pseudo-element. This is a small detail, but it can make a site feel more polished when used with good contrast.
::selection {
background-color: #111160;
color: white;
}Selection styles should stay readable. Avoid low-contrast combinations because selected text is still text the user may want to copy or read.
Font Properties vs Text Properties
Beginners sometimes mix font properties and text properties together. Font properties control the typeface and font behavior, such as font-family, font-size, font-weight, and font-style. Text properties control formatting of the text flow, such as alignment, decoration, spacing, transformation, and wrapping.
| Group | Examples | Purpose |
|---|---|---|
| Font properties | font-size, font-family, font-weight | Control the typeface and font appearance |
| Text properties | text-align, text-decoration, text-transform | Control text formatting and flow |
| Spacing properties | line-height, letter-spacing, word-spacing | Control readable spacing |
Both groups work together. A paragraph needs a readable font size and family, but it also needs comfortable line height, good contrast, sensible alignment, and safe wrapping behavior.
Text Styling for Links
Links are text, but they also represent actions or navigation. Their styling should make them easy to identify. Color alone may not be enough, especially for users with color vision differences. Underlines, font weight, icons, or clear hover and focus states can help links stand out.
a {
color: #111160;
text-decoration: underline;
text-underline-offset: 0.18em;
}
a:hover,
a:focus {
text-decoration-thickness: 2px;
}The text-underline-offset property improves underline spacing, while text-decoration-thickness can make interaction states clearer. Link styling should be consistent across the site so users do not have to guess what is clickable.
Text Styling for Code and Technical Content
Technical articles often contain inline code, file names, commands, and code blocks. These need different text styling from normal paragraphs. Inline code should be visually distinct but not oversized. Code blocks should preserve spacing, allow horizontal scrolling when needed, and avoid breaking the article layout.
code {
font-family: monospace;
background-color: #f2f2f2;
padding: 0.15em 0.35em;
border-radius: 4px;
}
pre {
overflow-x: auto;
}This kind of styling helps readers separate explanation from literal code. For programming posts, readable code text is part of the learning experience, not just decoration.
Text Styling and Responsive Design
Text must be tested on small screens, not only desktop. A heading that looks balanced on a wide monitor may wrap awkwardly on mobile. Long words, labels, buttons, and navigation links can also overflow if the design assumes too much space.
Responsive text styling usually combines sensible font sizes, flexible line heights, safe wrapping, and enough spacing between sections. The goal is not only to make text fit, but to keep it comfortable to read at every screen size.
Readable Text Styling
Readable text depends on multiple CSS choices working together. Font size, line height, line length, contrast, spacing, and alignment all matter. A page with a good font but poor line height can still feel uncomfortable. A page with good line height but low contrast can still fail readability.
- Use strong contrast between text and background.
- Keep body text line height comfortable.
- Avoid very long line lengths.
- Use centered alignment mostly for short text.
- Do not overuse uppercase text.
- Make links visually recognizable.
- Prevent long strings from breaking layouts.
Common Text CSS Mistakes
- Using low contrast text for body content.
- Removing link underlines without a clear replacement style.
- Using uppercase for long paragraphs.
- Setting line height too tight.
- Using nowrap on text that needs to fit mobile screens.
- Relying on text shadow instead of proper contrast.
Text in CSS FAQ
Which CSS property changes text color?
The color property changes the text color of an element.
What is the best line-height for paragraphs?
There is no single best value, but body text commonly works well around 1.4 to 1.8. A unitless value like 1.6 is a strong starting point.
How do I make text show an ellipsis?
Use white-space: nowrap, overflow: hidden, and text-overflow: ellipsis on an element with constrained width.
Should links always be underlined?
Links should be clearly recognizable. Underlines are the safest default, but another accessible visual treatment can also work if it is obvious.
Continue learning CSS in order
Follow the topic sequence with the previous and next lesson.