Basic text styling in CSS

Summary

Since its first specification, CSS has specialized in website appearance, leaving HTML free to focus on document structure.

CSS is very rich with more than 250 properties. In this article, we'll only cover a few dedicated to text styling:

• color
• font-family (specify font type)
• font-size
• font-weight
• font-style (for italicizing)
• line-height
• text-align
• text-decoration (for lines under, over, or through text)
• text-transform (change text case)
• text-shadow

Once you're familiar with these properties, you're welcome to explore additional text-styling properties (e.g. hyphens, letter-spacing, text-indent, text-overflow, vertical-align, white-space, word-spacing), specific selectors (::first-letter or ::first-line), or CSS font size units (em and rem). To customize your text to the full, you can invoke your own fonts using @font-face.

Active Learning

There is no active learning available yet. Please, consider contributing.

Deeper dive

color

Sets text color using various notation systems: hexadecimal, red-green-blue-alpha, or hue-saturation-lightness. You can also use one of these color words. Here's an example of how to make your text green.

First, let's assume the following HTML code:

<p>I am a green paragraph</p>

Then let's apply the following style:

p {
  color: green;               /* This is green with the "green" keyword */
  color: #008000;             /* This is green with the hexadecimal notation */
  color: rgb(0,128,0);        /* This is green with the RGB notation */
  color: hsl(120, 100%, 25%); /* This is green with the HSL notation */
}

And the result looks like this:

font-family

An important tool for giving your site its special flavor, font-family specifies a list of fonts in which your text may appear.

The value for that property is a comma-separated list of font names. If the browser cannot find the first font in the list, it jumps to the next font and applies it to the given text. If none of the list works, then the browser uses its own default font for viewing. Default font can be serif, sans-serif or monospace. Here's an example:

First, let's assume the following HTML code:

<p class="serif">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="sansserif">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Then let's apply the following style:

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

.serif {
  font-family: "Times New Roman", Times, serif;
}

And the result looks like this:

font-size 

Adjusts text size, using one of these kinds of units:

px

The unit px specifies how many pixels tall your text will be.

em

An em is the width of the letter "M" in the current font. Ems are a common typographical unit, because they make it easy to define sizes relative to the current font and size. Specifying a font-size of 1.5em indicates that the height of the text should be 1.5 times the width of the letter "M" in the parent element's font and size. If the parent element has no absolute size, 1em is 16px by default.

rem

Rem is much easier to use than em because the text size depends on the root font size, rather than relying on whichever element happens to be the parent element.

pt

The unit pt is short for point, a traditional typographic unit in printing. Browsers translate points into pixels, but not consistently, so it's best to avoid pt.

Here's an illustration of the difference between em and rem, using this as our HTML:

<div>I'm 1rem wide (the default)
  <div class="rem">I'm 0.8rem wide.
    <div class="rem">I'm also 0.8rem wide.
      <div class="rem">And I'm also 0.8rem wide.</div>
    </div>
  </div>
</div>

<hr>

<div>I'm 1em wide (the default)
  <div class="em">I'm 0.8em wide.
    <div class="em">I'm also 0.8em wide.
      <div class="em">And I'm also 0.8em wide.</div>
    </div>
  </div>
</div>

Then let's apply the following style:

.rem {
  font-size: 0.8rem;
}

.em {
  font-size: 0.8em
}

And the result looks like the following:

font-weight

Defines character thickness, usually as either normal or bold. Here's an example:

.bold {
  font-weight: bold;
}

font-style

Chooses whether text should be normal, italic, or oblique:

.italic {
  font-style: italic;
}

line-height

Sets line height using the same units as the font-size property.

.line {
  line-height: 80%;
}

body {
  font: bold 1em/150% Helvetica, Arial, sans-serif;
}

body {
  font-weight: bold;
  font-size  : 1em;
  line-height: 150%;
  font-family: Helvetica, Arial, sans-serif;
}

text-transform

Changes the text case to UPPERCASE, lowercase, or Capitalized, as in this example: 

.transform {
  text-transform: uppercase;
}

text-align

Controls the text layout by setting text justification to left, right, center, and justified: 

.center {
  text-align: center;
}

text-decoration

Places a line under, over, or through your text. The default value none cancels all decorations. Here's some strikeout text:

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

text-shadow

Drops one or more shadows behind your text, based on four parameters: horizontal offset, vertical offset, bur radius, and shadow color. You can apply multiple shadows using a comma-separated list of shadow definitions, and achieve some stunning effects. Here are three examples, with the following HTML code:

<p class="simple">HELLO</p>
<p class="double">HELLO</p>
<p class="fire">HELLO</p>

Then let's apply the following styles:

p {
  /* basic font seting */
  font: bold 3em Impact, sans-serif;
  text-align: center;
  letter-spacing: 2px
}

.simple {
  text-shadow: 2px 3px 5px rgba(0,0,0,0.3);
}

.double {
  text-shadow: 2px 2px 0 white,
               4px 4px 0 black;
}

.fire {
  color: white;
  text-shadow: 0    0   2px #fefcc9,
               1px -1px 3px #feec85,
              -2px -2px 4px #ffae34,
               2px -4px 5px #ec760c,
              -2px -6px 6px #cd4606,
               0   -8px 7px #973716,
               1px -9px 8px #451b0e;
}

And here's the result:

Next steps

You can use various combinations of these properties to get the look you're going for. You can go forward in your CSS journey by taking a look at our CSS Tutorial.