Advanced CSS

Q71 — What are CSS variables (custom properties)? How do you use them?

CSS variables (custom properties) store reusable values in stylesheets.

:root {
  --main-color: #0077ff;
  --padding: 10px;
}
button {
  background: var(--main-color);
  padding: var(--padding);
}

✔ They make styles consistent and easier to maintain.

Q72 — Difference between CSS variables and SASS/LESS variables?

➡ CSS Variables → live in browser, can change at runtime with JavaScript.
➡ SASS/LESS Variables → processed at compile-time, not dynamic.

Q73 — What are CSS preprocessors (SASS, LESS, Stylus)?

They extend CSS with variables, nesting, mixins, and functions. Compiled into normal CSS before deployment.

$primary: #0077ff;
body {
  background: $primary;
}

Q74 — What is CSS specificity and how is it calculated?

Specificity determines which rule takes precedence. Calculated as (inline, id, class, element):

• Inline styles → highest (1000)
• ID selectors → (100)
• Class/pseudo-class/attribute → (10)
• Element/pseudo-element → (1)

Q75 — Relative vs Absolute vs Fixed positioning (z-index context)

▶ Relative → doesn’t create new stacking context.
▶ Absolute → positioned relative to nearest positioned ancestor.
▶ Fixed → positioned relative to viewport (creates new stacking context).

Q76 — What are CSS combinators?

Define relationships between selectors:

• A B → descendant
• A > B → direct child
• A + B → next sibling
• A ~ B → general sibling

Q77 — What are CSS pseudo-classes like :not(), :nth-child(), :nth-of-type()?

They define special states or patterns.

p:not(.highlight) { color: gray; }
li:nth-child(2) { color: red; }
div:nth-of-type(3) { border: 1px solid; }

Q78 — Difference between inline-block, flex, and grid layouts?

➡ inline-block → simple inline boxes with manual spacing.
➡ flex → 1D layout (row or column).
➡ grid → 2D layout (rows + columns).

Q79 — How to center an element in CSS?

/* Using Flexbox */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Using Grid */
.parent {
  display: grid;
  place-items: center;
}

Q80 — What are CSS logical properties?

They replace directional properties (top/left/right/bottom) with flow-relative ones.

margin-inline-start, padding-block-end

Q81 — Difference between inline, block, inline-block, and flex display?

• inline → no width/height control.
• block → takes full width.
• inline-block → inline but can set width.
• flex → flex container.

Q82 — What are CSS shorthand properties? Give examples.

Shorthand combines multiple related properties into one line.

margin: 10px 20px;
background: #0077ff url(img.jpg) no-repeat;

Q83 — What are CSS transitions? List properties that can be animated.

Transitions animate property changes smoothly over time.

div {
  transition: background 0.5s, transform 0.3s;
}

Animatable properties: color, transform, background, opacity, etc.

Q84 — How does min-width, max-width, min-height, max-height work?

They restrict element resizing range — controlling its flexibility in responsive layouts.

Q85 — What is reflow and repaint in CSS performance?

• Reflow: layout recalculation (expensive)
• Repaint: visual update only (cheaper)

Q86 — How to improve CSS performance?

• Use fewer deep selectors
• Minify and combine files
• Use GPU-friendly properties (transform, opacity)
• Limit reflows

Q87 — What is Critical CSS and how do you optimize it?

Critical CSS = essential styles for above-the-fold content. Load inline or early to render pages faster, delay non-critical CSS.

Q88 — Progressive Enhancement vs Graceful Degradation

➡ Progressive Enhancement: Start with basic features, add advanced ones if supported.
➡ Graceful Degradation: Build full experience, ensure it still works in older browsers.

⬅ Home