CSS Interview Questions & Answers – Intermediate Level

1. What is CSS specificity?

Specificity determines which CSS rule is applied when multiple rules target the same element, based on selector types (ID > class > element).

2. How do you calculate specificity?

Specificity is calculated as a score: Inline styles (1000), IDs (100), classes/attributes/pseudo-classes (10), elements/pseudo-elements (1).

#id .class p = 100 + 10 + 1 = 111.

3. What is the !important rule?

It gives a style rule higher priority, overriding others.

p { color: blue !important; }

4. What is the difference between relative, absolute, fixed, and sticky positioning?

• relative: Relative to its normal position.
• absolute: Relative to the nearest positioned ancestor.
• fixed: Relative to the viewport.
• sticky: Switches between relative and fixed based on scroll.

5. What is a pseudo-class?

A pseudo-class targets an element’s state, like :hover, :active, or :first-child.

li:first-child { color: green; }

6. What is a pseudo-element?

A pseudo-element styles a specific part of an element, like ::before or ::after.

p::before { content: "★"; }

7. What is the flexbox layout?

Flexbox is a one-dimensional layout model for aligning and distributing items in a container.

.container { display: flex; justify-content: space-between; }

8. What does justify-content do in Flexbox?

It aligns flex items along the main axis, e.g., flex-start, center, or space-between.

9. What is the align-items property in Flexbox?

It aligns flex items along the cross axis, e.g., center, flex-start, or stretch.

10. What is the flex shorthand property?

It combines flex-grow, flex-shrink, and flex-basis.

.item { flex: 1 1 auto; }

11. What is the CSS Grid layout?

Grid is a two-dimensional layout system for rows and columns.

.container { display: grid; grid-template-columns: 1fr 1fr; }

12. What does grid-template-columns do?

It defines the size and number of columns in a grid.

.grid { grid-template-columns: 100px 200px; }

13. What is the gap property in CSS Grid or Flexbox?

It sets the spacing between grid or flex items.

.grid { display: grid; gap: 10px; }

14. What is the box-sizing property?

It defines how the box model calculates width and height. border-box includes padding and border in the size.

* { box-sizing: border-box; }

15. What is the overflow property?

It controls what happens to content that overflows an element, e.g., hidden, scroll, or auto.

div { overflow: auto; }

16. What is the transition property?

It creates smooth animations for property changes, like color or width.

div { transition: background-color 0.3s; }

17. What is the transform property?

It applies transformations like rotate, scale, or translate.

 div { transform: rotate(45deg); }

18. What is the animation property?

It defines keyframes for animations.

Example:

div {
  animation: slide 2s infinite;
}
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

19. What is the calc() function?

It performs calculations for CSS values.

div { width: calc(100% - 50px); }

20. What is the vh, vw, rem, and em units?

• vh: Viewport height
• vw: Viewport width
• rem: Relative to root font size
• em: Relative to parent font size

21. What is the min-width and max-width property?

They set the minimum and maximum width of an element.

div { min-width: 100px; max-width: 500px; }

22. What is the background-image property?

It sets an image as an element’s background.

div { background-image: url('image.jpg'); }

23. What is the nth-child selector?

It selects elements based on their position among siblings.

li:nth-child(2) { color: red; }

24. What is the opacity vs. rgba difference?

opacity affects an entire element, while rgba sets transparency for specific properties like background-color.

25. What is the cursor property?

It changes the mouse cursor appearance, e.g., pointer, default.

button { cursor: pointer; }

26. What is the outline property?

It draws a line outside the border, often for focus states.

input:focus { outline: 2px solid blue; }

27. What is the display: none vs. visibility: hidden difference?

display: none removes the element from the layout, while visibility: hidden hides it but preserves space.

28. What is the text-shadow property?

It adds a shadow to text.

h1 { text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }

29. What is the list-style property?

It controls the appearance of list markers.

ul { list-style: square; }

30. What is the border-radius property?

It rounds the corners of an element.

div { border-radius: 10px; }