CSS — Test 1

Correct Answer: B. 230px
Explanation: 200 + 2×10 + 2×5 = 230. With box-sizing: border-box, it would be exactly 200px. ALSO KNOW (related points): • In mobile-first responsive CSS, which media queries are typically used? → min-width queries that add styles as the screen gets wider • Which CSS property is NOT inherited by child elements by default? → border

Correct Answer: D. #nav .item a
Explanation: #nav .item a scores (1,1,1). One ID outweighs any number of classes. ALSO KNOW (related points): • What does the selector div > p select? → <p> elements that are direct children of a <div> • How many columns does the Bootstrap grid system use? → 12

Correct Answer: A. The !important rule (blue)
Explanation: !important overrides normal declarations, including inline styles, unless the inline style is also !important. ALSO KNOW (related points): • What does 100vh mean? → 100% of the viewport's height

Correct Answer: B. They collapse to 30px (the larger one)
Explanation: Margin collapsing applies only to vertical margins, and not in flex or grid containers. ALSO KNOW (related points): • What does grid-template-columns: 1fr 2fr do? → It creates two columns, with the second taking twice the free space of the first • Two rules with identical specificity set different colors on the same element. Which one applies? → The rule that appears later in the cascade (source order) • What is the difference between a CSS transition and a CSS animation? → A transition animates between two states when a property changes; an animation runs keyframes that can loop without any trigger

Correct Answer: D. Its nearest ancestor whose position is not static
Explanation: If no such ancestor exists, it is positioned relative to the initial containing block. ALSO KNOW (related points): • What is the difference between display: none and visibility: hidden? → display: none removes the element from the layout; visibility: hidden hides it but keeps its space • Why might z-index: 999 have no effect on an element? → z-index applies only to positioned elements (and flex or grid items); a static element ignores it • What does position: sticky do? → The element acts as relatively positioned until a scroll threshold is reached, then sticks like a fixed element within its container

Correct Answer: C. display: none removes the element from the layout; visibility: hidden hides it but keeps its space
Explanation: opacity: 0 also keeps the space, and the element can still be clicked.

Correct Answer: B. z-index applies only to positioned elements (and flex or grid items); a static element ignores it
Explanation: Stacking contexts created by ancestors also limit the effect of z-index.

Correct Answer: A. 40px and 32px
Explanation: em is relative to the parent's font size (for the font-size property). rem is relative to the root's font size. ALSO KNOW (related points): • What is the difference between :hover and ::before? → :hover is a pseudo-class (a state); ::before is a pseudo-element (generated content) • What is the purpose of the srcset attribute on <img>? → It lets the browser choose an appropriately sized image for the screen's resolution and size

Correct Answer: C. justify-content controls the horizontal (main axis) alignment; align-items controls the vertical (cross axis) alignment
Explanation: With flex-direction: column, the axes swap. ALSO KNOW (related points): • What are SASS and LESS? → CSS preprocessors that add variables, nesting, and mixins, and compile to plain CSS

Correct Answer: B. It creates two columns, with the second taking twice the free space of the first
Explanation: The fr unit is a fraction of the remaining free space.