CSS Architecture & Design Systems Flashcards

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

Answer: Which CSS rule takes precedence when conflicting rules exist

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).

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

Answer: The space between the element's content and its border

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

Which CSS selector type has the highest specificity?

Answer: ID selector (e.g., #header)

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).

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

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

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

How are CSS custom properties (CSS variables) defined?

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

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).

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

Answer: Flexbox one-dimensional layout for aligning and distributing children

display: flex turns an element into a flex container, enabling the Flexbox layout model which allows flexible alignment and distribution of child elements along one axis.

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

Answer: @media

The @media at-rule allows you to apply CSS rules conditionally based on media features like screen width, making it the foundation of responsive design.