Search⌘ K
AI Features
Home
Courses
Web Development: Unraveling HTML, CSS, and JavaScript

Font Type, Size, and Color

Explore how to set font type, size, and color in CSS. Understand how different font families affect appearance and how to use CSS properties to style text effectively. Gain hands-on experience with practical examples to enhance your web page design.

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 ...