Front End Development CSS Architecture & Design Systems

Question 1

What does CSS specificity determine when multiple rules target the same element?

Accepted Answer

Which CSS rule takes precedence when conflicting rules exist

Answer

CSS specificity is the algorithm that determines which rule wins when multiple conflicting rules target the same element, calculated based on selector types (ID, class, element).

Question 2

In the CSS Box Model, what does the 'padding' property control?

Accepted Answer

The space between the element's content and its border

Answer

Padding controls the space between an element's content area and its border, existing inside the element's boundary.

Question 3

Which CSS selector type has the highest specificity?

Accepted Answer

ID selector (e.g., #header)

Answer

ID selectors have a specificity of (0,1,0,0), which is higher than class selectors (0,0,1,0) and element selectors (0,0,0,1).

Question 4

What is the purpose of the CSS 'z-index' property?

Accepted Answer

To set the stacking order of positioned elements along the z-axis

Answer

z-index controls the stacking order of positioned elements along the z-axis, determining which elements appear in front of or behind others.

Question 5

How are CSS custom properties (CSS variables) defined?

Accepted Answer

Using the --variable-name syntax within a selector scope

Answer

CSS custom properties are defined with a double-dash prefix (e.g., --primary-color: blue;) within a selector scope and referenced with var(--primary-color).

Front End Development Practice Test

Front End Development Practice Test

Front End Development CSS Architecture & Design Systems