Web Development: Unraveling HTML, CSS, and JavaScript/

...

/

Font Type, Size, and Color

Font Type, Size, and Color

In this lesson, you'll learn how to set a font's type, size, and color.

We'll cover the following...

You have already seen many examples that set font properties. The Listing below shows another sample that demonstrates the color, font-family, font-size, and font properties.

Listing: Using the the color, font-family, font-size, and font properties

<!DOCTYPE html>
<html>
<head>
  <title>Font type, style, and color</title>
  <style>
    body {
      font-family: American Typewriter, "Times New Roman", serif;
      color: dimgray;
    }

    .highlighted {
      font-size: 1.25em;
      color: blue;
    }

    .main {
      font: small-caps bold 1em Verdana, Helvetica, sans-serif;
      color: black;
    }
  </style>
</head>
<body>
  <h1>This is the page font</h1>
  <p class="highlighted">
    This is a highlighted paragraph
  </p>
  <p class="main">
    Lorem ipsum dolor sit amet, consectetur adipiscing
    elit fusce vel sapien elit in malesuada semper mi,
    id sollicitudin urna fermentum.
  </p>
</body>
</html>

Explanation

It’s pretty easy to follow the rules in this style sheet work. The body rule sets the default font family to this page to one of the available serif fonts.

The .highlighted rule changes the size of the first ...