Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
CSS · Question Set
CSS Variables, Functions & Modern Features interview questions for placements and exams.
Questions
14
Included in this set
Subject
CSS
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for CSS.
Logical properties adapt layouts for left-to-right and right-to-left languages. `margin-inline-start` adjusts automatically with writing direction.
div { margin-inline-start: 20px; }For complete preparation, combine this set with full subject-wise practice for CSS. You can also explore other subjects and sets from the links below.
Declaring variables inside `:root` makes them global, similar to defining them at the document level. Variables declared in other selectors are local to that scope.
:root { --font-size: 16px; }`calc()` lets you combine different units dynamically (%, px, rem) — for example: `width: calc(100% - 50px);`. Useful for fluid layouts and spacing adjustments.
section { width: calc(100% - 40px); }`clamp(min, preferred, max)` allows fluid, responsive values while preventing them from exceeding given limits — ideal for responsive font sizes.
h1 { font-size: clamp(1rem, 4vw, 2rem); }The `rgba()` function defines colors with alpha transparency. Example: `rgba(255, 0, 0, 0.5)` creates a semi-transparent red background.
div { background-color: rgba(0, 0, 255, 0.2); }The `filter` property applies graphical effects like blur, brightness, contrast, or grayscale directly in CSS without modifying the source image.
img { filter: grayscale(100%); }The `mix-blend-mode` property determines how element colors blend with background content, allowing creative effects like multiply, overlay, and screen.
img { mix-blend-mode: multiply; }CSS variables store reusable values, making design updates easier. For example, changing `--primary-color` in one place updates it across the project. They also enable light/dark themes dynamically via JavaScript or user preferences.
:root { --primary-color: #2196f3; } body { color: var(--primary-color); }You can provide fallback values inside `var()`. For example, `color: var(--text-color, black);` ensures `black` is used if the variable isn’t set — preventing rendering issues.
p { color: var(--accent, #000); }Yes, filters like blur or brightness are GPU-intensive. Overusing them can slow rendering, especially on low-end devices. Use them sparingly and prefer optimized images when possible.
img:hover { filter: brightness(1.2); }Interviewers look for fluency in CSS variables, grid/flexbox, clamp(), prefers-color-scheme for dark mode, container queries, and logical properties. These show you stay updated and write scalable, maintainable CSS.
@media (prefers-color-scheme: dark) { body { background: #121212; } }CSS variables are defined with `--name` inside a selector (commonly `:root`) and accessed using `var(--name)`. They allow consistent theming and easier maintenance.
:root { --main-color: #007bff; } h1 { color: var(--main-color); }Use `calc()` for dynamic arithmetic layouts, `min()` or `max()` for responsive limits. For instance, `width: min(90vw, 1200px)` restricts width to 1200px maximum while remaining fluid below that.
main { width: min(90vw, 1200px); }`clamp(min, preferred, max)` defines a range that scales with screen size but never goes below or above set limits. This creates fluid, balanced text across devices.
h1 { font-size: clamp(1.2rem, 5vw, 2.5rem); }