Question 1

What is the CSS box model?

Accepted Answer

The CSS box model represents every HTML element as a rectangular box consisting of four areas: content (the actual content), padding (space between content and border), border (the edge around padding), and margin (space outside the border). Understanding the box model is essential for controlling element sizing and spacing.

Question 2

How does specificity work in CSS?

Accepted Answer

CSS specificity determines which styles are applied when multiple rules target the same element. It's calculated based on selector types: inline styles (1000), IDs (100), classes/attributes/pseudo-classes (10), and elements/pseudo-elements (1). Higher specificity wins; equal specificity uses the last declared rule.

Question 3

What is the difference between margin and padding?

Accepted Answer

Padding is the space between an element's content and its border, creating internal spacing. Margin is the space outside the border, creating distance between elements. Padding affects the element's background area, while margins are always transparent and can collapse vertically between adjacent elements.

Question 4

What are the different positioning methods in CSS?

Accepted Answer

CSS offers five positioning methods: static (default, normal document flow), relative (offset from normal position), absolute (positioned relative to nearest positioned ancestor), fixed (positioned relative to viewport, stays on scroll), and sticky (switches between relative and fixed based on scroll position).

Question 5

What is Flexbox and what are its main properties?

Accepted Answer

Flexbox is a one-dimensional layout system for arranging items in rows or columns. Key container properties include display: flex, flex-direction, justify-content (main axis alignment), align-items (cross axis alignment), and flex-wrap. Item properties include flex-grow, flex-shrink, and flex-basis.

Question 6

How does CSS Grid differ from Flexbox?

Accepted Answer

CSS Grid is a two-dimensional layout system controlling both rows and columns simultaneously, ideal for complex page layouts. Flexbox is one-dimensional, handling either rows or columns, better suited for component layouts and distributing space among items. Grid excels at overall page structure; Flexbox excels at content alignment.

Question 7

What are CSS media queries?

Accepted Answer

Media queries allow you to apply different CSS styles based on device characteristics like screen width, height, orientation, or resolution. They're essential for responsive design, enabling layouts that adapt to different devices. Syntax: @media (max-width: 768px) { /* mobile styles */ }.

Question 8

What are pseudo-classes and pseudo-elements?

Accepted Answer

Pseudo-classes select elements based on state or position (e.g., :hover, :focus, :nth-child, :first-child). Pseudo-elements create virtual elements to style specific parts of content (e.g., ::before, ::after, ::first-line, ::first-letter). Pseudo-classes use single colon; pseudo-elements use double colons.

Question 9

How do you center an element horizontally and vertically?

Accepted Answer

Modern approaches include Flexbox (display: flex; justify-content: center; align-items: center on parent) or Grid (display: grid; place-items: center on parent). For absolute positioning: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%). Flexbox is generally the simplest solution.

Question 10

What are CSS Custom Properties (variables)?

Accepted Answer

CSS Custom Properties (variables) are reusable values defined with -- prefix (e.g., --primary-color: blue). Access them using var(--primary-color). Unlike preprocessor variables, they cascade, can be changed dynamically with JavaScript, and support inheritance. They're ideal for theming and maintaining consistent design systems.

Question 11

What is the difference between display: none and visibility: hidden?

Accepted Answer

display: none removes the element completely from the document flow—it takes no space and is not rendered. visibility: hidden hides the element but preserves its space in the layout. Use display: none when the element should not affect layout; use visibility: hidden to maintain spacing while hiding content.

Question 12

What is mobile-first design in CSS?

Accepted Answer

Mobile-first design means writing base CSS styles for mobile devices, then using min-width media queries to add styles for larger screens. This approach typically results in cleaner code, better mobile performance (mobile devices load only necessary styles), and ensures mobile users aren't downloading unnecessary desktop styles.

Question 13

How do CSS transitions and animations differ?

Accepted Answer

Transitions animate property changes between two states, triggered by state changes like :hover. They're simple and require a trigger. Animations use @keyframes to define multiple states and can run automatically, loop infinitely, and control timing precisely. Use transitions for simple interactions; animations for complex, multi-step effects.

Question 14

What is the BEM naming convention?

Accepted Answer

BEM (Block Element Modifier) is a CSS naming methodology. Block is a standalone component (.card), Element is a part of the block (.card__title), and Modifier is a variation (.card--featured). BEM improves code readability, maintainability, and prevents specificity conflicts through flat, descriptive class names.

Question 15

What is critical CSS and why is it important?

Accepted Answer

Critical CSS is the minimum CSS needed to render above-the-fold content. By inlining critical CSS in the HTML head and deferring the rest, you eliminate render-blocking resources, improving First Contentful Paint and perceived load time. Tools like Critical or Penthouse can extract critical CSS automatically.

Basic Concepts(6 questions)

What is CSS and why is it used?

How do inline, inline-block, and block-level elements differ?

Can you explain the differences between margin and padding?

What does the CSS box model represent?

How do you specify colors in CSS (e.g., hex, RGB, RGBA, HSL)?

What is the purpose of the "reset" or "normalize" in CSS?

Selectors and Specificity(5 questions)

What are the different types of CSS selectors and when would you use them?

How does the cascade and specificity work in CSS?

What are pseudo-classes and pseudo-elements? Give examples of each.

How do you target an element based on the state of its parent or sibling?

What is the difference between the ">" (child) and " " (descendant) combinators?

Layout and Positioning(7 questions)

What are the different methods of positioning elements (static, relative, absolute, fixed, sticky)?

How does float work and what are common ways to clear floated elements?

Can you explain the differences between display: block, display: inline, and display: inline-block?

What is the difference between width: auto and width: 100%?

How do you center an element horizontally and vertically using modern approaches (e.g., Flexbox, CSS Grid)?

What are the main concepts and properties of Flexbox?

How does CSS Grid differ from Flexbox, and in which use cases are they each more appropriate?

Responsive Design Interview Questions(5 questions)

What are media queries and how are they used to create responsive designs?

How do you handle responsive typography?

What does mobile-first design mean, and why might you choose it?

What are some best practices for responsive images in CSS?

How do you prevent horizontal scroll on mobile devices?

Advanced Selectors and Techniques(6 questions)

What are attribute selectors and how can they be used effectively?

Can you explain how to use :nth-child, :nth-of-type, and related pseudo-classes?

What is the difference between ::before and ::after?

How do you create custom shapes using only CSS (clip-path, border-radius, etc.)?

Can you describe how CSS transforms and transitions work?

How do CSS animations differ from transitions?

Preprocessors, Methodologies, and Architecture(4 questions)

What are CSS preprocessors like SASS or LESS, and what benefits do they offer?

Can you explain BEM (Block Element Modifier) naming convention and why it's useful?

What are CSS Modules in the context of modern frameworks (e.g., React)?

How do you organize and maintain large-scale CSS code bases?

Performance and Optimization(5 questions)

How do you handle CSS performance for large sites or applications?

What is the render-blocking effect of CSS and how can it be minimized?

How can you reduce the size of your CSS files (e.g., minification, compression, bundling)?

What are critical CSS and how do you implement it?

What is the difference between inlining CSS vs. linking CSS, and when might each be appropriate?

Browser Compatibility and Tools(4 questions)

What tools or methods do you use for cross-browser testing and debugging CSS issues?

How can vendor prefixes be managed effectively?

What polyfills or approaches do you use to handle unsupported CSS features in older browsers?

How do you detect and handle retina/high-density screens with CSS?

CSS in Modern Development Environments(4 questions)

How do you utilize frameworks like Bootstrap, Tailwind, or Material UI?

What are CSS-in-JS solutions (e.g., styled-components, Emotion) and how do they differ from standard CSS?

What is the Shadow DOM in the context of Web Components, and how does it affect CSS scoping?

Can you explain the concept of "CSS Modules" in build tools like Webpack?

Advanced Topics and Custom Properties(4 questions)

What are CSS Custom Properties (variables) and how do they differ from preprocessor variables?

How does the calc() function work and when is it useful?

How do you implement dark mode or theme switching using CSS variables?

What are some advanced properties or features introduced in recent CSS specs?

Problem-Solving and Patterns(4 questions)

How would you handle a complex layout where elements need to overlap or stack at various breakpoints?

What techniques do you use to debug tricky CSS issues or "layout thrashing"?

Have you encountered or solved a significant CSS bug for older browsers (like IE11) or mobile Safari?

What strategies would you use to refactor legacy CSS code in a large project?