Skip to main content

CSS interview questions

Basic Questions:

  1. What is CSS?

    • Explain what CSS (Cascading Style Sheets) is and its purpose in web development.

  2. What is the difference between class and id selectors in CSS?

    • Explain when to use a class selector versus an ID selector and their specificity.

  3. What are the different types of CSS?

    • Inline, internal (within <style> tag), and external (linked through a .css file).

  4. What is the CSS box model?

    • Explain the components (content, padding, border, and margin) of the box model.

  5. Explain the concept of specificity in CSS.

    • How do browser's CSS rules get applied based on specificity (inline styles, IDs, classes, element selectors)?

  1. What is Flexbox, and how is it used?

    • Explain what Flexbox is and provide examples of when to use display: flex, justify-content, align-items, etc.

  2. What is a CSS pseudo-class?

    • Give examples of common pseudo-classes (e.g., :hover, :nth-child, :focus).

  3. Explain the difference between absolute, relative, fixed, and sticky positioning in CSS.

    • When and why to use each positioning method.

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

    • Explain how these properties affect the layout and visibility of elements.

  5. How would you create a CSS Grid layout?

    • Explain the display: grid property and how to define rows and columns using grid-template-columns and grid-template-rows.

Advanced Questions:

  1. What are CSS preprocessors? Have you used any?

    • Describe CSS preprocessors like Sass or LESS and how they extend CSS with variables, nesting, and mixins.

  2. What is the difference between rem and em in CSS?

    • Explain how these units are calculated and their use cases.

  3. What are media queries in CSS?

    • Explain how media queries are used for responsive design and show examples.

  4. Explain the concept of inheritance in CSS.

    • Discuss how properties get inherited by child elements and how to manage inheritance.

  5. What is z-index and how does it work?

    • Explain the stacking context and how z-index affects the layering of elements.

  6. What is the difference between @import and linking a CSS file?

    • Explain performance differences between the two methods.

  7. Explain the concept of reflow and repaint in CSS.

    • Describe what causes reflows and repaints in browsers and how to optimize them.

  8. What are CSS transitions and animations?

    • Explain how to create smooth transitions and keyframe animations.

  9. How do you implement a responsive design in CSS?

    • Discuss strategies for creating responsive designs using media queries, flexbox, grid, and viewport units.

  10. What is the will-change property in CSS, and when would you use it?

    • Explain how the will-change property is used to optimize performance during animations or layout changes.

Practical/Code Challenges:

  • Center a div both vertically and horizontally on a page.
  • Create a 2-column layout with flexbox.
  • How would you make a button change color on hover using CSS?

These questions will help you cover both theoretical knowledge and practical CSS scenarios that could be part of an interview