ReactJS Interview Prep - CSS Fundamentals (Part 1)

Question 1

Which of the following properties is NOT a core component of the CSS Box Model?

Accepted Answer

Correct Answer

Answer

Padding

Answer

Margin

Answer

Outline

Answer

Border

Question 2

What is the default `position` value for all HTML elements?

Accepted Answer

Correct Answer

Answer

`relative`

Answer

`absolute`

Answer

`static`

Answer

`fixed`

Question 3

What does the `box-sizing: border-box;` property achieve?

Accepted Answer

Correct Answer

Answer

It forces the element to act as a strict block-level container.

Answer

It includes the element's padding and border within its specified width and height, preventing the element from growing larger than intended.

Answer

It automatically calculates margins to center the element horizontally.

Answer

It applies a 1px solid black border around the element by default.

Question 4

In CSS Specificity, which of the following selectors has the highest weight?

Accepted Answer

Correct Answer

Answer

10 class selectors (e.g., `.a.b.c...`)

Answer

An ID selector (e.g., `#header`)

Answer

An inline style (e.g., `style="color: red;"`)

Answer

A pseudo-class selector (e.g., `:hover`)

Question 5

What is the primary danger of using `!important` in CSS?

Accepted Answer

Correct Answer

Answer

It causes the browser to download the CSS file synchronously, blocking the main thread.

Answer

It completely breaks the natural cascade and specificity rules, making future CSS overrides extremely difficult and leading to unmaintainable stylesheets.

Answer

It only works in WebKit browsers (Chrome, Safari).

Answer

It triggers hardware acceleration, which can drain battery on mobile devices.

Question 6

What does the `>` combinator (e.g., `div > p`) select?

Accepted Answer

Correct Answer

Answer

All `

` elements that are descendants (children, grandchildren, etc.) of a `

`.

Answer

All `

` elements that are direct children of a `

`.

Answer

The first `

` element that appears after a `

` on the same level.

Answer

All `

` elements that share the same parent as a `

`.

Question 7

What does the `~` combinator (e.g., `h1 ~ p`) select?

Accepted Answer

Correct Answer

Answer

All `

` elements that are siblings of the `

` and appear anywhere after it in the HTML.

Answer

Only the very first `

` sibling that appears immediately after the `

`.

Answer

All `

` elements that are descendants of the `

`.

Answer

All `

` elements that are adjacent siblings to *any* heading.

Question 8

Which CSS property is used to control the stacking order of overlapping elements?

Accepted Answer

Correct Answer

Answer

`stack-order`

Answer

`z-index`

Answer

`layer`

Answer

`position-depth`

Question 9

What is a Stacking Context in CSS?

Accepted Answer

Correct Answer

Answer

A JavaScript API for manipulating the DOM array.

Answer

A three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, where child elements are bound by the `z-index` limitations of their parent container.

Answer

A CSS Grid property that forces elements to stack vertically on mobile screens.

Answer

A deprecated HTML5 feature for handling overlapping iframes.

Question 10

What is 'Margin Collapse' in CSS?

Accepted Answer

Correct Answer

Answer

When an element's margin is forcibly set to 0 by the browser to prevent overflow.

Answer

When the top and bottom margins of adjoining block-level elements combine (collapse) into a single margin whose size is the largest of the individual margins.

Answer

When left and right margins overlap, causing text to wrap incorrectly.

Answer

When CSS flexbox ignores margin declarations.

Question 11

Which of the following is true regarding `display: inline` elements?

Accepted Answer

Correct Answer

Answer

You can explicitly set their `width` and `height`.

Answer

They force a line break before and after the element.

Answer

They respect horizontal margins and padding, but vertical margins and padding do not push other elements away.

Answer

They automatically clear floating elements.

Question 12

What is the difference between `display: none` and `visibility: hidden`?

Accepted Answer

Correct Answer

Answer

`visibility: hidden` removes the element from the DOM entirely, while `display: none` just hides it visually.

Answer

`display: none` removes the element from the normal document flow (taking up no space), whereas `visibility: hidden` leaves the element in the flow, taking up its normal space but rendering invisibly.

Answer

They are identical; one is just older syntax.

Answer

`display: none` can be animated using CSS transitions, while `visibility: hidden` cannot.

Question 13

What does the `position: absolute;` rule do?

Accepted Answer

Correct Answer

Answer

It positions the element exactly relative to the browser viewport, remaining fixed during scrolling.

Answer

It removes the element from the normal document flow and positions it relative to its closest positioned ancestor (an ancestor with a position other than `static`).

Answer

It positions the element relative to its normal (default) position in the DOM flow.

Answer

It forces the element to stick to the top of the screen when scrolled past.

Question 14

How does `position: sticky;` behave?

Accepted Answer

Correct Answer

Answer

It acts like `relative` until it crosses a specified threshold (like `top: 0`) during scrolling, at which point it acts like `fixed` and 'sticks' to the screen.

Answer

It permanently glues the element to the bottom of its parent container.

Answer

It prevents the element from being dragged or highlighted by the user.

Answer

It forces the element to follow the user's mouse cursor.

Question 15

Which unit of measurement is relative to the font-size of the root `<html>` element?

Accepted Answer

Correct Answer

Answer

`em`

Answer

`rem`

Answer

`vh`

Answer

`px`

Question 16

What is the primary difference between the `em` and `rem` units?

Accepted Answer

Correct Answer

Answer

`em` is for margins, while `rem` is strictly for typography.

Answer

`em` is relative to the font-size of its direct parent element (which can compound recursively), while `rem` is always strictly relative to the root `<html>` font-size.

Answer

`rem` is supported in older browsers, while `em` requires CSS3.

Answer

There is no difference; `rem` is just a shorthand alias for `em`.

Question 17

What does the CSS unit `vh` represent?

Accepted Answer

Correct Answer

Answer

Visual Height: The height of the largest image on the page.

Answer

Vertical Heading: The default margin applied to `<h1>` elements.

Answer

Viewport Height: 1vh is equal to 1% of the total height of the browser's visible viewport.

Answer

Vector Height: The height scale for inline SVG elements.

Question 18

What is the `:root` pseudo-class typically used for in modern CSS?

Accepted Answer

Correct Answer

Answer

To select the `<body>` element.

Answer

To declare global CSS Custom Properties (CSS Variables) so they can be accessed anywhere in the document.

Answer

To target elements only when the user is logged in as an administrator.

Answer

To override the `!important` rule.

Question 19

How do you define and use a CSS Custom Property (CSS Variable)?

Accepted Answer

Correct Answer

Answer

Define: `$main-color: red;` | Use: `color: $main-color;`

Answer

Define: `@main-color: red;` | Use: `color: @main-color;`

Answer

Define: `--main-color: red;` | Use: `color: var(--main-color);`

Answer

Define: `var main-color = red;` | Use: `color: {main-color};`

Question 20

What does the `:nth-child()` pseudo-class do?

Accepted Answer

Correct Answer

Answer

It selects elements based on their class name sequence.

Answer

It selects elements based on their position among a group of siblings (e.g., `:nth-child(2)` selects the second child).

Answer

It counts the number of children an element has and applies styles if it matches.

Answer

It targets elements that have no children.

Question 21

What is the difference between `:nth-child()` and `:nth-of-type()`?

Accepted Answer

Correct Answer

Answer

They are identical in modern browsers.

Answer

`:nth-child()` counts *all* siblings regardless of element type, while `:nth-of-type()` only counts siblings that match the specific HTML tag being selected.

Answer

`:nth-child()` starts counting from 0, while `:nth-of-type()` starts from 1.

Answer

`:nth-of-type()` can only be used on form input elements.

Question 22

Which pseudo-element is used to insert content before the actual content of an element?

Accepted Answer

Correct Answer

Answer

`::start`

Answer

`::prepend`

Answer

`::before`

Answer

`::first-child`

Question 23

What does the `box-shadow` property do?

Accepted Answer

Correct Answer

Answer

It darkens the background color of an element upon hover.

Answer

It applies one or more drop shadows to the element's frame.

Answer

It creates a 3D isometric projection of the element.

Answer

It obscures the text inside the element for security reasons.

Question 24

How do you create a perfect circle using CSS border-radius (assuming a square element)?

Accepted Answer

Correct Answer

Answer

`border-radius: circle;`

Answer

`border-radius: 50%;`

Answer

`border-radius: 100px;` (regardless of size)

Answer

`border-radius: round;`

Question 25

What is the purpose of the `calc()` function in CSS?

Accepted Answer

Correct Answer

Answer

To compile SASS/LESS code into native CSS.

Answer

To perform mathematical calculations (addition, subtraction, multiplication, division) dynamically to determine CSS property values.

Answer

To calculate the total rendering time of the page.

Answer

To count the number of elements matching a specific selector.

Academy

ReactJS Interview Prep - CSS Fundamentals (Part 1)