CSS interview questions and answers

1. What is CSS?

Answer:
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a web page, including colors, layouts, and fonts. It allows developers to separate content (HTML) from design.

2. What are the different types of CSS?

Answer:
There are three types of CSS:

1. Inline CSS – Applied directly within an HTML element using the style attribute.
2. Internal CSS – Defined inside a <style> tag within an HTML document.
3. External CSS – Stored in a separate .css file and linked using <link>.

3. What is the difference between relative, absolute, fixed, and sticky positioning in CSS?

Answer:

• Relative – The element is positioned relative to its normal position.
• Absolute – The element is removed from the normal document flow and positioned relative to the nearest positioned (relative, absolute, or fixed) ancestor.
• Fixed – The element is positioned relative to the viewport and does not move when the page scrolls.
• Sticky – The element toggles between relative and fixed depending on the scroll position.

4. What is the difference between em, rem, px, and % in CSS?

Answer:

• px (Pixels): Absolute unit, remains constant.
• em: Relative to the font size of its parent.
• rem: Relative to the root (html) font size.
• % (Percentage): Relative to the parent element.

5. What are pseudo-classes and pseudo-elements in CSS?

Answer:

• Pseudo-classes define a special state of an element (e.g., :hover, :focus, :nth-child(n)).
• Pseudo-elements style specific parts of an element (e.g., ::before, ::after, ::first-letter).

Example:

css

button:hover {
  background-color: blue;
}

p::first-letter {
  font-size: 2em;
}

6. What is the difference between grid and flexbox?

Answer:

• Flexbox – One-dimensional layout (row or column).
• Grid – Two-dimensional layout (both rows and columns).

Use Flexbox to arrange elements in a row/column and Grid to create complex layouts.

7. What is the z-index in CSS?

Answer:
z-index defines the stacking order of elements. Higher values bring elements to the front. It only works on positioned elements (relative, absolute, fixed).

Example:

css

div {
  position: absolute;
  z-index: 10;
}

8. What is the difference between visibility: hidden; and display: none;?

Answer:

• visibility: hidden; hides the element but keeps its space in the layout.
• display: none; eradicates the element from the layout.

Example:

css

.hidden {
  visibility: hidden;
}

.none {
  display: none;
}

9. What are media queries in CSS?

Answer:
Media queries allow responsive designs by applying styles based on device size.

Example:

css

@media (max-width: 768px) {
  body {
    background-color: lightgray;
  }
}

10. What is the difference between nth-child() and nth-of-type()?

Answer:

• nth-child(n) selects the nth child regardless of type.
• nth-of-type(n) selects the nth child of a specific type.

Example:

css

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

p:nth-of-type(2) {
  color: blue;
}

11. What is a CSS variable?

Answer:
CSS variables store values that can be reused.

Example:

css

:root {
  --primary-color: blue;
}

h1 {
  color: var(--primary-color);
}

12. What is the difference between max-width and min-width?

Answer:

• max-width: Sets the maximum width an element can have.
• min-width: Sets the minimum width an element must have.

Example:

css

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

13. What is the difference between position: absolute; and position: fixed;?

Answer:

• absolute: Positions relative to the nearest positioned ancestor.
• fixed: Positions relative to the viewport and do not move on scroll.

Example:

css

.absolute {
  position: absolute;
  top: 50px;
  left: 50px;
}

.fixed {
  position: fixed;
  top: 10px;
  left: 10px;
}

14. What is the difference between opacity and rgba()?

Answer:

• opacity applies transparency to the entire element, including children.
• rgba() applies transparency only to the element’s background.

Example:

css

div {
  opacity: 0.5; /* Makes the entire div transparent */
}

div {
  background-color: rgba(255, 0, 0, 0.5); /* Transparent background only */
}

15. What is the difference between inline, block, and inline-block elements?

Answer:

• Inline: Occupies space as per content, does not allow height/width (<span>, <a>).
• Block: Takes full width, allows height/width (<div>, <p>).
• Inline-block: Behaves like an inline element but supports width/height.

Example:

css

span {
  display: inline;
}

div {
  display: block;
}

button {
  display: inline-block;
}

16. How do you center a div using CSS?

Answer:
Using Flexbox:

css

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Using Grid:

css

.container {
  display: grid;
  place-items: center;
  height: 100vh;
}

17. How to create a responsive image in CSS?

Answer:

css

img {
  max-width: 100%;
  height: auto;
}

This ensures the image scales while maintaining its aspect ratio.

18. What is the difference between absolute and relative units?

Answer:

• Absolute units: Do not depend on other elements (px, cm).
• Relative units: Depend on parent or root elements (em, rem, %, vw, vh).

19. What is the difference between clip-path and mask?

Answer:

• clip-path defines a clipping region where only part of an element is visible.
• mask applies transparency or gradient effects.

Example:

css
.clip {
  clip-path: circle(50%);
}

.mask {
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

20. How do you create an animation using CSS?

Answer:

css
@keyframes example {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

div {
  animation: example 2s infinite alternate;
}

This moves the div 100px back and forth.