CSS Deep Dive: 10 Challenging Frontend Interview Questions Quiz

1. Understanding Display Property

   Which value of the CSS 'display' property removes the element entirely from the document rendering, so that neither the element nor its space is visible on the page?

   1. inline
   2. block
   3. hidden
   4. none
   5. collapse

2. Flexbox Directionality

   If you want flex items in a flex container to be stacked vertically instead of the default horizontal layout, which property and value combination should you use?

   1. flex-direction: row;
   2. flex-direction: column;
   3. justify-content: vertical;
   4. align-items: left;
   5. display: stack;

3. CSS Grid Gap Usage

   In a CSS Grid container, which property should you use to add space equally between both grid rows and columns without affecting the outer edges of the grid?

   1. grid-spacing
   2. grid-gap
   3. gap
   4. row-gap
   5. padding

4. Keyframes Syntax

   Which of the following is the correct way to define a CSS keyframes animation called 'pulse'?

   1. @keyframes pulse { from { opacity: 1; } to { opacity: 0; } }
   2. keyframe pulse { 0% { opacity: 1; } 100% { opacity: 0; } }
   3. @keyframe pulse { 0 { opacity: 1; } 100 { opacity: 0; } }
   4. @-keyframes pulse { from { opacity: 1; } to { opacity: 0; } }
   5. @keyframs pulse { 0% { opacity: 1; } 100% { opacity: 0; } }

5. Difference Between Inline and Inline-Block

   Which statement correctly describes the CSS difference between 'display: inline;' and 'display: inline-block;' given the following HTML: u003Cspan style='display:inline;'u003EAu003C/spanu003E u003Cspan style='display:inline-block;'u003EBu003C/spanu003E?

   1. 'inline-block' allows setting width and height, unlike 'inline'.
   2. 'inline' elements begin on a new line, 'inline-block' stays on the same line.
   3. 'inline-block' elements are hidden by default.
   4. 'inline' elements always stack vertically.
   5. 'inline-block' ignores vertical-align.

6. Grid Area Naming

   In CSS Grid, what is the purpose of 'grid-template-areas'?

   1. To assign class names to grid containers.
   2. To visually group grid lines into sets.
   3. To define named areas for cell placement within the grid.
   4. To position the grid container itself on the page.
   5. To create a border around all grid items.

7. Flexbox vs. Grid Use Case

   Given a layout requirement where you need both vertical and horizontal alignment of items within a two-dimensional matrix, and each cell may span multiple rows or columns, which CSS technique is best suited?

   1. Flexbox
   2. Box model
   3. CSS Grid
   4. Floats
   5. Position: absolute;

8. Cascading Specificity

   If three CSS rules are defined for an element, which rule will be applied with the highest priority: 1) .class1; 2) div; 3) #id1?

   1. div
   2. .class1
   3. #id1
   4. .id1
   5. id1

9. Block Formatting Context (BFC)

   Which CSS property can trigger a new Block Formatting Context (BFC), helping to contain floats and prevent margin collapsing?

   1. overflow: hidden;
   2. display: inline;
   3. background-color: transparent;
   4. position: static;
   5. visibility: collapse;

10. Responsive Design and Media Queries

    What is the primary function of a media query such as '@media (max-width: 600px)' in a CSS file?

    1. To apply styles to all browsers universally
    2. To style only HTML elements with 'max-width' inline attribute
    3. To conditionally apply CSS rules based on the device's screen width
    4. To minimize the CSS file size
    5. To disable JavaScript on small screens