Styling Text

CSS Styling Text

CSS provides properties for controlling the appearance, alignment, spacing, and decoration of text. These styles can improve readability and help establish a consistent visual appearance throughout a web page.

Text Color

The CSS color property controls the foreground color of an element's text.

p {
  color: #333333;
}

Colors can be specified using hexadecimal values, named colors, RGB, HSL, and other supported CSS color formats.

Font Family

The font-family property specifies the typeface used to display text. A list of fonts can provide alternatives if the preferred font is unavailable.

p {
  font-family: Arial, Helvetica, sans-serif;
}

The browser uses the first available font in the list. Ending the list with a generic family such as sans-serif provides a final fallback.

Font Size

The font-size property controls the size of text. Font sizes can use units such as pixels, rem, em, and percentages.

p {
  font-size: 18px;
}

Relative units such as rem can be useful when creating text sizing that relates to a common base size.

Font Weight

The font-weight property controls how light or bold text appears, depending on the weights available for the selected font.

strong {
  font-weight: 700;
}

Common values include normal, bold, and numeric values such as 400 and 700.

Font Style

The font-style property is commonly used to display text in a normal or italic style.

.intro {
  font-style: italic;
}

Common values include normal, italic, and oblique.

Line Height

The line-height property controls the height of each line box and therefore affects the vertical spacing between lines of text.

p {
  line-height: 1.6;
}

A unitless value such as 1.6 is relative to the element's font size and can scale naturally when the font size changes.

Text Alignment

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

h2 {
  text-align: center;
}

Common values include start, end, left, right, center, and justify. The logical values start and end follow the writing direction of the content.

Text Decoration

The text-decoration property can add or remove decorative lines such as underlines, overlines, and lines through text.

.important {
  text-decoration: underline;
}

Text decoration is commonly used with links, but underlining ordinary text can make it appear clickable and should be used thoughtfully.

Text Transform

The text-transform property changes the capitalization used when text is displayed without changing the text stored in the HTML.

h2 {
  text-transform: uppercase;
}

Common values include uppercase, lowercase, capitalize, and none.

Text Spacing

CSS provides several properties for adjusting spacing within text. The letter-spacing property changes the space between characters, while word-spacing changes the space between words.

h2 {
  letter-spacing: 2px;
}

p {
  word-spacing: 3px;
}

The text-indent property can also indent the first line of a block of text.

p {
  text-indent: 2em;
}

Combining Text Styles

Several text and font properties can be combined in the same CSS rule to create a consistent text style.

.intro {
  color: #333333;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.6;
  letter-spacing: 0.5px;
}

Try Styling Text

Edit the CSS properties in the example to change the text color, font size, weight, alignment, line height, and spacing. Try different values to see how each property affects the appearance and readability of the text.

Summary

CSS provides many properties for controlling text appearance and readability. The color, font-family, font-size, font-weight, font-style, and line-height properties control basic typography, while properties such as text-align, text-decoration, text-transform, letter-spacing, word-spacing, and text-indent provide additional control over presentation.

The next tutorial covers Styling Links and explains how CSS can control the appearance of links and their different interaction states.