CSS property: background-color MCQs Quiz | Class 10

Understanding background-color in CSS

The background-color CSS property is fundamental for controlling the visual appearance of web pages. It allows developers to specify the solid color that fills the background of an element’s content, padding, and border box.

Key Concepts of background-color

• Purpose: Sets the background color of an element. This color extends under the element’s content and padding.
• Syntax: background-color: value;
• Values: Can accept various color formats:
  • Color Keywords: e.g., red, blue, green, white, black, transparent.
  • Hexadecimal Colors: e.g., #FF0000 (red), #00FF00 (green), #0000FF (blue). Shorthand like #F00 is also valid.
  • RGB Colors: rgb(255, 0, 0) (red), rgb(0, 128, 0) (green). Values range from 0 to 255.
  • RGBA Colors: rgba(255, 0, 0, 0.5) (50% opaque red). The ‘A’ stands for Alpha, controlling opacity (0 to 1).
  • HSL Colors: hsl(0, 100%, 50%) (red). Hue (0-360), Saturation (0-100%), Lightness (0-100%).
  • HSLA Colors: hsla(0, 100%, 50%, 0.5) (50% opaque red). Adds an alpha channel to HSL.
• Inheritance: The background-color property does NOT inherit from parent elements by default. Each element needs its own declaration or will default to transparent.
• Layering: It sits below any background images applied with the background-image property.

Applying background-color to Elements

You can apply background-color to almost any HTML element. Here are some common examples:

Body Background

To set the background color for the entire webpage:

body {
    background-color: #f0f8ff; /* AliceBlue */
}

Div and Paragraph Backgrounds

For specific sections or text blocks:

.my-section {
    background-color: lightgoldenrodyellow;
    padding: 15px;
}

p {
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white for paragraphs */
    padding: 5px;
}

Color Formats at a Glance

Quick Revision Points

• background-color property sets an element’s background fill.
• It accepts keywords, hexadecimal, RGB, RGBA, HSL, and HSLA values.
• The default background color is typically transparent or white.
• RGBA and HSLA allow for opacity control.
• This property does not inherit.

Practice Questions

1. Write the CSS code to set the background color of an element with the class .header to a light blue using a hexadecimal value.
2. Explain the difference between rgb(0, 255, 0) and rgba(0, 255, 0, 0.5).
3. How would you set the background color of all p elements to transparent?
4. What is the significance of the ‘A’ in RGBA and HSLA color formats?
5. If an element has background-color: green; and its child element has background-color: transparent;, what will be the background color visible behind the child’s content?