Practice Exercises

Task: How to set a custom page background color and style text colors using pure HTML attributes?

Goal: Create an HTML page layout with a light gray background (bgcolor="lightgray"), a heading in dark blue (color="navy"), and paragraph text in purple (color="purple").
💡 Hint: Use the bgcolor attribute inside the <body> tag and wrap your heading/paragraph text with <font color="..."> tags.

💡 Show Solution

<!DOCTYPE html>
<html>
  <body bgcolor="lightgray">

    <h1>
      <font color="navy">Welcome to HTML Presentational Styling</font>
    </h1>

    <p>
      <font color="purple">This paragraph text is styled directly using the classic HTML font tag.</font>
    </p>

  </body>
</html>

Output:

Welcome to HTML Presentational Styling

This paragraph text is styled directly using the classic HTML font tag.

Explanation: In early HTML versions, visual styling was managed using presentational attributes like bgcolor on the <body> element to set document background colors, and the <font color="..."> tag to control text color inline.

« Previous Next »