CSS Mastery Challenge: Tough Interview Questions for Advanced Frontend Developers — Questions & Answers

This quiz contains 10 questions. Below is a complete reference of all questions, answer choices, and correct answers. You can use this section to review after taking the interactive quiz above.

1. Question 1: CSS vs. CSS3 Features

   Which of the following features was first introduced in CSS3 and was not available in earlier versions of CSS? For example, adding dynamic visual effects without JavaScript.

   • A. Media Queries
   • B. Margin Collapsing
   • C. Font-Family Declaration
   • D. Float Layouts
   • E. Box Model
   Show correct answer

   Correct answer: A. Media Queries

2. Question 2: Understanding Specificity Hierarchy

   Given the selectors #box, .highlight, and div, which one will have the highest specificity when applied to a <div id='box' class='highlight'>element</div>?

   • A. div
   • B. #box
   • C. .highlight
   • D. #highlight
   • E. div .highlight
   Show correct answer

   Correct answer: B. #box

3. Question 3: Positioning Context Clarification

   With 'position: absolute;', an element is positioned relative to which of the following by default, when no ancestor has a positioning context?

   • A. The nearest parent element
   • B. The browser window
   • C. The HTML root element
   • D. The body element
   • E. The next sibling element
   Show correct answer

   Correct answer: D. The body element

4. Question 4: Deep Dive Into the Box Model

   In the CSS box model, which layer is directly between an element's content and its border? For example, if you set padding on an element, where does it appear?

   • A. Margin
   • B. Border
   • C. Padding
   • D. Outline
   • E. Content Edge
   Show correct answer

   Correct answer: C. Padding

5. Question 5: Relative Units in Practice

   If a parent div has a font-size of 20px, an inner span with font-size: 2em will have what computed font size?

   • A. 10px
   • B. 20em
   • C. 40px
   • D. 22px
   • E. 2px
   Show correct answer

   Correct answer: C. 40px

6. Question 6: Advanced Flexbox Properties

   In Flexbox, which property would you use to control the direction of flexible items, for example, swapping between row and column layouts?

   • A. flex-wrap
   • B. flex-grow
   • C. flex-direction
   • D. align-content
   • E. display-flow
   Show correct answer

   Correct answer: C. flex-direction

7. Question 7: Identifying Media Query Syntax

   Which of the following is a valid CSS media query to target screens smaller than 600px wide?

   • A. @media (screen-width < 600px) { ... }
   • B. @media screen and (min-width: 600px) { ... }
   • C. @media only screen and (max-width: 600px) { ... }
   • D. @media max-width=600px { ... }
   • E. @media [width<=600] { ... }
   Show correct answer

   Correct answer: C. @media only screen and (max-width: 600px) { ... }

8. Question 8: Attribute Selectors Nuance

   Which CSS selector targets all input elements of type 'password', for example, to show an eye icon in password fields?

   • A. input.password
   • B. #password
   • C. [input='password']
   • D. input[type='password']
   • E. .input[type=password]
   Show correct answer

   Correct answer: D. input[type='password']

9. Question 9: Distinguishing Pseudo-Elements and Pseudo-Classes

   Which of the following is a pseudo-class rather than a pseudo-element? For instance, it applies style based on user interaction.

   • A. ::before
   • B. ::marker
   • C. :hover
   • D. ::after
   • E. ::first-letter
   Show correct answer

   Correct answer: C. :hover

10. Question 10: Responsive Design Approach

    Which combination of techniques is essential for creating a responsive website that adapts to various screens and devices?

    • A. Using fixed pixel widths and floats
    • B. Relying solely on tables and absolute positioning
    • C. Implementing media queries and flexible grid layouts
    • D. Using only em units for font sizing
    • E. Applying inline styles
    Show correct answer

    Correct answer: C. Implementing media queries and flexible grid layouts