Codectionary / Developer documentation / CSS

Text Properties

Beyond font selection, CSS offers properties to control text alignment, decoration, spacing, and casing. text-align positions text horizontally, text-decoration adds underlines/strikethroughs, text-transform changes casing, and letter-spacing/word-spacing adjust character and word gaps.

Syntax

text-align: left | center | right | justify;
text-decoration: none | underline | line-through;

Examples

Alignment and Decoration

Common text formatting properties.

.centered { text-align: center; }
.no-underline { text-decoration: none; } /* commonly used to remove default link underlines */
.strikethrough { text-decoration: line-through; }
.underline-offset { text-decoration: underline; text-underline-offset: 3px; }
  1. Each line matches a different text selector, so the declarations can be compared directly.
  2. Presentation changes such as text-transform do not rewrite the original text in the DOM.
  3. Keep links distinguishable and retain a visible keyboard focus indicator even when experimenting with decoration.
HTML used by this example
<p class="centered">A centred announcement</p><p><a class="no-underline" href="#notes">A link with its underline removed by this rule</a></p><p class="strikethrough">A completed task</p><p class="underline-offset">A decorated reference line</p>

Casing and Spacing

Transforming text case and adjusting spacing without editing the actual content.

.uppercase-label { text-transform: uppercase; letter-spacing: 0.05em; }
.capitalize { text-transform: capitalize; } /* Capitalizes The First Letter Of Each Word */
.tight { letter-spacing: -0.02em; } /* subtly tighter character spacing, common in large headings */
  1. Each line matches a different text selector, so the declarations can be compared directly.
  2. Presentation changes such as text-transform do not rewrite the original text in the DOM.
  3. Keep links distinguishable and retain a visible keyboard focus indicator even when experimenting with decoration.
HTML used by this example
<p class="uppercase-label">course navigation</p><p class="capitalize">learning through examples</p><p class="tight">Tighter letter spacing</p><p class="word-spacing">Compare the gaps between these words.</p>

Parameters and values

  • text-align (left | center | right | justify): Horizontal alignment of text within its container
  • text-decoration (none | underline | overline | line-through): Adds or removes decorative lines
  • text-transform (none | uppercase | lowercase | capitalize): Changes displayed casing without altering the actual text
  • letter-spacing (length): Adjusts spacing between characters

Best practices

  • Use text-transform: uppercase for visual styling rather than typing text in all caps directly - screen readers may pronounce all-caps text differently
  • Avoid text-align: justify for body text on the web - unlike print, it often creates uneven, distracting gaps between words
  • Use letter-spacing sparingly and subtly - even small values like 0.05em have a noticeable effect at scale
  • Set text-decoration: none on links intentionally, and consider adding a distinct visual style (like color or an underline on hover) to preserve link affordance

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading