Front End Development CSS Architecture & Design Systems 1 — Questions and Answers
Question 1: What does CSS specificity determine when multiple rules target the same element?
- The order in which CSS files are loaded by the browser
- Which CSS rule takes precedence when conflicting rules exist (Correct answer)
- The speed at which the browser parses the stylesheet
- The maximum number of CSS rules allowed per element
Correct 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).
Question 2: In the CSS Box Model, what does the 'padding' property control?
- The space between the element and its neighboring elements
- The space between the element's content and its border (Correct answer)
- The thickness of the element's border
- The space between the element's border and the viewport edge
Correct 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.
Question 3: Which CSS selector type has the highest specificity?
- Element selector (e.g., div)
- Class selector (e.g., .container)
- ID selector (e.g., #header) (Correct answer)
- Universal selector (*)
Correct 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).
Question 4: What is the purpose of the CSS 'z-index' property?
- To control the browser zoom level for an element
- To set the stacking order of positioned elements along the z-axis (Correct answer)
- To define the size of an element relative to its container
- To specify the opacity level of an element
Correct 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.
Question 5: How are CSS custom properties (CSS variables) defined?
- Using the $variable-name syntax
- Using the --variable-name syntax within a selector scope (Correct answer)
- Using the @define variable-name at-rule
- Using the var() function directly in the property value
Correct 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).
Question 6: What layout model does 'display: flex' enable for an element's children?
- Grid-based two-dimensional layout
- Flexbox one-dimensional layout for aligning and distributing children (Correct answer)
- Absolute positioning relative to the flex container
- Float-based wrapping layout for inline elements
Correct 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.
Question 7: Which CSS at-rule applies styles conditionally based on screen width or device characteristics?
- @keyframes
- @import
- @media (Correct answer)
- @font-face
Correct 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.
Front End Development CSS Architecture & Design Systems 1
What does CSS specificity determine when multiple rules target the same element?