Top 50 CSS Interview Questions and Answers 2026

1. What is CSS?

CSS (Cascading Style Sheets) is used to style and layout web pages, such as changing colors, fonts, spacing, and positioning.

2. What are the different types of CSS?

• Inline CSS
• Internal CSS
• External CSS

3. What is the CSS box model?

The box model consists of content, padding, border, and margin, which defines the layout of elements.

4. Difference between class and id selector?

• Class: Can be used multiple times (.)
• ID: Unique, used once (#)

5. What is specificity in CSS?

Specificity determines which CSS rule is applied when multiple rules target the same element.

6. What is !important in CSS?

It forces a style to override all other CSS rules.

7. What is Flexbox?

Flexbox is a layout module for designing flexible and responsive layouts in one dimension (row or column).

8. What is CSS Grid?

CSS Grid is a two-dimensional layout system for creating complex web layouts using rows and columns.

9. Difference between Flexbox and Grid?

Flexbox is one-dimensional, while Grid is two-dimensional.

10. What are pseudo-classes?

They define a special state of an element (e.g., :hover, :focus).

11. What are pseudo-elements?

They style specific parts of elements (e.g., ::before, ::after).

12. What is responsive design?

Responsive design ensures a website works on all screen sizes using media queries.

13. What are media queries?

They apply CSS based on screen size, resolution, or device type.

14. What is z-index?

It controls the vertical stacking order of positioned elements.

15. Difference between display: none and visibility: hidden?

• display: none removes the element
• visibility: hidden hides it but keeps space

16. What is position property?

Defines how an element is positioned (static, relative, absolute, fixed, sticky).

17. What is overflow?

Controls content overflow (hidden, scroll, auto).

18. What is float?

Used to align elements left or right (now mostly replaced by Flexbox).

19. What is clear?

Specifies which sides of floating elements are not allowed.

20. What is opacity?

Controls transparency (0 to 1).

21. What are CSS variables?

Reusable values declared using --variable-name.

22. What is calc() in CSS?

Used to perform calculations inside CSS.

23. What is object-fit?

Controls how images or videos fit inside containers.

24. What is rem vs em?

• rem: Relative to root font size
• em: Relative to parent font size

25. What is vh and vw?

Viewport height and width units.

26. What is shorthand property?

Combines multiple CSS properties into one line.

27. What is transition?

Adds smooth animation effects between property changes.

28. What is transform?

Used to rotate, scale, skew, or translate elements.

29. What is animation?

Allows complex keyframe-based animations.

30. What is @keyframes?

Defines animation steps.

31. What is display: inline-block?

Combines features of inline and block elements.

32. What is white-space?

Controls text wrapping and spacing.

33. What is line-height?

Controls vertical spacing between text lines.

34. What is border-radius?

Creates rounded corners.

35. What is box-shadow?

Adds shadow effects to elements.

36. What is text-shadow?

Adds shadow to text.

37. What is cursor property?

Changes mouse pointer style.

38. What is clip-path?

Creates custom shapes for elements.

39. What is aspect-ratio?

Maintains width-to-height ratio.

40. What is backdrop-filter?

Applies blur or effects behind an element.

41. What is inherit value?

Inherits property value from parent.

42. What is initial value?

Resets property to default value.

43. What is unset?

Resets or inherits based on context.

44. What is content property?

Used with pseudo-elements to insert content.

45. What is min-width and max-width?

Controls responsive sizing limits.

46. What is @import?

Imports one CSS file into another.

47. What is CSS preprocessor?

Tools like Sass or Less that extend CSS functionality.

48. What is BEM methodology?

Naming convention for scalable CSS.

49. How to center a div in CSS?

Using Flexbox: display:flex; justify-content:center; align-items:center;

50. Why is CSS important in 2026?

CSS enables responsive, fast, accessible, and visually rich web design across devices.

Categories: web designing web development css front end developer