Write a program to print a paragraph with different font and color.

Description: Create a web page with a paragraph of 4 sentences. Each sentence should have a different font and colour.

Hint:

• Put the paragraph in a <p> tag.
• Wrap each sentence in a <span> and use font-family and color in the style attribute.

---

HTML program for a paragraph with different font and colour

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Fonts and colours</title>
</head>
<body>
  <p>
    <span style="font-family: Arial; color: red;">This sentence is in Arial and red.</span>
    <span style="font-family: 'Times New Roman'; color: green;">This one is in Times New Roman and green.</span>
    <span style="font-family: Verdana; color: blue;">This one is in Verdana and blue.</span>
    <span style="font-family: 'Courier New'; color: purple;">The last one is in Courier New and purple.</span>
  </p>
</body>
</html>

Output in the browser:

How it works

• <span> is an inline tag, so all sentences stay in the same paragraph.
• Each span has its own font-family and color.
• Old tutorials use the <font> tag for this. It is removed from HTML5, so we use CSS.

See HTML Div and Span.

• Previous Exercise
• Next Exercise

---

Tutorials
HTML Elements and Tags

Exercises & Assignments
Write a program to create a webpage to print values 1 to 5
Write a program to create a webpage to print your city name in red color.
Write a program to print a paragraph with different font and color.

Interview Questions & Answers
Do all HTML tags require both a begin and end tag?