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

The order in which CSS files are loaded by the browser

Answer

The speed at which the browser parses the stylesheet

Answer

The maximum number of CSS rules allowed per 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

The space between the element and its neighboring elements

Answer

The thickness of the element's border

Answer

The space between the element's border and the viewport edge

Question 3

Which CSS selector type has the highest specificity?

Accepted Answer

ID selector (e.g., #header)

Answer

Element selector (e.g., div)

Answer

Class selector (e.g., .container)

Answer

Universal selector (*)

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

To control the browser zoom level for an element

Answer

To define the size of an element relative to its container

Answer

To specify the opacity level of an element

Question 5

How are CSS custom properties (CSS variables) defined?

Accepted Answer

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

Answer

Using the $variable-name syntax

Answer

Using the @define variable-name at-rule

Answer

Using the var() function directly in the property value

Question 6

What layout model does 'display: flex' enable for an element's children?

Accepted Answer

Flexbox one-dimensional layout for aligning and distributing children

Answer

Grid-based two-dimensional layout

Answer

Absolute positioning relative to the flex container

Answer

Float-based wrapping layout for inline elements

Question 7

Which CSS at-rule applies styles conditionally based on screen width or device characteristics?

Accepted Answer

@media

Answer

@keyframes

Answer

@import

Answer

@font-face