Question 1

How do you create a CSS triangle?

Accepted Answer

Use borders! Set an element’s width and height to 0, then tweak border sizes and colors. It’s a clever trick.

Question 2

What’s the `clip-path` property?

Accepted Answer

It clips an element to a shape—like a circle or polygon. Great for creative designs.

Question 3

How do you hide an element visually but keep it for screen readers?

Accepted Answer

Use a class with `position: absolute`, `width: 1px`, and `clip` to tuck it off-screen. Keeps it accessible but invisible.

Question 4

What’s the `:focus-within` pseudo-class?

Accepted Answer

It styles an element when it or its descendants gain focus. Perfect for form UX.

Question 5

What’s the `grid-template-areas` property?

Accepted Answer

It names grid areas for a visual layout—like a blueprint. Makes complex designs readable.

Question 6

What’s the `writing-mode` property?

Accepted Answer

It changes text direction—like `vertical-rl` for vertical writing. Useful for multilingual layouts.

Question 7

What’s the `backdrop-filter` property?

Accepted Answer

It applies effects like blur to the area behind an element—think frosted glass. Fancy and modern.

Question 8

What’s the `counter` feature in CSS?

Accepted Answer

It tracks and displays numbers—like for ordered lists or custom numbering. Paired with `content`.

Question 9

What’s CSS-in-JS?

Accepted Answer

It’s a pattern where CSS is written in JavaScript files (like in React with styled-components), scoping styles to components. More dynamic but controversial.

Question 10

What’s the `@supports` rule?

Accepted Answer

It checks if a browser supports a CSS feature, applying styles only if it does. Great for progressive enhancement.

DeVlt

Hard Interview Questions

Why Practice Hard Questions?

Browse Hard Questions by Category

Hard Interview Preparation Tips

Study Strategy

Interview Day

DeVlt