Dan Levy

Quiz: Do You know CSS fundamentals? (2025)

Are you front-end enough?

Quiz: Do You Know CSS?

1. 

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 the 0 character
  • vmin - viewport minimum
  • vmax - viewport maximum
  • vh - viewport height
  • vw - 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

2. 

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 contain 3, 4, 6, or 8 hexadecimal digits.

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.

3. 

Warmup: Units

Which of these units is NOT a valid ❌ CSS unit?

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 relative to the element’s font size, 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).

4. 

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. In standards-mode HTML, ID values are case-sensitive, so #Home does not match id="home". A space is a descendant combinator; it would target a different element within an ancestor rather than combine conditions on this same link.

The :contains() selector is not a standard CSS selector, but it is available in some JS libraries.

5. 

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.

6. 

Selector: Fundamentals

Which of these selectors is invalid?

The selector c > > d {} is invalid because the child combinator is repeated without a selector between the two > characters.

The other selectors are valid. A type selector like c {} is syntactically valid CSS even if c is not a standard HTML element.

7. 

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 a:last-child, which matches the last <a> when it is also the last child of its parent. nav:nth-child(3) would match a <nav> element that is the third child of its own parent.

8. 

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.

9. 

Layouts: Centering

Which declaration horizontally centers inline text within its containing block?

Using text-align: center; is the correct way to center text in a block element. There is no CSS align property. margin: 0 auto; can center a block with a constrained width; it does not center text inside that block.

align-content aligns content in supported layout contexts, such as grid and multi-line flex containers; it is not the text-alignment property. text-content is not a valid CSS property.

10. 

Layouts: Centering

How do you center content vertically inside a block container in modern flow layout?

Using align-content is the modern way to center the contents of a block container vertically in flow layout.

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.

11. 

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.

12. 

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.

13. 

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.

14. 

Selector: Specificity

Which selector has the lowest specificity?

:where(.card) .title has the lowest specificity. The :where() pseudo-class and everything inside it contributes 0-0-0, so only .title counts. :is(.card) .title keeps the specificity of .card, .card .title has two classes, and #card .title includes an ID.

Loading comments...