CSS Basics Test

Check your knowledge of selectors, the box model, units, the cascade and basic layout behavior.

6 questions. Choose the best answer for each question, then review every explanation.

Question 1 of 6

1 of 6

Question 1Which selector targets elements with class="notice"?

[notice].notice#noticenotice

Question 2Which areas are included in the standard CSS box model?

Width, height and color onlyFont, line and textGrid, flex and blockContent, padding, border and margin

Question 3What is 1rem relative to?

The viewport widthThe root element font sizeThe current element widthThe parent element height

Question 4Which declaration removes an element from layout?

visibility: hidden;opacity: 0;color: transparent;display: none;

Question 5When two rules have equal origin, importance and specificity, which one wins?

The declaration with the shorter selectorThe browser chooses randomlyThe declaration appearing laterThe declaration appearing first

Question 6What does box-sizing: border-box change?

Declared width and height include padding and borderMargins become part of the backgroundThe element becomes a flex containerBorders no longer render