CSS Text

Styling Text with CSS

Learn how to control the appearance of text on your web pages using various CSS properties.

Text Formatting Examples
Below, you'll see examples of common text styling. Headings might use properties like `text-align`, `text-transform`, and `color`. Paragraphs can be styled with indentation, alignment, letter spacing (`letter-spacing`), and line height (`line-height`). We'll also see how to remove the default underline from links.

Text Color

The color property sets the foreground color of an element’s text content.

In modern CSS, colors are commonly specified using:

• Hexadecimal values: #ff0000 (short form #f00 works too)
• RGB / RGBA values: rgb(255, 0, 0) or rgba(255, 0, 0, 0.8) (adds transparency)
• HSL / HSLA values: hsl(0, 100%, 50%) or hsla(0, 100%, 50%, 0.8) (Hue, Saturation, Lightness, Alpha)
• Predefined color names: red, cornflowerblue, etc.

Tip: Using RGBA or HSLA allows for semi-transparent text colors. HSL can be more intuitive for adjusting colors.

It’s good practice to set a default text color for the entire page within the body selector.

/* Define default text color */
body {
  color: #333; /* Dark gray for readability */
  background-color: #fff; /* Define background for contrast */
}

/* Style headings differently */
h1 {
  color: hsl(210, 80%, 45%); /* A nice blue */
}

.subsection-title {
  /* Example using RGBA for a slightly faded look */
  color: rgba(0, 0, 0, 0.75);
}

Accessibility Note: Always ensure sufficient contrast between text color and background color for readability. Tools like browser developer tools or online contrast checkers can help. Refer to WCAG guidelines.

Text Alignment

The text-align property controls the horizontal alignment of inline content like text within a block container.

Common values include left, right, center, and justify (which aligns text to both left and right margins, like in newspapers). start and end are newer values that respect the document’s writing direction.

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

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

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

/* Alignment based on writing direction (e.g., left-to-right default) */
.sidebar-title {
    text-align: start; /* Equivalent to 'left' in LTR */
}

Text Decoration

The text-decoration property adds decorative lines to text. It’s a shorthand for text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness.

A very common use is removing the default underline from anchor (<a>) tags:

a {
  text-decoration: none; /* Removes underline */
  color: blue; /* Ensure link is still visually identifiable */
}

/* Add underline back on hover for better affordance */
a:hover {
  text-decoration: underline;
}

You can also add other decorations:

.section-header {
  text-decoration: underline wavy red; /* Underline, wavy style, red color */
}

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

.important-note {
  /* Using individual properties */
  text-decoration-line: underline;
  text-decoration-style: double;
  text-decoration-color: green;
  text-decoration-thickness: 2px;
}

Usability Tip: Avoid underlining text that isn’t a link, as users typically associate underlines with clickable elements.

Text Transformation

The text-transform property controls the capitalization of text.

Values include uppercase (all caps), lowercase (all lower), and capitalize (first letter of each word capitalized). none is the default.

.button-label {
  text-transform: uppercase;
  letter-spacing: 0.5px; /* Often combined for style */
}

.note {
  text-transform: lowercase;
}

.proper-noun-example {
  /* Note: capitalize affects the first letter of each word */
  text-transform: capitalize;
}

Text Indentation

The text-indent property specifies the indentation applied to the first line of text within a block container.

It accepts length values (e.g., px, em, rem) or percentages.

article > p {
  /* Indent the first line of each paragraph directly inside an article */
  text-indent: 2em;
}

.quote {
    /* Negative indent can create a hanging indent effect */
    text-indent: -1.5em;
    padding-left: 1.5em; /* Add padding to compensate */
}

Other Useful Text Properties

letter-spacing: Adjusts the space between characters.

line-height: Sets the height of a line box. Often used to control spacing between lines of text (leading). Using unitless values (e.g., 1.6) is recommended for scalability.

word-spacing: Adjusts the space between words.

white-space: Controls how whitespace inside an element is handled (e.g., nowrap prevents text wrapping).

text-shadow: Adds shadow effects to text. Example: text-shadow: 2px 2px 5px rgba(0,0,0,0.3);

vertical-align: Specifies the vertical alignment of an inline, inline-block, or table-cell element. Useful for aligning images within text or elements within table cells.

direction & unicode-bidi: Used for handling text directionality (e.g., right-to-left languages).

/* Example combining several properties */
.emphasized-block {
    line-height: 1.7;
    letter-spacing: 0.2px;
    word-spacing: 1px;
    text-shadow: 1px 1px 1px #ccc;
}

Core CSS Text Properties Reference

Property	Description
color	Sets the color of the text content.
direction	Specifies the text direction (e.g., ltr, rtl).
letter-spacing	Adjusts the space between text characters.
line-height	Sets the distance between lines of text.
text-align	Specifies the horizontal alignment of text.
text-decoration	Adds decorative lines to text (underline, overline, line-through).
text-indent	Specifies the indentation of the first line.
text-shadow	Applies shadow effects to text.
text-transform	Controls the capitalization of text.
unicode-bidi	Used with direction for bidirectional text.
vertical-align	Sets the vertical alignment of inline-level elements.
white-space	Controls how whitespace and line breaks are handled.
word-spacing	Adjusts the space between words.

For detailed information on each property and their values, consult the MDN Web Docs.