CSS Interview Questions

Basic CSS

1. What does CSS stand for?
2. What is the purpose of CSS?
3. How do you link a CSS file to an HTML document?
4. What is the syntax of a CSS rule?
5. What are the different ways to apply CSS to a web page?
6. What is an inline style?
7. What is an internal stylesheet?
8. What is an external stylesheet?
9. How do you apply multiple styles to a single element?
10. What is the difference between a class selector and an ID selector?

Selectors

11. What is a CSS selector?
12. How do you select an element by its ID?
13. How do you select an element by its class?
14. How do you select elements by their type?
15. What is a descendant selector?
16. What is a child selector?
17. What is a sibling selector?
18. How do you select elements with a specific attribute?
19. What is a pseudo-class?
20. What is a pseudo-element?

Box Model

21. What is the CSS box model?
22. What are the components of the box model?
23. How do you set the width and height of an element?
24. What is the difference between margin and padding?
25. How do you center an element horizontally?
26. How do you center an element vertically?
27. How do you create a responsive box?
28. What is the box-sizing property?
29. How do you create a border around an element?
30. How do you create a rounded border?

Layout

31. What is the position property in CSS?
32. What are the different values of the position property?
33. How do you create a fixed header?
34. What is the float property?
35. How do you clear floats in CSS?
36. What is the display property?
37. What are the different values of the display property?
38. How do you create a flexbox layout?
39. What is the flex property?
40. How do you create a grid layout in CSS?

Typography

41. How do you change the font of an element?
42. What is the font-family property?
43. How do you specify a fallback font?
44. How do you change the size of the text?
45. What is the font-size property?
46. How do you make text bold?
47. How do you make text italic?
48. How do you underline text?
49. How do you change the color of the text?
50. How do you align text in CSS?

Colors and Backgrounds

51. How do you set the background color of an element?
52. How do you set a background image?
53. How do you set the size of a background image?
54. How do you repeat a background image?
55. What is the background-position property?
56. How do you create a gradient background?
57. What is the difference between rgb() and rgba()?
58. How do you create a semi-transparent background?
59. How do you create a shadow effect?
60. How do you change the opacity of an element?

Transitions and Animations

61. What is a CSS transition?
62. How do you create a transition effect?
63. What is the transition-duration property?
64. What is the transition-timing-function property?
65. What is the transition-delay property?
66. What is a CSS animation?
67. How do you create a CSS animation?
68. What is the @keyframes rule?
69. What is the animation-duration property?
70. What is the animation-timing-function property?

Flexbox

71. What is Flexbox?
72. What is the main axis in Flexbox?
73. What is the cross axis in Flexbox?
74. What is the justify-content property?
75. What is the align-items property?
76. What is the flex-direction property?
77. What is the flex-wrap property?
78. What is the align-content property?
79. How do you align a single item in a Flexbox container?
80. What is the order property in Flexbox?

Grid Layout

81. What is CSS Grid Layout?
82. How do you create a grid container?
83. How do you define grid columns and rows?
84. What is the grid-template-columns property?
85. What is the grid-template-rows property?
86. How do you create grid areas?
87. What is the grid-gap property?
88. How do you align items in a grid?
89. What is the grid-auto-flow property?
90. How do you create a responsive grid layout?

Responsive Design

91. What is responsive design?
92. How do you create a responsive layout using CSS?
93. What are media queries?
94. How do you write a media query in CSS?
95. What is the @media rule?
96. How do you make images responsive?
97. How do you create a responsive navigation menu?
98. What is the viewport meta tag, and why is it important?
99. How do you use CSS to hide elements on different screen sizes?

Practical Questions

1. Create a simple layout with a header, navigation bar, main content area, and footer using Flexbox.
2. Create a responsive grid layout with three columns that change to a single column on smaller screens.
3. Create a button with a hover effect that changes the background color and adds a shadow.
4. Create a form with styled input fields and a submit button.
5. Create an image gallery with images that open in a modal when clicked.
6. Create a CSS animation that makes an element bounce.
7. Create a navigation menu with dropdown items using only CSS.
8. Create a tooltip that appears when hovering over a text element.
9. Create a progress bar that fills up as a user scrolls down the page.
10. Create a card component with an image, title, and description using CSS Grid.