Styling Text

h1 {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

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

p { text-indent: 1.5em; }

.tagline {
  text-shadow: 0 1px 2px rgb(0 0 0 / 30%);
  word-spacing: 0.1em;
}

Notes

• text-align: start follows the text direction — left in English, right in Arabic. Prefer it over left.
• text-transform: uppercase keeps the real text in the HTML, so screen readers and copy-paste get normal capitalization. Don't type headings in capitals.
• Justified text creates uneven gaps on narrow screens; if you use it, add hyphens: auto (which needs a lang attribute on the page).

Truncating with an ellipsis

.file-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 20ch;
}

.excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

The second rule limits text to three lines. The -webkit- names look old, but this form is written into the CSS specification for compatibility and works in every current browser.

Breaking long words

.comment { overflow-wrap: anywhere; }
h1 { text-wrap: balance; }
p { text-wrap: pretty; }

• overflow-wrap: anywhere breaks long URLs that would overflow.
• text-wrap: balance evens out the lines of short headings (supported in all major browsers since 2024); pretty avoids a single word on the last line of paragraphs where supported. Browsers that don't support them just wrap normally.

Practice

Style .badge as small uppercase text with extra letter spacing, and remove the underline from links in nav while keeping it on hover.

.badge {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

nav a { text-decoration: none; }
nav a:hover { text-decoration: underline; }