CSS custom properties (variables)
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Where do you typically declare global CSS custom properties so they are accessible throughout the entire document?
2. Which prefix must all CSS custom property names begin with?
3. Is the function syntax var(--color, blue) a valid way to provide a fallback value if --color is not defined?
4. Are CSS custom property names case-sensitive (meaning --main-color and --Main-Color are different)?
5. Can you change the value of a CSS custom property dynamically inside a media query or a hover state?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1--primary-color: #ff0000; | Amargin: var(--spacing, 10px); | |
| 2font-size: var(--text-lg); | B:root { --main-font: sans-serif; } | |
| 3Declares a global custom property that can be used anywhere in the CSS file. | CInvalid because custom property names cannot contain spaces. | |
| 4Uses a custom property with a fallback value of 10px if the variable is not defined. | DInvalid because the custom property name must be wrapped inside a var() function. | |
| 5body { --main padding: 20px; } | EDeclares a CSS custom property named --primary-color with a red color value. | |
| 6h1 { color: --theme-color; } | FApplies the value stored in the --text-lg custom property to the font-size property. |
C
Definitions
var()
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
:root {
____________: blue;
}
2.
body {
color: ___(--text-color);
}
3.
_____ {
--gap-size: 10px;
}
4.
h1 {
margin: var(_______, 20px);
}
5.
div {
padding: var(_____________);
}
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
.item {
B
-theme-color: red;
C
}
Question 2
A
body {
B
background-color: #fff;
C
color: var(text-color);
D
}
Question 3
A
var(--main-size): 16px; {
B
font-size: 16px;
C
}
Question 4
A
:root {
B
--main-padding: 15px;
C
}
D
div { padding: --main-padding; }
Question 5
A
p {
B
font-size: var(14px);
C
color: black;
D
}
Answer Key
CSS custom properties (variables)
Section A: Quick Questions
Q1
A — :root
Q2
A — --
Q3
B — Yes, separated by a comma
Q4
B — Yes, they are case-sensitive
Q5
A — Yes
Section B: Match the Pairs
Q1
--primary-color: #ff0000; → Declares a CSS custom property named --primary-color with a red color value.
Q2
font-size: var(--text-lg); → Applies the value stored in the --text-lg custom property to the font-size property.
Q3
Declares a global custom property that can be used anywhere in the CSS file. → :root {
--main-font: sans-serif;
}
Q4
Uses a custom property with a fallback value of 10px if the variable is not defined. → margin: var(--spacing, 10px);
Q5
body {
--main padding: 20px;
} → Invalid because custom property names cannot contain spaces.
Q6
h1 {
color: --theme-color;
} → Invalid because the custom property name must be wrapped inside a var() function.
Section C: Definitions
Q1
var() — A CSS function used to insert the value of a custom property (variable) into other CSS declarations.Section D: Fill in the Blanks
Q1
:root {
--main-color: blue;
}Q2
body {
color: var(--text-color);
}Q3
:root {
--gap-size: 10px;
}Q4
h1 {
margin: var(--space, 20px);
}Q5
div {
padding: var(--box-padding);
}Section E: Spot the Error
Q1
B — Line 1 is incorrect because CSS custom properties must begin with a double dash prefix (--), not a single dash.
Q2
C — Line 2 is incorrect because when referencing a custom property, the name inside var() must include the double dash prefix (--text-color).
Q3
A — Line 0 is incorrect because custom properties must be declared as property-value pairs inside a normal CSS ruleset selector.
Q4
D — Line 3 is incorrect because a custom property value must be retrieved by wrapping its name in the var() function syntax.
Q5
B — Line 1 is incorrect because the var() function is meant for retrieving custom property names, not for wrapping raw static CSS values.