CSS Quiz
Questions: 16 · 10 minutes
1. Which media feature lets CSS respond to a user's operating-system preference for reduced nonessential motion?
prefers-low-animation
reduced-transitions
prefers-reduced-motion
motion-preference
2. Which selector matches list items only when they are immediate children of an unordered list?
The descendant selector: ul li
The adjacent-sibling selector: ul + li
The child selector: ul > li
The general-sibling selector: ul ~ li
3. A flex container uses flex-direction: row. Which property distributes its children along the horizontal main axis?
align-items
justify-content
place-items
align-content
4. A box uses the default content-box model with width: 200px, padding: 20px, and border: 5px solid. What is its total rendered width, excluding margin?
200px
250px
220px
290px
5. A parent element has color: navy. No color is set on its child <span>. What color will the span's text normally use?
The browser background color, because text color is not inherited
Black, because child elements reset text color
Transparent, because the span has no color declaration
Navy, because color is inherited by default
6. These rules appear in the same stylesheet: .notice { color: blue; } followed later by .notice { color: red; }. With no other matching rules, what color is the notice text?
Red, because the later rule wins when specificity and importance are equal
Blue, because the first matching rule is retained
A blend of blue and red, because both declarations apply
The browser default, because duplicate selectors cancel out
7. A help button should remain in the same corner of the viewport while the page scrolls. Which positioning value is designed for this behavior?
position: fixed;
position: relative;
position: static;
position: absolute;
8. You need to hide an element while preserving its space in the page layout. Which declaration should you use?
display: none;
position: absolute;
visibility: hidden;
overflow: hidden;
9. An element has width: 300px and box-sizing: border-box. What does the declared width include?
Only the content area
The content, padding, and border, but not margin
The content and margin, but not padding or border
The content, padding, border, and margin
10. Which declaration creates three equal-width columns in a CSS Grid container?
grid-template-columns: repeat(3, 1fr);
grid-columns: 1fr 1fr 1fr;
grid-template-columns: 3fr;
grid-template-rows: repeat(3, 1fr);
11. An element has id=""promo"", class=""card"", and is an <article>. Which selector has the highest specificity?
.card
#promo
article.card
article
12. The root element has font-size: 20px. What computed length does 2rem represent?
20px
200px
2px
40px
13. Which rule correctly applies styles when the viewport width is 600px or less?
@media (max-width: 600px) { ... }
@media (min-width: 600px) { ... }
@viewport (width <= 600px) { ... }
@screen max-width(600px) { ... }
14. What is CSS primarily used for on a web page?
Adding application logic and event handling
Defining the semantic structure of page content
Handling server-side database queries
Controlling the visual presentation and layout of HTML content
15. Which selector applies a style when a pointing device is positioned over a link?
a::before, which selects a generated pseudo-element
a:focus, which matches a link that has input focus
a:active, which matches a link while it is being activated
a:hover, which matches a link under the pointer
16. A custom property is declared as --brand-color: #2457d6;. How should it be used as a text color?
color: --brand-color;
color: custom(--brand-color);
color: var(--brand-color);
color: value(--brand-color);