ReactJS Interview Prep - CSS Fundamentals (Part 4)

Question 1

Which property dictates how words should break when they reach the end of a line?

Accepted Answer

Correct Answer

Answer

`text-wrap`

Answer

`word-break`

Answer

`hyphens`

Answer

`text-align`

Question 2

What is the primary difference between a CSS `transition` and a CSS `@keyframes` animation?

Accepted Answer

Correct Answer

Answer

Transitions only work on color properties, while animations work on layout properties.

Answer

A transition requires a trigger (like a hover state or JS class toggle) to smoothly change from one state to another, whereas an animation can run automatically and loop through multiple complex states.

Answer

Animations are hardware accelerated, while transitions are strictly software rendered.

Answer

Transitions require JavaScript to function, while animations are pure CSS.

Question 3

Which of the following is NOT a valid timing-function for a CSS transition?

Accepted Answer

Correct Answer

Answer

`ease-in-out`

Answer

`linear`

Answer

`cubic-bezier(0.1, 0.7, 1.0, 0.1)`

Answer

`random()`

Question 4

What does the `transform: translate(x, y);` property do?

Accepted Answer

Correct Answer

Answer

It translates the text language based on the browser locale.

Answer

It moves an element along the X and Y axes without disturbing the layout or flow of surrounding elements.

Answer

It changes the element's CSS `position` from relative to absolute.

Answer

It scales the element's width and height.

Question 5

Why are `transform` and `opacity` the most recommended properties to animate in CSS?

Accepted Answer

Correct Answer

Answer

They are the only properties supported by Internet Explorer.

Answer

Animating them does not trigger browser layout recalculations (reflows) or repaints, allowing the browser to offload the work to the GPU for smooth 60fps performance.

Answer

They are the only properties that can be manipulated by React.

Answer

They automatically pause when the user scrolls.

Question 6

How do you define an animation that loops endlessly?

Accepted Answer

Correct Answer

Answer

`animation-loop: true;`

Answer

`animation-iteration-count: infinite;`

Answer

`transition-duration: infinite;`

Answer

`@keyframes loop {}`

Question 7

What does `animation-fill-mode: forwards;` accomplish?

Accepted Answer

Correct Answer

Answer

It plays the animation in reverse.

Answer

It instructs the element to retain the computed values set by the *last* keyframe after the animation finishes.

Answer

It forces the animation to skip to the end immediately.

Answer

It fills the background of the element with a solid color during the animation.

Question 8

In a `@keyframes` rule, what is the equivalent of `0%` and `100%`?

Accepted Answer

Correct Answer

Answer

`start` and `end`

Answer

`from` and `to`

Answer

`begin` and `finish`

Answer

`alpha` and `omega`

Question 9

What does `transform: scale(0);` do?

Accepted Answer

Correct Answer

Answer

It sets the element's z-index to 0.

Answer

It visually shrinks the element until it completely disappears, though it still occupies space in the DOM flow.

Answer

It removes the element from the DOM entirely.

Answer

It resets all previous transform properties to their default state.

Question 10

Which CSS property allows you to change the point of origin around which an element is rotated or scaled?

Accepted Answer

Correct Answer

Answer

`transform-origin`

Answer

`rotation-point`

Answer

`scale-center`

Answer

`anchor-point`

Question 11

What is the purpose of the `font-display` property when loading web fonts via `@font-face`?

Accepted Answer

Correct Answer

Answer

It controls the size of the font on retina displays.

Answer

It determines how a font face is displayed based on whether and when it is downloaded and ready to use, heavily impacting perceived performance (FOUT vs FOIT).

Answer

It converts standard text into vector graphics.

Answer

It specifies the fallback font family.

Question 12

What is the difference between `text-transform: capitalize;` and `text-transform: uppercase;`?

Accepted Answer

Correct Answer

Answer

`capitalize` makes only the first letter of each word uppercase, while `uppercase` makes every single letter uppercase.

Answer

`uppercase` only works on English characters.

Answer

They are identical in modern browsers.

Answer

`capitalize` is used for styling Drop Caps.

Question 13

How do you truncate a long string of text with an ellipsis (...) using purely CSS?

Accepted Answer

Correct Answer

Answer

`text-truncate: ellipsis;`

Answer

`overflow: hidden; white-space: nowrap; text-overflow: ellipsis;`

Answer

`display: ellipsis;`

Answer

It requires a JavaScript string manipulation function.

Question 14

What does the `line-height` property control?

Accepted Answer

Correct Answer

Answer

The physical height of a border line.

Answer

The amount of space above and below inline text elements, dictating the vertical distance between lines of text.

Answer

The height of an `<hr>` tag.

Answer

The maximum height a block element can grow.

Question 15

Which CSS property adds a shadow specifically to the shape of the text characters, rather than the element's bounding box?

Accepted Answer

Correct Answer

Answer

`box-shadow`

Answer

`text-shadow`

Answer

`font-shadow`

Answer

`drop-shadow`

Question 16

What is the function of the `letter-spacing` property?

Accepted Answer

Correct Answer

Answer

It adjusts the space between individual characters (tracking) in a block of text.

Answer

It adjusts the space between words.

Answer

It defines the margin between paragraphs.

Answer

It controls the kerning of specific character pairs natively.

Question 17

What does `font-weight: 700;` generally correspond to in standard font families?

Accepted Answer

Correct Answer

Answer

Normal / Regular

Answer

Bold

Answer

Light

Answer

Black / Ultra-Bold

Question 18

What does the `perspective` property do in CSS?

Accepted Answer

Correct Answer

Answer

It adds a vignette filter to images.

Answer

It creates a 3D space by defining the distance between the Z=0 plane and the user, giving 3D-transformed child elements a sense of depth.

Answer

It skews an element along the X axis.

Answer

It simulates a drop-shadow without using `box-shadow`.

Question 19

Which `transform` function skews an element along the X and/or Y axis?

Accepted Answer

Correct Answer

Answer

`translate()`

Answer

`scale()`

Answer

`skew()`

Answer

`perspective()`

Question 20

What is the difference between `transition: all 0.3s;` and `transition: opacity 0.3s;`?

Accepted Answer

Correct Answer

Answer

There is no performance difference.

Answer

`all` tells the browser to animate ANY property that changes (which can cause severe performance issues if layout properties change), while `opacity` strictly only animates the opacity property.

Answer

`all` is deprecated and ignored by modern browsers.

Answer

`all` includes DOM structure changes.

Question 21

What is the `will-change` property used for?

Accepted Answer

Correct Answer

Answer

To force an element to change color on hover.

Answer

To provide a hint to the browser that an element is *going* to be animated or changed, allowing the browser to set up optimizations (like GPU layers) ahead of time.

Answer

To define the fallback state for a CSS variable.

Answer

To bypass the CSS cascade.

Question 22

How do you pause a running CSS animation?

Accepted Answer

Correct Answer

Answer

`animation: pause;`

Answer

`animation-play-state: paused;`

Answer

`transition: none;`

Answer

You must remove the class via JavaScript.

Question 23

What is the purpose of `backface-visibility: hidden;`?

Accepted Answer

Correct Answer

Answer

It hides the background image of an element.

Answer

When an element is rotated in 3D space (e.g., `rotateY(180deg)`), this property hides the back side of the element so you don't see a mirror image of the front.

Answer

It hides the element if it moves outside the viewport.

Answer

It prevents text from being highlighted.

Question 24

Which CSS feature allows you to snap scrolling content to specific points, creating a native 'carousel' or 'slider' experience without JavaScript?

Accepted Answer

Correct Answer

Answer

`scroll-snap-type` and `scroll-snap-align`

Answer

`overflow: carousel;`

Answer

`transform: translate-scroll;`

Answer

`slider-snap: true;`

Question 25

What does the `font-variant-numeric: tabular-nums;` property achieve?

Accepted Answer

Correct Answer

Answer

It turns numbers into Roman numerals.

Answer

It forces all numbers (like prices or timers) to have an equal width, ensuring they align perfectly in columns or don't cause layout 'jitter' when changing in a stopwatch.

Answer

It scales numbers to be larger than standard text.

Answer

It creates superscript numbers for footnotes.

Academy

ReactJS Interview Prep - CSS Fundamentals (Part 4)