CSS Colors Practice Questions with Solutions

By /

Introduction

CSS colors help make web pages more attractive and easier to read. You can apply colors to text, backgrounds, borders, and many other HTML elements. CSS supports different color formats such as color names, HEX codes, RGB, RGBA, HSL, and HSLA. In this chapter, you’ll practice using CSS colors through beginner-friendly solved questions with simple explanations. CSS Colors practice questions with solutions help to understand the concepts.

Question 1: Change the Text Color Using a Color Name

Problem Statement

Write CSS to change the text color of all <h1> headings to blue using a color name.

CSS Code

h1 {
    color: blue;
}

Output

All <h1> headings appear in blue.

Explanation

  • color changes the text color.
  • blue is a predefined CSS color name.
  • Color names are easy to use for common colors.

Question 2: Change the Background Color Using a Color Name

Problem Statement

Write CSS to change the background color of the webpage to light yellow.

CSS Code

body {
    background-color: lightyellow;
}

Output

The webpage displays a light yellow background.

Explanation

  • background-color changes the background color.
  • body applies the style to the entire webpage.
  • lightyellow is a valid CSS color name.

Question 3: Apply a HEX Color to a Paragraph

Problem Statement

Write CSS to change the text color of all paragraphs using the HEX color #ff0000.

CSS Code

p {
    color: #ff0000;
}

Output

All paragraphs appear in red.

Explanation

  • HEX colors begin with the # symbol.
  • #ff0000 represents pure red.
  • HEX values are commonly used in web design.

Question 4: Apply an RGB Color to a Heading

Problem Statement

Write CSS to change the color of an <h2> heading using the RGB value rgb(0, 128, 0).

CSS Code

h2 {
    color: rgb(0, 128, 0);
}

Output

The <h2> heading appears in green.

Explanation

  • rgb() stands for Red, Green, Blue.
  • Each value ranges from 0 to 255.
  • rgb(0, 128, 0) creates a medium green color.

Question 5: Apply an RGBA Color with Transparency

Problem Statement

Write CSS to set the background color of a <div> using rgba(0, 0, 255, 0.5).

CSS Code

div {
    background-color: rgba(0, 0, 255, 0.5);
}

Output

The <div> displays a semi-transparent blue background.

Explanation

  • rgba() stands for Red, Green, Blue, Alpha.
  • The first three values define the color.
  • The last value (0.5) controls transparency.
  • Alpha values range from 0 (fully transparent) to 1 (fully visible).

Question 6: Apply an HSL Color

Problem Statement

Write CSS to change the text color of an <h3> heading using the HSL value hsl(240, 100%, 50%).

CSS Code

h3 {
    color: hsl(240, 100%, 50%);
}

Output

The <h3> heading appears in blue.

Explanation

  • hsl() stands for Hue, Saturation, and Lightness.
  • 240 represents the blue hue.
  • 100% makes the color fully saturated.
  • 50% gives the color normal brightness.

Question 7: Apply an HSLA Color with Transparency

Problem Statement

Write CSS to set the background color of a <section> using hsla(120, 100%, 50%, 0.4).

CSS Code

section {
    background-color: hsla(120, 100%, 50%, 0.4);
}

Output

The <section> displays a semi-transparent green background.

Explanation

  • hsla() is similar to hsl() but includes an alpha value.
  • 120 represents the green hue.
  • 0.4 makes the background partially transparent.
  • HSLA is useful for creating modern UI designs.

Question 8: Change the Border Color

Problem Statement

Write CSS to add a 2px solid red border around a <div> element.

CSS Code

div {
    border: 2px solid red;
}

Output

The <div> displays a 2px solid red border.

Explanation

  • border is a shorthand property.
  • 2px sets the border width.
  • solid defines the border style.
  • red sets the border color.

Question 9: Use the transparent Color Value

Problem Statement

Write CSS to make the background of a button transparent.

CSS Code

button {
    background-color: transparent;
}

Output

The button displays no background color, allowing the page background to show through.

Explanation

  • transparent removes the visible background color.
  • It is commonly used for outline buttons.
  • The button remains clickable even without a background color.

Question 10: Apply Different Colors to Multiple Elements

Problem Statement

Write CSS to display an <h1> in navy blue, paragraphs in dark green, and buttons with an orange background.

CSS Code

h1 {
    color: navy;
}

p {
    color: darkgreen;
}

button {
    background-color: orange;
}

Output

  • <h1> appears in navy blue.
  • Paragraphs appear in dark green.
  • Buttons display an orange background.

Explanation

  • Different selectors can have different color properties.
  • color changes the text color.
  • background-color changes the background of an element.
  • Using different colors improves the visual appearance of a webpage.

Key Takeaways

  • CSS supports multiple color formats, including color names, HEX, RGB, RGBA, HSL, and HSLA.
  • color changes the text color.
  • background-color changes the background color.
  • border can also use color values.
  • RGBA and HSLA support transparency using the alpha value.
  • The transparent keyword removes the visible background color.
  • Choosing suitable colors improves readability and user experience.

Frequently Asked Questions (FAQs)

1. What are CSS colors?

CSS colors are used to change the appearance of text, backgrounds, borders, and other HTML elements. They make web pages more attractive and easier to read.

2. What color formats are supported in CSS?

CSS supports color names, HEX codes, RGB, RGBA, HSL, and HSLA color formats.

3. What is the difference between RGB and RGBA?

RGB defines a color using red, green, and blue values. RGBA includes an additional alpha value that controls transparency.

4. What is a HEX color code?

A HEX color code starts with the # symbol and uses six hexadecimal characters to represent a color. For example, #0000ff represents blue.

5. What is the purpose of the transparent value?

The transparent value removes the visible background color while keeping the element on the webpage.

6. When should I use HSL instead of RGB?

HSL is easier to understand when adjusting color shades, brightness, and saturation, making it useful for designing consistent color themes.

7. Can I use different color formats in the same stylesheet?

Yes. CSS allows you to mix color names, HEX, RGB, RGBA, HSL, and HSLA within the same stylesheet.

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

Related Posts

Scroll to Top