curriculum/challenges/english/blocks/quiz-css-variables/66ed9018f45ce3ece4053eb9.md
To pass the quiz, you must correctly answer at least 18 of the 20 questions below.
Which of the following is NOT a valid descriptor in the @property rule?
syntax
inherits
initial-value
animation
In the following code, which value will color have if --main-color is not defined?
p {
color: var(--main-color, pink);
}
Undefined
No color will be applied.
--main-color
pink
Which of the following is a valid way to declare a custom property in CSS?
$background-color: #333;
@property: #333
var(--background-color: #333);
--background-color: #333;
What is the main purpose of using custom properties in CSS?
To change the DOM structure.
To create dynamic selectors.
To improve accessibility.
To define reusable styles.
What does the :root selector represent?
The first child element of the body.
The parent element of all header elements.
The first child of the html tag.
The highest-level element in the DOM tree.
How do you apply a --foreground custom property as the color in CSS?
color: --foreground;
color: css(--foreground);
color: $foreground;
color: var(--foreground);
What is the purpose of the @property rule in CSS?
To define a media query.
To control CSS animations and their timing.
To group CSS properties into one rule.
To define how custom properties behave.
When declaring a custom @property, what is the purpose of the syntax in its definition?
It specifies the default value of the custom property.
It determines whether the property can be inherited by child elements.
It defines whether the property is applied to all elements.
It enforces a specific data type or value pattern for the custom property.
What should you be cautious of when using custom properties?
Custom properties are automatically converted to px units.
Custom properties always override inline styles.
Custom properties cannot be used to set font values.
Custom properties may not be supported in older browsers.
What is the purpose of providing a fallback value in the var() function for CSS custom properties?
To reduce the amount of CSS code.
To improve performance in modern browsers.
To optimize rendering time on slow networks.
To ensure a valid value is applied if the custom property is undefined.
When defining a variable --foreground inside a media query, what happens when the media query no longer matches the current viewport?
The custom property is preserved and continues to apply.
The custom property reverts to its initial value.
The custom property is recalculated based on the viewport.
The custom property is no longer available as it is scoped to the media query.
How would the following declaration behave?
color: var(--main-color, var(--fallback-color, #000));
It will apply --main-color even if it is not defined, defaulting to that value.
It will apply --main-color and --fallback-color simultaneously, resulting in a blend of the two colors.
It will always default to #000, regardless of whether --main-color or --fallback-color is defined.
It applies --main-color if defined; otherwise, checks --fallback-color; and if both are undefined, it uses #000.
What is one benefit of using @property in CSS?
It improves performance by precomputing custom property values.
It automatically prefixes custom properties for better browser support.
It restricts the use of custom properties to specific elements.
It allows for animations of custom properties.
What does the inherits property in a custom @property declaration control?
Whether the custom property will have an initial value.
Whether the property can have a shorthand version.
Whether the property accepts fallback values.
Whether the custom property's value is passed to child elements.
In the declaration of a custom @property, what does the initial-value specify?
The acceptable values the property can accept.
The priority of the property in the cascade.
The type of value the property must have.
The fallback value for the property.
Given the following HTML and CSS code, what will be the value of the color property for the .box element?
<div class="container">
<div class="box">Text</div>
</div>
:root {
--main-color: red;
}
.container {
--main-color: blue;
}
.box {
color: var(--main-color, black);
}
black
red
green
blue
Which property should a CSS gradient be applied to?
color
border-radius
box-shadow
background
What is the purpose of color stops in CSS gradients?
To define the transparency level of the gradient.
To specify the direction of the gradient.
To repeat the gradient in a fixed pattern.
To define the specific points where colors change in the gradient.
What happens if no angle or direction is specified in a CSS linear gradient?
The gradient defaults to a diagonal direction.
The gradient defaults to moving from bottom to top.
The gradient defaults to moving from left to right.
The gradient defaults to moving from top to bottom.
Which CSS gradient function allows you to create a gradient that radiates outward from a central point?
linear-gradient()
conic-gradient()
repeating-linear-gradient()
radial-gradient()
Which of the following is a correct way to declare a CSS custom property?
background-color: var(--blue);
custom-property: blue;
define --my-color: blue;
--my-color: blue;
What selector is typically used to define global CSS custom properties?
.global {}
* {}
body {}
:root {}
When using var(), why is it recommended to include a fallback value?
It ensures the variable will animate correctly.
It avoids loading external stylesheets.
It prevents browser reflow.
It guarantees a valid value if the custom property is undefined.
What is the correct syntax to apply a custom property as a background color?
background: get(--main-bg);
background: css(--main-bg);
background: --main-bg;
background: var(--main-bg);
Which CSS rule allows developers to define custom properties with greater control over their behavior?
@media
@keyframes
@supports
@property
What does the inherits field in an @property definition control?
Whether the property is used in JavaScript.
Whether the property will trigger repaints.
Whether the property can contain functions.
Whether the property's value is passed to child elements.
When defining an animated gradient angle using @property, which syntax should be used?
"<number>"
"<color>"
"<string>"
"<angle>"
What distinguishes a CSS custom property from a standard CSS property in terms of how it's defined?
Standard CSS properties are defined with a single dash, while custom properties use two dashes.
Standard CSS properties use var() for definition, while custom properties do not.
Standard CSS properties are defined using the @property rule, while custom properties are not.
Custom properties must start with two dashes (--), while standard CSS properties do not.
Which of these is a benefit of using CSS custom properties?
They reduce the need for CSS comments.
They automatically optimize images.
They make JavaScript variables obsolete.
They allow styles to be reused and centrally maintained.
Which CSS property can change dynamically based on media queries using custom properties?
Only background-color
Only font-family
Only z-index
Any property that accepts a value.
In the context of CSS variables, what is the role of initial-value in an @property rule?
It sets the minimum value of the property.
It defines the maximum value for animations.
It changes the selector priority.
It assigns a default value for the property if none is set.
Consider the following HTML and CSS. What background color will be applied to the .card element?
<div class="dark-theme">
<div class="card">Content</div>
</div>
:root {
--bg-color: white;
}
.dark-theme {
--bg-color: #333;
}
.card {
background: var(--bg-color);
}
white
transparent
inherit
#333
In the following CSS, what happens if a user tries to assign an invalid value to --padding (for example, a color instead of a length)?
@property --padding {
syntax: "<length>";
initial-value: 0px;
inherits: false;
}
The browser accepts the value but ignores it during layout.
The browser throws a runtime error.
The browser converts the value to a valid length automatically.
The browser falls back to the property's initial value.
What is the purpose of the --gradient-angle custom property in this example?
@property --gradient-angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.gradient {
width: 100px;
height: 100px;
background: linear-gradient(var(--gradient-angle), red, blue);
transition: --gradient-angle 0.5s;
}
.gradient:hover {
--gradient-angle: 90deg;
}
It defines the speed of the gradient transition.
It specifies the size of the gradient.
It sets the color blending mode.
It controls the direction of the gradient.
Which scenario best shows the advantage of using custom properties for themes?
Using them just for font sizes.
Applying them only on :hover.
Restricting them to one CSS class.
Changing values via class.
Why might developers prefer using :root for defining CSS variables?
Because :root improves page load speed.
Because :root disables specificity.
Because :root is required for JavaScript.
Because :root allows the properties to be globally scoped.
What would the following CSS do if --secondary-color is undefined?
h1 {
color: var(--secondary-color, orange);
}
It will apply black.
It will ignore the color property.
It will apply --secondary-color.
It will apply orange.
What type of values does <color> represent in an @property syntax field?
Angles like 90deg.
Lengths like 10px.
Percentages like 50%.
Color values like #ff0000 or red.
What is the main benefit of using custom properties in combination with @property?
They prevent needing fallback values.
They force static layout.
They reduce the need for classes.
They allow property animation.
What does var(--undefined-property, fallback) do when the custom property is not defined?
Throws an error and stops applying styles.
Ignores the entire CSS rule.
Applies the variable name as is.
Applies the fallback value instead.