CSS Interview Questions
Q.
What is CSS?
▾
Q.
What are the different ways to apply CSS?
▾
Q.
What is the difference between Inline, Internal and External CSS?
▾
Q.
What are CSS selectors?
▾
Q.
What is the difference between class and ID selector?
▾
Q.
What is the CSS Box Model?
▾
Q.
What is the difference between margin and padding?
▾
Q.
What is box-sizing?
▾
Q.
What is display property?
▾
Q.
What is the difference between display: none and visibility: hidden?
▾
Q.
What is the difference between block and inline elements?
▾
Q.
What is position in CSS?
▾
Q.
What is the difference between relative and absolute positioning?
▾
Q.
What is z-index?
▾
Q.
What is CSS specificity?
▾
Q.
What is !important?
▾
Q.
What are pseudo-classes?
▾
Q.
What are pseudo-elements?
▾
Q.
What is the difference between pseudo-class and pseudo-element?
▾
Q.
What is inheritance in CSS?
▾
Q.
What is Flexbox?
▾
Q.
What is the difference between justify-content and align-items?
▾
Q.
What is CSS Grid?
▾
Q.
What is the difference between Flexbox and Grid?
▾
Q.
What is flex: 1?
▾
Q.
What is gap?
▾
Q.
What are CSS media queries?
▾
Q.
What is responsive web design?
▾
Q.
What is mobile-first design?
▾
Q.
What are CSS units?
▾
Q.
What is the difference between em and rem?
▾
Q.
What is the difference between %, vw, and vh?
▾
Q.
What is calc() in CSS?
▾
Q.
What is clamp() in CSS?
▾
Q.
What are CSS variables?
▾
Q.
What is the difference between opacity: 0 and display: none?
▾
Q.
What is the difference between visibility: hidden and opacity: 0?
▾
Q.
What is overflow?
▾
Q.
What is the difference between overflow: hidden and overflow: auto?
▾
Q.
What is object-fit?
▾
Q.
Explain CSS Cascade.
▾
Q.
What is a stacking context?
▾
Q.
Why doesn't z-index work sometimes?
▾
Q.
What is a containing block?
▾
Q.
What is position: sticky?
▾
Q.
Why does position: sticky sometimes not work?
▾
Q.
What is CSS transition?
▾
Q.
What is CSS animation?
▾
Q.
What is the difference between transition and animation?
▾
Q.
What is transform in CSS?
▾
Q.
Why is transform: translate() often preferred over changing top or left for animations?
▾
Q.
What are CSS combinators?
▾
Q.
What is the difference between > and space selector?
▾
Q.
What is :nth-child()?
▾
Q.
What is the difference between :nth-child() and :nth-of-type()?
▾
Q.
What are min-width, max-width, and width?
▾
Q.
What is minmax() in CSS Grid?
▾
Q.
What is the difference between auto-fit and auto-fill?
▾
Q.
What is aspect-ratio?
▾
Q.
What is object-position?
▾
Q.
What is reflow and repaint?
▾
Q.
How do you optimize CSS performance?
▾
Q.
What is critical CSS?
▾
Q.
What is CSS containment?
▾
Q.
What are CSS cascade layers?
▾
Q.
What is @supports in CSS?
▾
Q.
What is @media in CSS?
▾
Q.
What is @keyframes?
▾
Q.
What is prefers-reduced-motion?
▾
Q.
How would you build a responsive website from scratch?
▾
Q.
How do you center an element horizontally and vertically?
▾
Q.
How would you create a responsive 3-column card layout?
▾
Q.
How would you prevent horizontal scrolling on a website?
▾
Q.
Why can width: 100% cause overflow?
▾
Q.
What is the difference between width: 100% and width: 100vw?
▾
Q.
Why should we avoid excessive nesting in CSS?
▾
Q.
How do you maintain CSS in a large project?
▾
Q.
What is BEM?
▾
Q.
What is the difference between CSS and SCSS?
▾
Q.
Is SCSS always better than CSS?
▾
Q.
How would you make a website responsive?
▾
Q.
How do you choose CSS breakpoints?
▾
Q.
How do you handle browser compatibility?
▾
Q.
How do you debug a CSS issue?
▾
Q.
Why is z-index not working?
▾
Q.
Why is position: sticky not working?
▾
Q.
Why is an element overflowing its container?
▾
Q.
Why is Flexbox alignment not working?
▾
Q.
Why is Grid not creating the expected columns?
▾
Q.
How do you reduce CSS conflicts in a large application?
▾
Q.
How do you structure CSS for reusable components?
▾
Q.
How do you handle responsive typography?
▾
Q.
How do you optimize CSS for production?
▾
Q.
How do you avoid CSS specificity problems?
▾
Q.
How do you implement dark mode?
▾
Q.
How do you implement a design system using CSS?
▾
Q.
How do you handle different screen sizes without creating too many media queries?
▾
Q.
How do you create accessible focus states?
▾
Q.
How do you optimize CSS animations?
▾