Quiz: Do You know CSS fundamentals? (2025)
Are you front-end enough?
Quiz: Do You Know CSS?
- Modern CSS? 🤔
- Does CSS belong on your resume??? 🚀
- Multiple choice. 🤖 … How difficult can it be, eh?
Warmup: Fonts
Select the ONE INVALID ❌ font-size:
10cx is incorrect since cx isn’t a real CSS unit. (At least at the time of writing.)
Popular units include the familiar px, rem, em.
Newer units are useful for dynamic, responsive layouts.
ch- width of the0charactervmin- viewport minimumvmax- viewport maximumvh- viewport heightvw- viewport width
There are also several units that have always been around but are rarely used, like cm for centimeters, mm, in for inches, pt for points
Warmup: Colors
Can you spot the ONE valid 👍 hex code?
Hex codes can be used to represent colors in CSS. They are prefixed with a # and must be 3, 4, 6, or 8 characters long.
The 3-character hex code is a shorthand for the 6-character code, where each character is repeated. The 4-character code includes an alpha channel for transparency.
For example #ABC is the same as #AABBCC, and #ABCD is the same as #AABBCCDD. To learn more about handling hex values, check out my JavaScript numbers quiz.
Warmup: Units
Which of these units is NOT a valid ❌ CSS unit? (Yes, ALL but ONE are unsupported.)
New units like ch, vmin, vmax, vh, vw are quite useful for dynamic/responsive layouts.
There are also several units that have always been around but are rarely used, like cm for centimeters, mm, in for inches, pt for points, pc, cap for the size of capital letters, and ex which is equal to the height of the letter x.
Popular units include the familiar px for pixels, em for the width of the letter m, and rem is secretly an homage to the forgotten 90’s band R.E.M. (ok, not really, it’s just a relative em unit that references the root element).
Selector: Fundamentals
Which selector best matches the following HTML?
<a id="home" name="home" href="/home">Home</a>The correct answer is a#home[name='home'], which matches both the id and name attributes. CSS selectors are case-sensitive, so #Home wouldn’t work, and spaces imply child elements, which doesn’t apply here.
The :contains() selector is not a standard CSS selector, but it is available in some JS libraries.
Selector: Fundamentals
Which selector matches the following HTML button?
<button onclick="openModal()">Contact</button>The correct answer is button[onclick], which targets the existence of attribute onclick.
Note that :link only targets unvisited href links, ::click is not a valid pseudo-element, and :focus targets only the focused element.
Selector: Fundamentals
Which of these selectors is invalid?
The selector c {} is invalid because there is no <c></c> HTML element. Valid CSS selectors match known HTML tags, IDs, or classes.
The other selectors are valid, targeting <a>, <b class="b">, and an element with the ID d.
Selector: Fundamentals
Which selector matches the last link in the following HTML?
<nav> <a name="home" href="/home">Home</a> <a name="login" href="/login">Login</a> <a name="help" href="/help">Help</a></nav>The correct selector is nav:nth-child(3), which targets the third child of the nav element. The :last-item and :last-child selectors are not valid CSS selectors, and :nth-child(3) targets the third child of any parent element.
Selector: Specificity
Which selector will take priority?
The a#quote selector takes priority due to the ID, which has a higher specificity than tag or class-based selectors.
Layouts: Centering
How can you center “shit” in a box?
Using text-align: center; is the correct way to center text in a block element. The align properties are used for flexbox layouts, and margin: 0 auto; is used to center block elements horizontally.
The align-content property is used for grid layouts, and text-content is not a valid CSS property.
Layouts: Centering
How do you center a block element vertically in flow layout?
Using align-content is the correct way to center a block element vertically, since being added to flow layout in 2024.
The align-items and justify-content properties are used for flexbox and grid layouts, but not flow.
Both margin: 0 auto; and margin: auto; center a block element horizontally, but not vertically.
Layouts: Units
What is the pixel size of the <a> link’s text in the following HTML?
<body style="font-size: 40px !important;"> <nav style="font-size: 50%;"> <a style="font-size: 25%;">HOME</a> </nav></body>The font-size for <a> calculates as 5px: 40px (body) * 50% (nav) = 20px, then 20px * 25% = 5px.
Units: REM
What will be the pixel size of 1.2rem for the “HOME” link in the following HTML?
<html style="font-size: 10px;"> <body style="font-size: 20px;"> <a style="font-size: 1.2rem;">HOME</a> </body></html>1.2rem translates to 12px because rem units reference the root or <html> font size, set here to 10px.
Units: EM
Similar to the previous question, what will be the pixel size of 1.2em for the “HOME” link in the following HTML?
<html style="font-size: 10px;"> <body style="font-size: 20px;"> <a style="font-size: 1.2em;">HOME</a> </body></html>1.2em translates to 24px because em units reference the inherited font size, set here to 20px.
Selector: Specificity
Which selector will take priority?
The a#quote selector takes priority due to the ID, which has a higher specificity than tag or class-based selectors.
