CommonLounge Archive

Styling Text

June 22, 2017

In this lesson, you’ll learn:

  • How to change text color, font and size
  • How to make text bold, italic and underlined
  • How to style paragraphs of text
  • And more!

This lesson is all about the different properties available to you for styling text on a web page. Let’s dive right in!

Changing Color

You’ve seen this before, but text color can be changed with the color property. This property only changes text color, not background colors or anything else.

p {
  color: #2980b9;
}

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  p {
    color: #2980b9;
  }
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Result:

This sets all paragraphs to the color blue.

You can use HEX colors, RGB colors, RGBA colors, or any other color type accepted by the browser.

Changing Font

You can specify the font with the font-family property. For instance, if you’d like to change all paragraphs to Verdana, you can write the following CSS.

p {
  font-family: Verdana;
}

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  p {
    font-family: Verdana;
  }
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Result:

One-word font names can be written like this, but if the font name is more than one word, it must be surrounded by quotation marks.

p {
  font-family: "Times New Roman";
}

In most cases, web developers will list several fonts in a row, in case some of the fonts aren’t available.

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

In the above example, the web developer specifies Helvetica as the font. But if the Helvetica isn’t available, Arial will be displayed.

The final font sans-serif is the browser’s default sans-serif font. If all the font choices fail, the browser will display its default sans-serif instead. You can also do this with serif, too:

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

This specifies Garamond as the font, and Times New Roman as a backup. If both are not available, the browser will display its default serif font.

Changing Size

You can change font size with the font-size property.

p {
  font-size: 18px;
}

You can specify the size with pixels to have fine-tuned control.

You can also use % to change text size. In this case, the size of an element will be a % of its parent. For example:

html {
  font-size: 16px;
}
body {
  font-size: 87.5%;
}
h1 {
  font-size: 150%;
}

Try this out below:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    html {
      font-size: 16px;
    }
    body {
      font-size: 87.5%;
    }
    h1 {
      font-size: 150%;
    }
  </style>
</head>
<body>
  <h1>Heading</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

In this case, the font size of the HTML document is 16px, and the body is set at 87.5% of 16px, which is 14px.

The h1 element is inside the body, which means it’s 150% of 14px, not 16px. 150% of 14px is 21px, so the h1 element is 21px.

This is helpful for mobile websites, where the font size might change depending on the device.

You can also specify font size with a unit called em. This works like percents, but is easier to calculate and read.

A font size of 1em is the same as 100%. If you rewrite the above example using ems, it looks like this:

html {
  font-size: 16px;
}
body {
  font-size: .875em;
}
h1 {
  font-size: 1.5em;
}

Let’s try this out:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    html {
      font-size: 16px;
    }
    body {
      font-size: .875em;
    }
    h1 {
      font-size: 1.5em;
    }
  </style>
</head>
<body>
  <h1>Heading</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

The body is still 14px and the h1 is still 21px.

This unit is also used for mobile websites where the font size may change depending on the device.

Recently, a new unit called rem is gaining popularity. Rem works like em, but is based on the html font size, not the parent’s font size.

If we look at the previous example using rems:

html {
  font-size: 16px;
}
body {
  font-size: .875rem;
}
h1 {
  font-size: 1.5rem;
}

Let’s try this out:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    html {
      font-size: 16px;
    }
    body {
      font-size: .875rem;
    }
    h1 {
      font-size: 1.5rem;
    }
  </style>
</head>
<body>
  <h1>Heading</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

The body is still 14px, but the h1 is calculated from the html font size, so it’s 150% of 16px, which is 24px.

All these techniques come in handy in different situations, so it’s important to know how to use each one.

Changing Style

The font-style property allows you to make your text normal, italic, or oblique.

This is typically only used for making text normal or italic.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p {
      font-style: italic;
    }
    span {
      font-style: normal;
    }
  </style>
</head>
<body>
  <p>This text is italic but I can make <span>part of it</span> normal.</p>
</body>
</html>

Result:

Changing Weight

As mentioned in the previous section, font-style isn’t usually used to make text bold. Instead, developers use a property called font-weight. Its most common values are normal and bold.

p {
    font-weight: bold;  
}

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p {
      font-weight: bold;  
    }
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Result:


If your font has many weights, you can use numbers to specify which weight you’d like to use. A normal font is 400, while a bold font is 700. A semi-bold font might have a weight of 600.

p {
  font-weight: 600;
}

Changing Line-Height

Each line of text on a web page has a certain height, which creates space between each line of text. If there were no line-height, each line would be squished together, and it would be very hard to read.

You can specify a line-height using pixels or decimals.

Specify the line-height with pixels to have fine-tuned control over its height.

p {

  font-size: 16px;
  line-height: 24px;
}

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p {
      font-size: 16px;
      line-height: 24px; 
    }
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Result:

This works fine, but if the text gets bigger, the line-height will be too small.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p {
      font-size: 24px;
      line-height: 24px; 
    }
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Result:

To avoid this problem, you can specify line-height in relation to font size.

For example:

p {
  font-size: 16px;
  line-height: 1.5;
}

This means that the line height is 1.5 times the font-size, or 24px.

If you change the font size, the line height will be 1.5 times the new font size:

p {

  font-size: 24px;
  line-height: 1.5;
}

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p {
      font-size: 24px;
      line-height: 1.5; 
    }
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Result:

Since the line height is 1.5 times the font-size, in this case it’s 36px. No matter what size the font is, the line height will adjust to match.

Changing Alignment

You can use the text-align property align the text to the left, right, or center. (You can also justify text, although it isn’t very popular.)

Left alignment:

p {
  text-align: left;
}

Center alignment:

p {
  text-align: center;
}

Right alignment:

p {
  text-align: right;
}

Justify alignment:

p {
  text-align: justify;
}

You should try all four text-align values in the code block below:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p {
      text-align: justify; 
    }
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Underlining Text

You can add or remove an underline using the text-decoration property. Usually you don’t want to add an underline to text unless it’s a link. But you may want to remove the underline from a link, which is a popular style.

To remove an underline:

a {
  text-decoration: none;
}

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    a {
      text-decoration: none;
    }
  </style>
</head>
<body>
  <a href="https://www.google.com">Google</a>
</body>
</html>

Result:

To add an underline:

a {
  text-decoration: underline;
}

There are a couple more things you can do with text-decoration, but they are not very common.

Indenting Text

You can add an indent to your paragraphs using the text-indent property. This is not very common, but it can be useful.

p {
  text-indent: 25px;
}

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p {
      text-indent: 25px;
    }
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Result:

(You can also use a negative value in order to make the first line of text stretch out to the left instead of being indented.)

Adding a Shadow

You can add a shadow to your text using the text-shadow property. This is only recommended for titles or short text. Adding a shadow to paragraphs of text would only make it difficult to read.

Text-shadow has four values: the x-offset, the y-offset, the blur radius, and the color. The color is usually written in RGBA so the shadow is semi-transparent.

h1 {
  text-shadow: 1px 2px 5px rgba(0,0,0,.5);
}

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    h1 {
      text-shadow: 1px 2px 5px rgba(0,0,0,.5);
    }
  </style>
</head>
<body>
  <h1>Title</h1>
</body>
</html>

Result:

It’s difficult to figure out the values on your own, so you can use a CSS3 Text Shadow Generator to generate the code for you.

Changing Capitalization

You can transform your text into all caps, lowercase, or capitalize each word using the text-transform property.

p {
  text-transform: uppercase;
}

p {
  text-transform: lowercase;
}

p {
  text-transform: capitalize;
}

Want to experiment with text-transforms? Run the code block below and play around with the values

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p {
      text-transform: uppercase;
    }
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Spacing Out the Text

The letter-spacing property allows you to space out the letters of a word. You can use pixels or ems (based on the size of the text) to do this.

p {
  font-size: 16px;
  letter-spacing: .125em;
}

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p {
      font-size: 16px;
      letter-spacing: .125em;
    }
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Result:

Since the font size is 16px, there’s a 2px space between each letter (16 pixels times .125 is 2 pixels).

You can also add extra space between each word using the word-spacing property.

p {
  font-size: 16px;
  word-spacing: .5em;
}

Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p {
      font-size: 16px;
      word-spacing: .5em;
    }
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Result:

This adds a 8px space between each word.

Now you’ve learned several new ways to customize text with CSS.

Go to the next lesson to learn how to add background colors, images, and gradients to spice up your web pages.

© 2016-2022. All rights reserved.