HTML Colors – Solved Practice Questions

By /

Introduction

HTML colors make webpages more attractive and easier to read. You can apply colors to text, backgrounds, and borders using color names, HEX codes, RGB values, and HSL values. In this chapter, you’ll practice different ways to use colors in HTML through simple solved questions.

Question 1

Problem Statement

Create a webpage that displays the heading “Welcome to HTML” in blue.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Text Color</title>
</head>
<body>

    <h1 style="color: blue;">Welcome to HTML</h1>

</body>
</html>

Output

A blue-colored heading displaying:

Welcome to HTML

Step-by-Step Explanation

  • The style attribute is used to apply CSS.
  • color changes the text color.
  • blue is a predefined HTML color name.

Question 2

Problem Statement

Create a webpage with a yellow background.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Background Color</title>
</head>
<body style="background-color: yellow;">

    <h1>HTML Colors</h1>

</body>
</html>

Output

A webpage with a yellow background and the heading:

HTML Colors

Step-by-Step Explanation

  • background-color changes the page background.
  • The style is applied to the <body> element.
  • yellow is a predefined color name.

Question 3

Problem Statement

Create a webpage that displays a paragraph with white text on a black background.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Text and Background Color</title>
</head>
<body>

    <p style="color: white; background-color: black;">
        HTML makes web development easy.
    </p>

</body>
</html>

Output

A paragraph with:

  • White text
  • Black background

Step-by-Step Explanation

  • color changes the text color.
  • background-color changes the background color.
  • Both styles can be applied together.

Question 4

Problem Statement

Create a webpage that displays the heading “Learning HTML” using the HEX color #FF5733.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>HEX Color</title>
</head>
<body>

    <h1 style="color: #FF5733;">
        Learning HTML
    </h1>

</body>
</html>

Output

A heading displayed in the HEX color #FF5733.

Step-by-Step Explanation

  • HEX colors start with #.
  • #FF5733 represents an orange-red color.
  • HEX values are widely used in web design.

Question 5

Problem Statement

Create a webpage that displays the heading “RGB Color Example” using the RGB value rgb(0, 128, 255).

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>RGB Color</title>
</head>
<body>

    <h1 style="color: rgb(0, 128, 255);">
        RGB Color Example
    </h1>

</body>
</html>

Output

A heading displayed in a blue color created using RGB values.

Step-by-Step Explanation

  • rgb() creates colors using Red, Green, and Blue values.
  • Each value ranges from 0 to 255.
  • RGB provides precise color control.

Question 6

Problem Statement

Create a webpage that displays the heading “HSL Color Example” using the HSL value hsl(120, 100%, 40%).

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>HSL Color</title>
</head>
<body>

    <h1 style="color: hsl(120, 100%, 40%);">
        HSL Color Example
    </h1>

</body>
</html>

Output

A heading displayed in a green color using the HSL color model.

Step-by-Step Explanation

  • hsl() stands for Hue, Saturation, and Lightness.
  • 120 represents the green hue.
  • 100% is full saturation.
  • 40% controls the lightness of the color.

Question 7

Problem Statement

Create a webpage that displays three headings in red, green, and blue.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Text Colors</title>
</head>
<body>

    <h1 style="color: red;">Red Heading</h1>

    <h1 style="color: green;">Green Heading</h1>

    <h1 style="color: blue;">Blue Heading</h1>

</body>
</html>

Output

  • Red Heading (Red)
  • Green Heading (Green)
  • Blue Heading (Blue)

Step-by-Step Explanation

  • Each heading uses the color property.
  • Different color names are assigned to each heading.
  • HTML supports many predefined color names.

Question 8

Problem Statement

Create a webpage that displays a paragraph with a light blue background and dark blue text.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Background and Text Color</title>
</head>
<body>

    <p style="background-color: lightblue; color: darkblue;">
        Welcome to the HTML Colors chapter.
    </p>

</body>
</html>

Output

A paragraph with:

  • Light blue background
  • Dark blue text

Step-by-Step Explanation

  • background-color changes the background color.
  • color changes the text color.
  • Combining both improves readability.

Question 9

Problem Statement

Create a webpage that displays a heading with a purple border.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Border Color</title>
</head>
<body>

    <h1 style="border: 3px solid purple;">
        HTML Border Color
    </h1>

</body>
</html>

Output

A heading surrounded by a purple border.

Step-by-Step Explanation

  • border adds a border around the element.
  • 3px sets the border thickness.
  • solid creates a solid border style.
  • purple sets the border color.

Question 10

Problem Statement

Create a colorful welcome page using different colors for the page background, heading, and paragraph.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Colorful Webpage</title>
</head>
<body style="background-color: #F5F5DC;">

    <h1 style="color: darkgreen;">
        Welcome to HTML
    </h1>

    <p style="color: brown;">
        Learning HTML becomes more interesting with colors.
    </p>

</body>
</html>

Output

A webpage with:

  • Beige background
  • Dark green heading
  • Brown paragraph text

Step-by-Step Explanation

  • background-color changes the page background.
  • color changes the text color.
  • Different colors improve the appearance of a webpage.
  • Multiple color styles can be used on the same page.

Concepts Used: background-color, color, style

Key Takeaways

  • HTML colors are applied using the style attribute.
  • color changes the text color.
  • background-color changes the background color.
  • Colors can be written using color names, HEX, RGB, and HSL values.
  • border can also use colors.
  • Using suitable color combinations improves readability.

Frequently Asked Questions (FAQs)

1. How do I change the text color in HTML?

Use the color property inside the style attribute.

2. How do I change the background color of a webpage?

Use the background-color property on the <body> element.

3. Can I use color names instead of HEX codes?

Yes. HTML supports many predefined color names such as red, blue, green, and orange.

4. What is a HEX color?

A HEX color is a six-digit color code that starts with #, such as #FF5733.

5. What does RGB stand for?

RGB stands for Red, Green, and Blue.

6. What does HSL stand for?

HSL stands for Hue, Saturation, and Lightness.

7. Can I apply multiple color styles to the same element?

Yes. For example, you can set the text color, background color, and border color on the same element.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top