📚 Topic Summary
CSS values define the properties of HTML elements, controlling their appearance and behavior on a webpage. These values can range from simple keywords like auto or inherit to complex functions and units of measurement such as pixels (px), ems (em), percentages (%), and color codes (#RRGGBB or rgba()). Understanding these values is crucial for precise and responsive web design. They dictate everything from element size and position to color and typography. This worksheet will test your knowledge of common CSS values through a variety of question types. Let's get started!
🧮 Part A: Vocabulary
Match the term to its correct definition.
| Term |
Definition |
| 1. Pixel (px) |
A. Represents a relative font size of an element. |
| 2. Em (em) |
B. A standard unit of length on a screen, equal to one dot. |
| 3. Percentage (%) |
C. A hexadecimal representation of a color. |
| 4. Hex Code (#RRGGBB) |
D. Relates to the parent element's font size. |
| 5. Auto |
E. A value relative to another value, such as the parent's width. |
Click to reveal answers
- 1 - B
- 2 - D
- 3 - E
- 4 - C
- 5 - A
✏️ Part B: Fill in the Blanks
Complete the following paragraph with the correct CSS value terms.
When setting the width of an element to be half of its parent container, you would use a ______ value. If you want the browser to calculate the margin size automatically, you can use the ______ keyword. To define a color with transparency, you would often use _________.
Click to reveal answers
- Percentage (%)
- Auto
- RGBA
🤔 Part C: Critical Thinking
Explain the difference between using em and rem units in CSS. Why might you choose one over the other?