Styling Text with CSS

Styling text with CSS means controlling alignment, decoration, capital letters, spacing and shadows. This lesson covers the most useful CSS text properties and link styles.

text-align: aligning text

text-align sets how text lines up inside its box. Values are left, right, center and justify.

h1 { text-align: center; }
.price { text-align: right; }

justify stretches lines so both edges are straight, like a newspaper. On the web it often creates ugly gaps between words, so use it carefully.

Note: text-align aligns the text inside an element. It does not move the box itself. You will learn how to center a box in the Box Model module.

text-decoration and text-transform

text-decoration adds or removes lines on text. The most common use is removing the underline from links with text-decoration: none;. Other values are underline, line-through and overline.

text-transform changes capital letters without changing your HTML:

• uppercase makes ALL LETTERS CAPITALS.
• lowercase makes all letters small.
• capitalize Makes The First Letter Of Each Word A Capital.

<p class="old-price">$49.99</p>
<p class="new-price">$29.99</p>
<p class="label">limited offer</p>

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

.new-price {
  color: #c62828;
  font-weight: bold;
}

.label {
  text-transform: uppercase;
}

The old price shows with a line through it, the new price is bold red, and the label displays as "LIMITED OFFER". Your HTML still contains the normal text, which is cleaner than typing capitals by hand.

letter-spacing and line-height

letter-spacing changes the space between letters. Small values work best, like 1px or 0.05em. It looks great on short uppercase labels and buttons.

line-height sets the space between lines of text. It has a huge effect on readability. Use a number with no unit, like 1.5, which means "1.5 times the font size".

body {
  line-height: 1.6;
}

.label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
}

Body text between 1.4 and 1.7 is comfortable for most fonts. Headings can be tighter, around 1.2.

text-shadow

text-shadow adds a shadow behind text. You give it a horizontal offset, a vertical offset, a blur amount and a color.

.hero-title {
  color: white;
  text-shadow: 2px 2px 6px rgb(0 0 0 / 0.6);
}

The white title gets a soft dark shadow 2 pixels right and 2 pixels down. This helps text stand out on top of photos. Keep shadows subtle; strong shadows make text harder to read.

How to style links with CSS

Links have their own default style: blue and underlined. You can change it like any other text.

<p>Questions? <a href="/contact">Contact our team</a>.</p>

a {
  color: #00796b;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}

The link is now teal and bold with no underline. When you move your mouse over it, the underline appears. :hover is a pseudo-class: a keyword that styles an element when it is in a special state, here "the mouse is over it". You will learn more pseudo-classes later in the course.

Common mistake: Removing the underline from links in normal text and giving them the same color as the text. Users then can't see that it's a link. If you remove the underline, make links clearly different, for example with color and bold.

Practice exercise

Style a short blog post with a title, a date and two paragraphs. Make the title centered with a small text shadow, the date uppercase with extra letter spacing and gray color, and the paragraphs with a line-height of 1.7. Add a link in the second paragraph that is underlined only on hover.

Hint: put the date in a <p class="date">. Use a:hover for the hover underline.

Key takeaways

• text-align aligns text inside its box; justify can create gaps.
• text-decoration adds or removes lines; text-transform changes capital letters.
• line-height without a unit (like 1.6) makes text easier to read.
• letter-spacing and text-shadow are best used in small amounts.
• Style links with a, and use a:hover for the mouse-over state.