Category: Interview Questions

Controls element stacking order. Higher value = on top.

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

Each element has:

• Content → text/image.
• Padding → inside spacing.
• Border → outer line.
• Margin → space outside element.

Animations use @keyframes.

@keyframes slide {
  from { left: 0; }
  to { left: 100px; }
}
div {
  position: relative;
  animation: slide 2s infinite;
}

Transitions create smooth animations when a property changes.

div {
  transition: all 0.5s;
}
div:hover {
  background: red;
}

Used for responsive design.

@media (max-width: 600px) {
  body { background: lightblue; }
}

Pseudo-elements style specific parts of elements.
Example:

p::first-line { font-weight: bold; }
p::before { content: "👉 "; }

• inline → does not start on a new line (span, a).
• block → always starts on new line (div, p, h1).
• inline-block → behaves inline but allows setting width/height.

• px → fixed size.
• em → relative to parent font size.
• rem → relative to root (html) font size.
• % → relative to parent element’s size.

Pseudo-classes define special states of an element.
Example:

a:hover { color: red; }   /* Mouse hover */
input:focus { border: 2px solid blue; }

• relative → positioned relative to normal flow.
• absolute → positioned relative to its parent container.
• fixed → fixed to viewport (doesn’t move on scroll).
• sticky → behaves like relative, but sticks when scrolling.