CSS Text Styling

Master CSS text properties including alignment, decoration, transformation, spacing, and shadows for beautiful typography.

CSS text styling properties control how text appears and behaves on web pages. These properties are essential for creating readable, attractive content.

Text Align

Control horizontal text alignment:

.left {
  text-align: left; /* Default */
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.justify {
  text-align: justify; /* Stretches lines to full width */
}

Text Decoration

Add or remove text decorations:

.underline {
  text-decoration: underline;
}

.overline {
  text-decoration: overline;
}

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

.no-decoration {
  text-decoration: none; /* Remove default link underline */
}

/* Combined */
.fancy {
  text-decoration: underline overline;
}

Text Decoration Properties

.custom-decoration {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy; /* solid, double, dotted, dashed, wavy */
  text-decoration-thickness: 2px;
}

/* Shorthand */
.short {
  text-decoration: underline wavy red 2px;
}

Text Transform

Change text capitalization:

.uppercase {
  text-transform: uppercase; /* ALL CAPS */
}

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

.capitalize {
  text-transform: capitalize; /* Capitalize First Letter */
}

.none {
  text-transform: none; /* Default */
}

Text Indent

Indent the first line of text:

.paragraph {
  text-indent: 2em; /* Indent first line */
}

.negative {
  text-indent: -1em; /* Hanging indent */
  padding-left: 1em;
}

Letter Spacing

Control space between characters:

.tight {
  letter-spacing: -0.05em; /* Tighter */
}

.normal {
  letter-spacing: normal; /* Default */
}

.loose {
  letter-spacing: 0.1em; /* Looser */
}

.heading {
  letter-spacing: 0.05em; /* Subtle spacing for headers */
}

Word Spacing

Control space between words:

.normal {
  word-spacing: normal;
}

.loose {
  word-spacing: 0.3em;
}

.tight {
  word-spacing: -0.1em;
}

Text Shadow

Add shadows to text:

.shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  /* x-offset y-offset blur-radius color */
}

.multiple-shadows {
  text-shadow:
    1px 1px 2px black,
    0 0 10px blue,
    0 0 20px darkblue;
}

.embossed {
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.neon {
  color: #fff;
  text-shadow:
    0 0 10px #00ff00,
    0 0 20px #00ff00,
    0 0 30px #00ff00;
}

White Space

Control how whitespace is handled:

.normal {
  white-space: normal; /* Default - wrap lines */
}

.nowrap {
  white-space: nowrap; /* Don't wrap */
}

.pre {
  white-space: pre; /* Preserve whitespace like <pre> */
}

.pre-wrap {
  white-space: pre-wrap; /* Preserve whitespace but wrap */
}

.pre-line {
  white-space: pre-line; /* Collapse whitespace but respect line breaks */
}

Word Break

Control line breaking behavior:

.normal {
  word-break: normal;
}

.break-all {
  word-break: break-all; /* Break at any character */
}

.keep-all {
  word-break: keep-all; /* Don't break words */
}

.break-word {
  overflow-wrap: break-word; /* Break long words */
}

Text Overflow

Handle overflowing text:

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

.clip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip; /* Cuts off */
}

Multi-line Ellipsis

.multiline-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Number of lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Vertical Align

Align inline or table-cell elements vertically:

.baseline {
  vertical-align: baseline; /* Default */
}

.top {
  vertical-align: top;
}

.middle {
  vertical-align: middle;
}

.bottom {
  vertical-align: bottom;
}

.text-top {
  vertical-align: text-top;
}

.text-bottom {
  vertical-align: text-bottom;
}

.super {
  vertical-align: super; /* Superscript */
}

.sub {
  vertical-align: sub; /* Subscript */
}

Direction

Control text direction:

.ltr {
  direction: ltr; /* Left to right (default) */
}

.rtl {
  direction: rtl; /* Right to left (Arabic, Hebrew) */
}

Writing Mode

Control text orientation:

.horizontal {
  writing-mode: horizontal-tb; /* Default */
}

.vertical-rl {
  writing-mode: vertical-rl; /* Vertical, right to left */
}

.vertical-lr {
  writing-mode: vertical-lr; /* Vertical, left to right */
}

Practical Examples

Card with Truncated Text

.card-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.card-description {
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.6;
}

Stylized Headings

.hero-title {
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.subtitle {
  text-align: center;
  text-transform: capitalize;
  letter-spacing: 0.1em;
  color: #666;
}

Quote Styling

.quote {
  font-style: italic;
  font-size: 1.25rem;
  text-align: center;
  padding: 2rem;
  position: relative;
}

.quote::before {
  content: '"';
  font-size: 4rem;
  position: absolute;
  top: 0;
  left: 0;
  color: #e0e0e0;
}

Code Block

.code-block {
  font-family: "Courier New", monospace;
  background-color: #f5f5f5;
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
  white-space: pre;
  tab-size: 4;
}

Highlighted Text

.highlight {
  background: linear-gradient(180deg, transparent 60%, #ffeb3b 60%);
  font-weight: 600;
}

.mark {
  background-color: #ffeb3b;
  padding: 0 0.2em;
  border-radius: 2px;
}

Best Practices

Text Styling Best Practices

Use text-align: left for body text (better readability) - Avoid text-align: justify for short line lengths - Use text-transform sparingly - it affects screen readers - Remove link underlines only if alternative styling is clear - Use letter-spacing subtly for headings - Ensure text shadows don't reduce readability - Use text-overflow: ellipsis for truncating long text - Test text styling at different zoom levels - Consider RTL languages when needed - Maintain sufficient contrast for text shadows

Accessibility

Don't rely on color alone for meaning
Ensure text shadows don't reduce contrast
Use semantic HTML along with text styling
Test with screen readers
Avoid all-caps for long text
Maintain readable line lengths (45-75 characters)

Common Patterns

.breadcrumb {
  text-transform: capitalize;
  color: #666;
}

.breadcrumb a {
  text-decoration: none;
  color: #333;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

Badge

.badge {
  display: inline-block;
  padding: 0.25em 0.6em;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 0.25rem;
  background-color: #007bff;
  color: white;
}

Drop Cap

.drop-cap::first-letter {
  font-size: 3em;
  font-weight: bold;
  float: left;
  line-height: 1;
  margin-right: 0.1em;
}

Master text styling to create polished, professional typography!

CSS text styling properties control how text appears and behaves on web pages. These properties are essential for creating readable, attractive content.

Text Align

Control horizontal text alignment:

.left {
  text-align: left; /* Default */
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.justify {
  text-align: justify; /* Stretches lines to full width */
}

Text Decoration

Add or remove text decorations:

.underline {
  text-decoration: underline;
}

.overline {
  text-decoration: overline;
}

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

.no-decoration {
  text-decoration: none; /* Remove default link underline */
}

/* Combined */
.fancy {
  text-decoration: underline overline;
}

Text Decoration Properties

.custom-decoration {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy; /* solid, double, dotted, dashed, wavy */
  text-decoration-thickness: 2px;
}

/* Shorthand */
.short {
  text-decoration: underline wavy red 2px;
}

Text Transform

Change text capitalization:

.uppercase {
  text-transform: uppercase; /* ALL CAPS */
}

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

.capitalize {
  text-transform: capitalize; /* Capitalize First Letter */
}

.none {
  text-transform: none; /* Default */
}

Text Indent

Indent the first line of text:

.paragraph {
  text-indent: 2em; /* Indent first line */
}

.negative {
  text-indent: -1em; /* Hanging indent */
  padding-left: 1em;
}

Letter Spacing

Control space between characters:

.tight {
  letter-spacing: -0.05em; /* Tighter */
}

.normal {
  letter-spacing: normal; /* Default */
}

.loose {
  letter-spacing: 0.1em; /* Looser */
}

.heading {
  letter-spacing: 0.05em; /* Subtle spacing for headers */
}

Word Spacing

Control space between words:

.normal {
  word-spacing: normal;
}

.loose {
  word-spacing: 0.3em;
}

.tight {
  word-spacing: -0.1em;
}

Text Shadow

Add shadows to text:

.shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  /* x-offset y-offset blur-radius color */
}

.multiple-shadows {
  text-shadow:
    1px 1px 2px black,
    0 0 10px blue,
    0 0 20px darkblue;
}

.embossed {
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.neon {
  color: #fff;
  text-shadow:
    0 0 10px #00ff00,
    0 0 20px #00ff00,
    0 0 30px #00ff00;
}

White Space

Control how whitespace is handled:

.normal {
  white-space: normal; /* Default - wrap lines */
}

.nowrap {
  white-space: nowrap; /* Don't wrap */
}

.pre {
  white-space: pre; /* Preserve whitespace like <pre> */
}

.pre-wrap {
  white-space: pre-wrap; /* Preserve whitespace but wrap */
}

.pre-line {
  white-space: pre-line; /* Collapse whitespace but respect line breaks */
}

Word Break

Control line breaking behavior:

.normal {
  word-break: normal;
}

.break-all {
  word-break: break-all; /* Break at any character */
}

.keep-all {
  word-break: keep-all; /* Don't break words */
}

.break-word {
  overflow-wrap: break-word; /* Break long words */
}

Text Overflow

Handle overflowing text:

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

.clip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip; /* Cuts off */
}

Multi-line Ellipsis

.multiline-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Number of lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Vertical Align

Align inline or table-cell elements vertically:

.baseline {
  vertical-align: baseline; /* Default */
}

.top {
  vertical-align: top;
}

.middle {
  vertical-align: middle;
}

.bottom {
  vertical-align: bottom;
}

.text-top {
  vertical-align: text-top;
}

.text-bottom {
  vertical-align: text-bottom;
}

.super {
  vertical-align: super; /* Superscript */
}

.sub {
  vertical-align: sub; /* Subscript */
}

Direction

Control text direction:

.ltr {
  direction: ltr; /* Left to right (default) */
}

.rtl {
  direction: rtl; /* Right to left (Arabic, Hebrew) */
}

Writing Mode

Control text orientation:

.horizontal {
  writing-mode: horizontal-tb; /* Default */
}

.vertical-rl {
  writing-mode: vertical-rl; /* Vertical, right to left */
}

.vertical-lr {
  writing-mode: vertical-lr; /* Vertical, left to right */
}

Practical Examples

Card with Truncated Text

.card-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.card-description {
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.6;
}

Stylized Headings

.hero-title {
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.subtitle {
  text-align: center;
  text-transform: capitalize;
  letter-spacing: 0.1em;
  color: #666;
}

Quote Styling

.quote {
  font-style: italic;
  font-size: 1.25rem;
  text-align: center;
  padding: 2rem;
  position: relative;
}

.quote::before {
  content: '"';
  font-size: 4rem;
  position: absolute;
  top: 0;
  left: 0;
  color: #e0e0e0;
}

Code Block

.code-block {
  font-family: "Courier New", monospace;
  background-color: #f5f5f5;
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
  white-space: pre;
  tab-size: 4;
}

Highlighted Text

.highlight {
  background: linear-gradient(180deg, transparent 60%, #ffeb3b 60%);
  font-weight: 600;
}

.mark {
  background-color: #ffeb3b;
  padding: 0 0.2em;
  border-radius: 2px;
}

Best Practices

Text Styling Best Practices

Use text-align: left for body text (better readability) - Avoid text-align: justify for short line lengths - Use text-transform sparingly - it affects screen readers - Remove link underlines only if alternative styling is clear - Use letter-spacing subtly for headings - Ensure text shadows don't reduce readability - Use text-overflow: ellipsis for truncating long text - Test text styling at different zoom levels - Consider RTL languages when needed - Maintain sufficient contrast for text shadows

Accessibility

Don't rely on color alone for meaning
Ensure text shadows don't reduce contrast
Use semantic HTML along with text styling
Test with screen readers
Avoid all-caps for long text
Maintain readable line lengths (45-75 characters)

Common Patterns

.breadcrumb {
  text-transform: capitalize;
  color: #666;
}

.breadcrumb a {
  text-decoration: none;
  color: #333;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

Badge

.badge {
  display: inline-block;
  padding: 0.25em 0.6em;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 0.25rem;
  background-color: #007bff;
  color: white;
}

Drop Cap

.drop-cap::first-letter {
  font-size: 3em;
  font-weight: bold;
  float: left;
  line-height: 1;
  margin-right: 0.1em;
}

Master text styling to create polished, professional typography!

CSS Text Styling

On this page

CSS Text Styling

On this page