Font family in CSS - Mini Project: Build & Apply

Setting a Font Family with CSS

📖 Scenario: You are creating a simple webpage and want to set a nice font for the text so it looks clean and easy to read.

🎯 Goal: Apply a font family to the entire webpage so all text uses the chosen font.

📋 What You'll Learn

Use a CSS rule to set the font family for the body element

Choose the font family Arial, sans-serif

Write valid CSS code

💡 Why This Matters

🌍 Real World

Setting font families is a basic step in making websites look good and readable for visitors.

💼 Career

Web developers often need to style text with fonts that match brand guidelines and improve user experience.

1

Create the CSS selector for the body element

Write a CSS rule that starts with the selector body followed by curly braces { } to style the whole page.

CSS

/* Write the CSS selector for the body element here */

/* Your code here */

Need a hint?

Start by writing body { } to target the whole page.

2

Add the font-family property inside the body selector

Inside the body { } selector, add the CSS property font-family with the value Arial, sans-serif followed by a semicolon.

CSS

body {
  /* Add font-family property here */
  /* Your code here */
}

Need a hint?

Use font-family: Arial, sans-serif; to set the font.

3

Add a fallback font to the font-family property

Modify the font-family property value to include the fallback font Helvetica before Arial, so it reads font-family: Helvetica, Arial, sans-serif;.

CSS

body {
  /* Add Helvetica as a fallback font before Arial */
  /* Your code here */
}

Need a hint?

List fonts separated by commas, starting with Helvetica.

4

Complete the CSS with a comment explaining the font choice

Add a CSS comment above the body selector that says /* Setting font family for the whole page */.

CSS

/* Add a comment explaining the font choice here */
/* Your code here */
body {
  font-family: Helvetica, Arial, sans-serif;
}

Need a hint?

Use /* comment text */ syntax for CSS comments.