Question 1

What’s the `calc()` function?

Accepted Answer

It lets you do math in CSS—like `width: calc(100% - 20px)`. Super useful for dynamic sizing.

Question 2

What’s the `position: sticky` property?

Accepted Answer

It’s a hybrid of relative and fixed—stays in place until it hits a scrolling threshold, then sticks. Awesome for headers or sidebars.

Question 3

What’s CSS Grid’s `fr` unit?

Accepted Answer

The `fr` unit represents a fraction of available space in a grid. Like `1fr 2fr` splits it 1:2—super flexible!

Question 4

How do you make a sticky footer?

Accepted Answer

Use Flexbox: set the body to `display: flex`, `min-height: 100vh`, and push the footer to the bottom with `margin-top: auto`. Clean and simple.

Question 5

How do you create a CSS-only dropdown?

Accepted Answer

Hide the dropdown with `display: none`, then show it on `:hover` or `:focus`. Simple and lightweight.

Question 6

What’s the `filter` property?

Accepted Answer

It applies effects like blur or grayscale to elements. Think Photoshop in CSS—pretty cool!

Question 7

What are CSS custom properties?

Accepted Answer

Custom properties (e.g., `--color: blue`) are variables you define and reuse with `var()`. They’re great for theming and keeping code DRY.

Question 8

What’s the difference between `inherit` and `initial`?

Accepted Answer

`inherit` takes the parent’s value, while `initial` resets to the property’s default. They’re like ‘copy’ vs. ‘factory reset’.

Question 9

What’s the `object-fit` property?

Accepted Answer

It controls how an image or video fits its container—like `cover` to crop or `contain` to fit fully.

Question 10

What’s the `place-items` shorthand?

Accepted Answer

It sets both `align-items` and `justify-items` in Grid, centering stuff easily—like `place-items: center`.

DeVlt

Medium Interview Questions