CSS property: color MCQs Quiz | Class 10
This quiz covers Class X Computer Applications (Code 165), Unit 2: HTML, focusing on the CSS property: color. Specifically, it tests your knowledge on text colour property. After attempting the 10 multiple-choice questions, submit your answers to see your score and download a personalized PDF answer sheet.
Understanding the CSS `color` Property
The CSS color property is fundamental for styling web pages, primarily used to set the foreground color of an element’s text content. It plays a crucial role in enhancing readability and visual appeal.
Key Concepts of the color Property
- Purpose: It defines the color of the text within an element. For instance, if you apply
color: blue;to a paragraph, all text inside that paragraph will appear blue. - Inheritance: By default, the
colorproperty is inherited by child elements. If you set a color for a parentdiv, its childpandspanelements will adopt that color unless specifically overridden. - Scope: While it primarily affects text, it can also influence the color of other foreground elements like underlines, overlines, or vertical rules set by properties like
text-decoration.
Syntax and Value Types
The basic syntax for the color property is color: value;. CSS offers several ways to specify color values:
| Value Type | Description | Example |
|---|---|---|
| Named Colors | Predefined keywords for common colors. | color: red;color: blue;color: lightgray; |
| Hexadecimal (Hex) Values | A 6-digit (or 3-digit shorthand) alphanumeric code representing RGB components. | color: #FF0000; (Red)color: #008000; (Green)color: #FFF; (White) |
| RGB Values | Specifies Red, Green, and Blue intensity from 0 to 255 (or 0% to 100%). | color: rgb(255, 0, 0); (Red)color: rgb(0%, 100%, 0%); (Green) |
| RGBA Values | Adds an Alpha channel (transparency) to RGB, from 0.0 (fully transparent) to 1.0 (fully opaque). | color: rgba(255, 0, 0, 0.5); (50% transparent red) |
| HSL Values | Specifies Hue (0-360 degrees), Saturation (0-100%), and Lightness (0-100%). | color: hsl(0, 100%, 50%); (Red)color: hsl(120, 100%, 50%); (Green) |
| HSLA Values | Adds an Alpha channel (transparency) to HSL. | color: hsla(0, 100%, 50%, 0.7); (70% opaque red) |
Quick Revision Checklist
- The
colorproperty sets the text color. - It accepts named colors, hexadecimal codes, RGB(A), and HSL(A) values.
- Named colors are easy to read but limited in choice.
- Hex codes (e.g.,
#RRGGBB) are widely used for precise color definitions. - RGB values (
rgb(red, green, blue)) offer numerical control over color components. - RGBA and HSLA allow for setting transparency (alpha channel).
- The
colorproperty is inherited by default from parent elements.
Extra Practice Questions
- Which value type for the `color` property allows you to specify a color using a human-readable name like ‘orange’?
- What is the hexadecimal code for pure black?
- If you want to define a color with specific red, green, and blue values, which function would you use?
- How would you make the text of a heading element 50% transparent blue using RGBA?
- Does setting `color: green;` on a `div` element automatically make the text of all its child `p` elements green?
