CSS Text Formatting

Learn how to style and format text using CSS text properties

What is CSS Text Formatting?

CSS provides a wide range of properties to control the appearance and formatting of text on web pages. These properties allow you to control color, alignment, spacing, decoration, and many other aspects of text presentation.

Text Properties Categories:

Color and Appearance - color, text-decoration, text-shadow
Alignment and Spacing - text-align, text-indent, line-height
Transformation - text-transform, font-variant
Whitespace Handling - white-space, word-break, word-wrap
Font Properties - font-family, font-size, font-weight

Text Shadow

Underline Decoration

Uppercase Transformation

Italic Font Style

CSS Text Properties Reference

Property	Description	Values
color	Sets the color of text	color name, hex, rgb, rgba, hsl, hsla
text-align	Sets the horizontal alignment of text	left, right, center, justify
text-decoration	Sets the decoration of text	none, underline, overline, line-through
text-transform	Controls the capitalization of text	none, uppercase, lowercase, capitalize
text-indent	Indents the first line of text	length, percentage
letter-spacing	Sets the space between characters	normal, length
word-spacing	Sets the space between words	normal, length
line-height	Sets the space between lines of text	normal, number, length, percentage
text-shadow	Adds shadow to text	h-shadow v-shadow blur-radius color
white-space	Controls how whitespace is handled	normal, nowrap, pre, pre-wrap, pre-line
word-break	Controls line breaking within words	normal, break-all, keep-all
word-wrap	Allows long words to break and wrap	normal, break-word
direction	Sets the text direction	ltr, rtl
vertical-align	Sets the vertical alignment of text	baseline, sub, super, top, middle, bottom

CSS Text Formatting in Action

Example Code

/* CSS Text Properties */

/* Text color */
.text-color {
  color: #333; /* Named color, hex, rgb, hsl */
  color: royalblue;
  color: rgb(51, 51, 51);
  color: hsl(0, 0%, 20%);
}

/* Text alignment */
.text-alignment {
  text-align: left;    /* Default */
  text-align: right;
  text-align: center;
  text-align: justify; /* Full justification */
}

/* Text decoration */
.text-decoration {
  text-decoration: none;        /* Remove decoration */
  text-decoration: underline;   /* Underline text */
  text-decoration: overline;    /* Overline text */
  text-decoration: line-through;/* Strikethrough */
  text-decoration: underline wavy red; /* Style and color */
}

/* Text transformation */
.text-transformation {
  text-transform: none;      /* Default */
  text-transform: uppercase; /* ALL UPPERCASE */
  text-transform: lowercase; /* all lowercase */
  text-transform: capitalize;/* Capitalize Each Word */
}

/* Text spacing */
.text-spacing {
  letter-spacing: 2px;    /* Space between characters */
  word-spacing: 5px;      /* Space between words */
  line-height: 1.6;       /* Space between lines */
}

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

/* Text shadow */
.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  /* horizontal vertical blur color */
}

/* White space handling */
.white-space {
  white-space: normal;    /* Default */
  white-space: nowrap;    /* No wrapping */
  white-space: pre;       /* Preserve whitespace */
  white-space: pre-wrap;  /* Preserve but wrap */
  white-space: pre-line;  /* Preserve newlines only */
}

/* Word handling */
.word-handling {
  word-break: normal;     /* Default line break rules */
  word-break: break-all;  /* Break anywhere */
  word-break: keep-all;   /* Don&apos;t break word */
  
  word-wrap: normal;      /* Default */
  word-wrap: break-word;  /* Break long words */
  
  overflow-wrap: normal;  /* Similar to word-wrap */
  overflow-wrap: anywhere;/* Break anywhere if needed */
}

/* Text direction */
.text-direction {
  direction: ltr;         /* Left to right (default) */
  direction: rtl;         /* Right to left */
  
  unicode-bidi: normal;   /* Default bidirectional text */
  unicode-bidi: embed;
  unicode-bidi: isolate;
}

/* Vertical alignment */
.vertical-align {
  vertical-align: baseline; /* Default */
  vertical-align: sub;      /* Subscript */
  vertical-align: super;    /* Superscript */
  vertical-align: top;      /* Align with top */
  vertical-align: middle;   /* Align with middle */
  vertical-align: bottom;   /* Align with bottom */
}

/* Font properties (related to text) */
.font-properties {
  font-family: Arial, sans-serif; /* Font stack */
  font-size: 16px;                /* Font size */
  font-weight: normal;            /* Font weight */
  font-weight: bold;
  font-weight: 700;               /* Numeric weight */
  font-style: normal;             /* Font style */
  font-style: italic;
  font-style: oblique;
  font-variant: normal;           /* Font variant */
  font-variant: small-caps;
}

/* Using CSS variables for text styling */
:root {
  --text-color: #333;
  --heading-color: #0066cc;
  --line-height: 1.6;
  --font-family: 'Helvetica', 'Arial', sans-serif;
}

.text-with-vars {
  color: var(--text-color);
  line-height: var(--line-height);
  font-family: var(--font-family);
}

Text Properties in Detail

Text Color

The color property sets the color of text. It accepts various color formats.

color: blue;

color: #ff0000;

color: rgb(0, 128, 0);

color: hsl(270, 50%, 50%);

Text Alignment

The text-align property sets the horizontal alignment of text within its container.

text-align: left;

text-align: center;

text-align: right;

text-align: justify; (This text is justified to create even edges on both sides)

Text Decoration

The text-decoration property adds decorative lines to text.

text-decoration: underline;

text-decoration: overline;

text-decoration: line-through;

text-decoration: none;

Text Transformation

The text-transform property controls the capitalization of text.

text-transform: uppercase;

text-transform: LOWERCASE;

text-transform: capitalize;

text-transform: none;

Text Spacing

CSS provides several properties to control spacing in text.

letter-spacing: 2px;

word-spacing: 8px;

line-height: 1.2;

text-indent: 1rem;

Text Shadow

The text-shadow property adds shadow effects to text.

text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

text-shadow: 0 0 10px #ff0000;

text-shadow: 1px 1px 0 #fff, 2px 2px 0 #000;

Best Practices for Text Formatting

Readability Tips

Use sufficient contrast between text and background colors
Limit line length to 50-75 characters for optimal reading
Use appropriate line height (1.5-1.6 is generally good)
Choose web-safe fonts with good readability
Use font sizes that are comfortable to read (16px minimum for body text)

Common Mistakes to Avoid

Using too many different fonts on one page
Overusing text transformations like ALL CAPS
Applying excessive text shadows or decorations
Using justified text for short content
Not testing text appearance on different devices

Accessibility Considerations

Ensure text has a minimum contrast ratio of 4.5:1 for normal text
Don't rely solely on color to convey information
Use relative units (em, rem) for font sizes to support zooming
Provide sufficient spacing between lines and letters
Test your text formatting with screen readers

Ready to Try It Yourself?

Experiment with CSS text formatting properties in our interactive editor. See your changes in real-time and build your understanding through practice.

< Previous Next >