CSS Interview Questions 11-15 (Transitions, Units, Z-Index, Variables)

Hello! In this module, we move from layout architecture to polish and precision. A great developer understands not just where to put elements, but how to size them consistently, how to animate them smoothly, and how to manage their order on the screen.

We will cover the crucial differences between CSS units (why you should stop using pixels for font sizes), how to handle overlapping elements without fighting the browser, and how to make your code reusable with modern CSS variables. These are the "quality of life" features that make a codebase a joy to work in.

11. Explain CSS transitions.

CSS Transitions allow you to change property values smoothly, over a given duration, rather than having them happen instantly. They are the simplest way to add life to your UI.

To create a transition, you need two things:
1. A property to animate (e.g., background-color).
2. A duration (e.g., 0.3s).

The shorthand syntax is: transition: [property] [duration] [timing-function] [delay];

/* The Element */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  
  /* Define the transition on the base state */
  /* "all" means animate any property that changes */
  transition: background-color 0.3s ease-in-out;
}

/* The Trigger State */
.button:hover {
  background-color: darkblue; /* This change will now be smooth */
  cursor: pointer;
}

Sample Output behavior:
When you hover over the button, the blue color will gradually darken over 0.3 seconds instead of snapping instantly.

12. What is the difference between em, rem, px, and % units?

Choosing the right unit is critical for Responsive Design and Accessibility. Interviewers want to see if you know when to use which.

Pro Tip: Always use rem for font sizes. If a user with poor vision sets their browser's default text size to "Large" (20px),rem respects that. px ignores it, making your site inaccessible.

13. What is z-index in CSS?

z-index controls the vertical stacking order of elements that overlap. Think of the screen as having depth (the Z-axis). Higher values are closer to the user (on top), and lower values are further back (behind).

Crucial Rules:
1. It only works on positioned elements. If an element has position: static (the default), z-index does nothing.
2. Stacking Contexts. A child element generally cannot be "higher" than its parent's siblings if the parent has a lower z-index.

/* This div sits underneath */
.background-box {
  position: absolute; /* Required for z-index */
  z-index: 1;
  background: gray;
}

/* This div sits on top */
.modal-popup {
  position: fixed;    /* Required for z-index */
  z-index: 100;       /* Higher number wins */
  background: white;
}

14. What are CSS variables?

Also known as Custom Properties, these allow you to store values (like colors, fonts, or sizes) in one place and reuse them everywhere. If you change the variable, the entire site updates instantly.

They are declared with double hyphens --name and accessed with var(--name).

Why are they better than Preprocessor (SASS) variables?
CSS Variables exist in the DOM. This means you can change them dynamically using JavaScript (perfect for Dark Mode toggles), which you cannot do with SASS variables.

:root {
  /* Define global variables here */
  --primary-color: #ff4500;
  --main-spacing: 16px;
}

.card {
  /* Use the variable */
  border: 1px solid var(--primary-color);
  padding: var(--main-spacing);
}

/* JavaScript interaction example */
/* document.documentElement.style.setProperty('--primary-color', 'blue'); */

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

Both properties make an element invisible, but they handle the "space" that element occupied differently. This is a classic interview question to test your understanding of the layout engine.

.box-gone {
  display: none; /* Other elements will move up to take its place */
}

.box-ghost {
  visibility: hidden; /* A blank gap will remain in the layout */
}

.box-transparent {
  opacity: 0; /* Similar to visibility: hidden, but can be animated/transitioned */
}