CSS Interview Questions & Answers

Top questions asked in interviews for freshers & experienced developers

1. What is CSS?
CSS stands for Cascading Style Sheets. It is used to style and layout web pages.
2. What are the types of CSS?
Inline CSS, Internal CSS, and External CSS.
3. What is the CSS box model?
It consists of content, padding, border, and margin.
4. What is the difference between class and id?
Class can be used multiple times, while id is unique.
5. What is specificity in CSS?
It determines which CSS rule is applied when multiple rules target the same element.
6. What is !important?
It overrides all other CSS rules for a property.
7. What is display property?
It specifies how an element is displayed, such as block, inline, or flex.
8. Difference between display:none and visibility:hidden?
display:none removes the element from layout, visibility:hidden hides it but keeps space.
9. What is position property?
It defines how an element is positioned: static, relative, absolute, fixed, or sticky.
10. What is z-index?
It controls the vertical stacking order of positioned elements.
11. What is Flexbox?
A one-dimensional layout system for aligning items in rows or columns.
12. What is CSS Grid?
A two-dimensional layout system for rows and columns.
13. Difference between flex and grid?
Flexbox is one-dimensional, Grid is two-dimensional.
14. What is overflow property?
It controls content overflow: hidden, scroll, auto, or visible.
15. What is float?
Float positions an element to the left or right of its container.
16. What is clear?
Clear specifies which sides of floating elements are not allowed to float.
17. What is opacity?
It controls the transparency of an element.
18. What are pseudo-classes?
They define a special state of an element like :hover or :focus.
19. What are pseudo-elements?
They style specific parts of elements like ::before or ::after.
20. What is responsive design?
It makes web pages adapt to different screen sizes.
21. What are media queries?
They apply CSS based on screen size or device conditions.
22. What is rem unit?
rem is relative to the root element font size.
23. Difference between em and rem?
em depends on parent font size, rem depends on root font size.
24. What is vh and vw?
They are viewport height and viewport width units.
25. What is background-size?
It controls the size of background images.
26. What is border-radius?
It rounds the corners of elements.
27. What is box-shadow?
It adds shadow effects around elements.
28. What is transition?
It allows smooth change between CSS property values.
29. What is transform?
It applies transformations like rotate, scale, or translate.
30. What is animation?
It allows creating complex motion effects using keyframes.
31. What is keyframes?
Keyframes define animation steps in CSS.
32. What is object-fit?
It controls how images or videos fit within containers.
33. What is cursor property?
It changes the mouse pointer appearance.
34. What is visibility property?
It shows or hides elements without removing layout space.
35. What is max-width?
It limits the maximum width of an element.
36. What is min-height?
It sets the minimum height of an element.
37. What is line-height?
It controls the vertical spacing between lines of text.
38. What is text-align?
It aligns text horizontally inside an element.
39. What is white-space?
It controls how whitespace is handled inside elements.
40. What is word-wrap?
It allows long words to break and wrap to the next line.
41. What is overflow-x?
It controls horizontal overflow behavior.
42. What is overflow-y?
It controls vertical overflow behavior.
43. What is calc()?
It performs calculations for CSS property values.
44. What is aspect-ratio?
It defines the width-to-height ratio of an element.
45. What is user-select?
It controls whether text can be selected by users.
46. What is pointer-events?
It controls how elements respond to mouse events.
47. What is inherit value?
It makes a property inherit value from its parent.
48. What is initial value?
It resets a property to its default value.
49. What is unset?
It removes a property value depending on inheritance.
50. What is filter property?
It applies visual effects like blur or brightness.
51. What is backdrop-filter?
It applies effects to background behind an element.
52. What is clamp()?
It sets a value within a defined range.
53. What is scrollbar styling?
It customizes the appearance of scrollbars.
54. What is accent-color?
It styles form controls like checkboxes and radio buttons.
55. What is isolation?
It controls stacking context creation.
56. What is will-change?
It hints the browser about upcoming changes for optimization.
57. What is scroll-behavior?
It controls smooth or instant scrolling behavior.
58. What is gap property?
It sets spacing between flex or grid items.
59. What is contain property?
It improves performance by isolating layout and paint.
60. What is prefers-color-scheme?
It detects user’s light or dark mode preference.