CSS Variables Quiz for Front-End Devs
by Kwiz
Qs
20
Difficulty
Mid
Plays
2
Record
1:57
Description

Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. This quiz will test your knowledge of CSS variables, including syntax, functionality & values.

NOTE: MDN refers to CSS Variables as Custom Properties. The front-end community generally refers to them as CSS Variables, so that is the term we use in this quiz!

Question Preview
What is the basic syntax for setting a CSS variable?
Question Preview
What is the syntax for accessing a CSS variable?
--main-color: black;
Question Preview
What is the main benefit of using CSS variables?
Question Preview
CSS variables are not subject to the cascade and do not inherit value from their parent
Question Preview
The following CSS syntax is valid
element {
  --main-bg-color: brown;
}
Question Preview
How can we define CSS variables so they can be used globally across an HTML document?
Question Preview
CSS variable names are case sensitive
Question Preview
The following CSS variable --main-bg-color can be used globally across an HTML document
element {
  --main-bg-color: brown;
}
Question Preview
By declaring a custom property on the :root pseudo-class and using it where needed throughout the document, a CSS author can reduce the need for repetition.
Question Preview
CSS variables are not inherited
Question Preview
What is the value of var(--test) for the class="four" element?
.two {
  --test: 10px;
}

.three {
  --test: 2em;
}

<div class="one">
  <div class="two">
    <div class="three"></div>
    <div class="four"></div>
  </div>
</div>
Question Preview
With CSS variables, you can set a property for an element and retrieve it in a sibling's descendant's rule
Question Preview
Using the var() function, you can define multiple fallback values when the given variable is not yet defined.
Question Preview
What is the correct syntax for CSS variable fallback values
Question Preview
What will the value of color be in the .two element if --my-var is not defined?
.two {
  color: var(--my-var, red); 
}

Question Preview
The following CSS variable fallback syntax is valid when providing more than one fallback
.three {
  background-color: var(--my-var, var(--my-background, pink)); 
}
Question Preview
The following CSS variable syntax is valid when defining more than one fallback
.three {
  background-color: var(--my-var, --my-background, pink); 
}
Question Preview
What happens with invalid variables?
:root { 
  --text-color: 16px; 
}
p { 
  color: blue; 
}
p { 
  color: var(--text-color); // 16px is not a valid property value for color
}

Question Preview
Which of the following are valid ways to use the values of CSS variables in JavaScript
Question Preview
What color is "Hello World"?
<style>
  #blue { --myVar: blue }
  .red { --myVar: red }
</style>

<div style='--myVar: pink'>
  <div id='blue'>
    <div class='red'>
      <span style='color: var(--myVar)'>Hello World</span>
    </div>
  </div>
</div>