50 CSS Interview Questions and Answers
1. What does CSS stand for?
CSS stands for Cascading Style Sheets. It’s used to style and layout web pages.
2. What is the difference between inline, internal, and external CSS?
Inline CSS applies styles directly to elements, internal CSS is within a <style> tag in HTML, and external CSS uses a separate .css file.
3. What are CSS selectors?
Selectors are patterns used to select and style elements on a web page.
4. What is the use of the z-index property?
z-index controls the stacking order of elements that overlap.
5. What are pseudo-classes in CSS?
Pseudo-classes define a special state of an element, like :hover or :focus.
6. What are pseudo-elements?
Pseudo-elements style specific parts of an element, like ::before or ::after.
7. What is the difference between relative and absolute positioning?
Relative positions an element relative to its normal flow, while absolute positions it relative to its nearest positioned ancestor.
8. What does the float property do?
Float positions elements to the left or right of their container, allowing text or inline elements to wrap around them.
9. How do you center a div horizontally?
Use margin: 0 auto; with a defined width.
10. What is the difference between em and rem units?
em is relative to the parent element’s font size, while rem is relative to the root (html) font size.
11. What is the difference between visibility:hidden and display:none?
visibility:hidden hides an element but keeps its space; display:none removes it completely from layout.
12. What is the box model in CSS?
The box model includes content, padding, border, and margin areas of an element.
13. How can you apply CSS to a specific element ID?
Use the hash (#) symbol followed by the ID, e.g., #header {color: red;}.
14. What is flexbox in CSS?
Flexbox is a layout model that allows responsive alignment and distribution of items in a container.
15. What is the difference between align-items and justify-content?
align-items aligns elements vertically; justify-content aligns them horizontally in a flex container.
16. What is the purpose of media queries?
Media queries make web pages responsive by applying styles based on screen size or device type.
17. What is the difference between min-width and max-width?
min-width sets the smallest width before styles apply; max-width sets the largest.
18. What is the difference between position:fixed and position:sticky?
Fixed stays relative to the viewport; sticky toggles between relative and fixed based on scroll.
19. How do you make rounded corners in CSS?
Use the border-radius property.
20. What is the use of the transition property?
It adds smooth animation effects when CSS properties change.
21. What are CSS variables?
CSS variables store reusable values defined using --variable-name syntax.
22. How do you make an element responsive?
Use relative units (%, em, rem) and media queries to adjust layout for different screen sizes.
23. What is grid layout in CSS?
CSS Grid provides a two-dimensional layout system for rows and columns.
24. What does the clear property do?
It prevents elements from wrapping around floated elements.
25. What is the difference between inline and block elements?
Inline elements don’t start on a new line; block elements take full width and start on a new line.
26. What is specificity in CSS?
Specificity determines which CSS rule is applied when multiple rules target the same element.
27. What does !important do in CSS?
It overrides all other declarations for that property.
28. How can you include a custom font in CSS?
Use @font-face to define and load custom fonts.
29. What is a CSS sprite?
A sprite combines multiple images into one file to reduce HTTP requests.
30. What is object-fit?
It defines how an image or video should fit its container (cover, contain, etc.).
31. What is the default position value of an element?
By default, elements are positioned as position: static;.
32. What is the difference between opacity and RGBA transparency?
Opacity affects the whole element; RGBA affects only the color transparency.
33. How do you apply multiple classes to a single element?
Separate class names with spaces, e.g., <div class="btn primary">.
34. What is the difference between inline and inline-block?
Inline-block allows width/height adjustments while staying inline.
35. How do you hide an element but keep it accessible to screen readers?
Use visibility:hidden with position:absolute; clip:rect(0,0,0,0);.
36. What is the default display property of a div?
display: block;.
37. What is a viewport?
The visible area of a web page in a browser window.
38. What is the purpose of calc() in CSS?
It performs mathematical calculations within CSS values.
39. What is a shorthand property?
A shorthand combines multiple related CSS properties into one, e.g., margin: 10px 5px;.
40. What is the default value of flex-direction?
The default is row.
41. What is the difference between nth-child() and nth-of-type()?
nth-child targets based on child index; nth-of-type targets based on element type.
42. What are keyframes in CSS animations?
Keyframes define the stages of an animation using @keyframes.
43. How do you reset CSS styles?
Use a CSS reset stylesheet to remove browser default styling.
44. What is clipping in CSS?
It hides parts of an element using properties like clip-path.
45. What is the difference between transform and transition?
Transform changes an element’s shape or position; transition animates property changes over time.
46. What are gradients in CSS?
Gradients are smooth transitions between two or more colors created using linear-gradient() or radial-gradient().
47. What is the use of overflow property?
It controls content that exceeds an element’s box (visible, hidden, scroll, auto).
48. What is the difference between absolute units and relative units?
Absolute units are fixed (px, cm); relative units depend on another value (%, em, rem).
49. What is the default display value for a span?
display: inline;.
50. What are vendor prefixes in CSS?
Vendor prefixes are browser-specific additions like -webkit-, -moz-, or -ms- used for experimental properties.