CSS3 Scenario-Based MCQ

Scenario-based multiple choice questions covering core CSS3 topics.


Table of Contents


# 1. Introduction


Q. While working on a webpage for yous scheduler app, you want to print a list. However, you want to avoid the hassle of writing so many properties separately, so you decide to use the shorthand property, Choose the correct option in this regard.

Answer: A)

The CSS list-style shorthand order is list-style-type list-style-position list-style-image. Option A uses the correct order and correctly describes list-style-position as controlling whether the marker appears inside or outside the content flow. Option B has the wrong order (image before position). Option C also has the wrong order and incorrectly describes list-style-position as placing the marker at top/bottom/left/right — those are not valid list-style-position values (inside and outside are).

↥ back to top

Q. Alex has defined a CSS rule in an external stylesheet but wants to override it with a more specific rule defined directly in the HTML file. Which option should he use to ensure the rule takes precedence?

Answer: A) Inline style

An inline style (style="..." attribute on the HTML element) is written directly in the HTML file and carries a specificity of 1-0-0-0, which overrides any rule from an external or internal stylesheet targeting the same property. An internal stylesheet (<style> in <head>) can also override an external one if the selector is more specific, but an inline style is the most direct way to guarantee precedence from within the HTML file itself.

↥ back to top

Q. On a webpage, you want to use borders and explore various border styles. Which option is not a border style you can use?

Answer: D) Single

single is not a valid CSS border-style value. Valid border styles include none, hidden, dotted, dashed, solid, double, groove, ridge, inset, and outset.

↥ back to top

Q. A developer writes the following rule. Which CSS version introduced the border-radius property?

div {
  border-radius: 8px;
}

Answer: C) CSS3

border-radius is a CSS3 property. CSS3 introduced many visual enhancements such as rounded corners, shadows, gradients, and transitions.

↥ back to top

Q. A stylesheet contains both inline styles and an external stylesheet. The inline style sets color: red and the external stylesheet sets color: blue. What color will the text be?

Answer: B) Red — inline styles have the highest specificity

Inline styles have a specificity of 1-0-0-0, which overrides any external or embedded stylesheet rule unless !important is used in the stylesheet.

↥ back to top

# 2. Box Model


Q. While working on a web page, you want to add a similar set of margins to an element and all the elements within that element. What will you use for the margin properties?

Answer: B) Inherit

The inherit CSS value causes an element to take the computed value of the same property from its parent. Setting margin: inherit on an element means it will use the same margin as its parent, and any child elements that also use inherit (or are set to inherit by default) will propagate the same margin value throughout the subtree. auto resolves to a browser-calculated value; default is not a valid CSS keyword for margin.

↥ back to top

Q. You are working on a website layout that requires precise control over the spacing and positioning of elements. You want to ensure that the width and height of an element include the content, padding, border, and margin. Which CSS property can be used to achieve this?

Answer: C) box-sizing: border-box

box-sizing: border-box makes the declared width and height include the content, padding, and border — so the element never grows beyond its set size when padding or border is added. Note: margin is never included in any box-sizing value; it always adds space outside the box. content-box (the default) includes only the content area. padding-box was never widely implemented, and margin-box does not exist in CSS.

↥ back to top

Q. Consider the following code. What will be the size of the margin after it collapses?

Code: h1 {
  margin: 0 0 50px 0;
}
h2 {
    margin: 20px 0 0 0;
}

Answer: C) 50px

When two adjacent block-level elements vertical margins meet, they collapse into a single margin equal to the larger of the two values. Here max(50px, 20px) = 50px. Margins do not add together (that would be 70px) when collapsing.

↥ back to top

Q. A developer sets width: 200px and padding: 20px on a div with the default box model. What is the rendered width?

div {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

Answer: C) 250px

By default (box-sizing: content-box), width refers to the content area only. Total width = 200 + 20 + 20 (padding) + 5 + 5 (border) = 250px.

↥ back to top

Q. After adding box-sizing: border-box, what is the rendered width of the same div?

div {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

Answer: B) 200px

With border-box, padding and border are included inside the declared width, so the total rendered width stays at 200px.

↥ back to top

Q. A developer wants 10px vertical spacing between paragraphs but margin collapsing is causing issues. Which scenario triggers margin collapsing?

Answer: B) Two block-level siblings whose margins touch

Margin collapsing occurs between the bottom margin of one block element and the top margin of the next sibling block element. The larger margin wins.

↥ back to top

# 3. Selectors & Specificity


Q. As an experienced CSS developer, you must style a website for a client. What is the difference in CSS between an element selector, a class selector and and ID selector?

Answer: A) Element selector → HTML tag; class selector → class attribute; ID selector → unique ID

An element selector (e.g., p, div) targets all HTML elements of that tag type. A class selector (e.g., .highlight) targets every element sharing a specific class attribute value. An ID selector (e.g., #header) targets the single element with that unique id attribute. IDs must be unique per page, giving ID selectors higher specificity (0-1-0-0) than class selectors (0-0-1-0) and element selectors (0-0-0-1).

↥ back to top

Q. Alex must style all paragraph that are direct children of the <div> element with the class “content” in a large web application. Which CSS selector should he use to achieve this?

Answer: B) .container > p

The child combinator (>) selects only elements that are direct children of the specified parent. .container > p targets <p> elements immediately inside .container, skipping any nested descendants. .container p (descendant combinator) would match <p> at any depth; .container + p selects a <p> immediately after .container; .container ~ p selects all subsequent <p> siblings.

↥ back to top

Q. Alex has to style a paragraph element with the class “highlighted”. Which CSS selector should he use to target the element?

Answer: B) .highlighted

A class selector uses a dot (.) prefix followed by the class name. .highlighted targets every element that has class="highlighted". #highlighted is an ID selector; <highlighted> is not valid CSS syntax; highlighted (no prefix) is an element-type selector.

↥ back to top

Answer: B) .container a

The descendant combinator (space) selects all <a> elements at any nesting depth inside .container. .container > a selects only direct children; .container + a selects an <a> immediately after .container; .container ~ a selects all <a> siblings after .container.

↥ back to top

Q. Alex must style a specific paragraph element on a webpage. Which type of CSS selector should he use?

Answer: C) ID selector

An ID selector (#id) uniquely identifies a single element on the page, making it the right choice when targeting one specific element. An element selector targets all elements of that type, a class selector targets all elements sharing a class, and a pseudo-class selector targets elements in a particular state.

↥ back to top

Q. Which selector has the highest specificity?

/* A */ p { color: red; }
/* B */ .text { color: blue; }
/* C */ #header .text { color: green; }
/* D */ #header p.text { color: orange; }

Answer: D) #header p.text

Specificity values: A = 0-0-1, B = 0-1-0, C = 1-1-0, D = 1-1-1. Selector D has the highest specificity score.

↥ back to top

Q. A developer uses the :not() pseudo-class. What does the following selector target?

input:not([type="submit"]) {
  border: 1px solid gray;
}

Answer: B) All inputs except submit buttons

:not(selector) matches elements that do NOT match the given selector. Here it targets every <input> whose type attribute is not "submit".

↥ back to top

Q. What does the ~ combinator do?

h2 ~ p { color: teal; }

Answer: B) Selects all <p> elements that are siblings of <h2> and come after it

The general sibling combinator (~) matches all subsequent sibling elements of the specified type, not just adjacent ones.

↥ back to top

# 4. Positioning


Q. Alex wants to position an element relative to its normal position in the document flow without affecting the layout of other elements. Which CSS position value should he use?

Answer: B) relative

position: relative moves an element visually from its normal flow position using top, right, bottom, or left offsets. Crucially, the element still occupies its original space in the layout — other elements are not repositioned around it. static (default) ignores offset properties; absolute removes the element from flow; fixed positions relative to the viewport.

↥ back to top

Q. A developer sets position: absolute on a child element. Where is it positioned relative to?

<div style="position: relative;">
  <span style="position: absolute; top: 10px; left: 10px;">Icon</span>
</div>

Answer: B) The nearest positioned ancestor

An absolutely positioned element is placed relative to its closest ancestor that has any position value other than static.

↥ back to top

Q. position: sticky stops sticking when:

Answer: D) The parent container fully scrolls out of view

A sticky element is sticky within its parent container. Once the parent scrolls out of the viewport, the sticky element scrolls away with it.

↥ back to top

Q. Which positioning value removes an element from the normal document flow entirely?

Answer: C) fixed

Both fixed and absolute remove elements from the document flow. fixed additionally positions the element relative to the viewport and it stays there during scrolling.

↥ back to top

# 5. Flexbox


Q. You have a CSS scripting task that you need to write with respect to CSS Flexbox to handle layouts, align elements within them, and distribute spaces among the items in dynamic/responsive conditions. What are the necessary properties of CSS Flexbox?

Answer: A) flex-direction, flex-wrap, flex-flow

The core CSS Flexbox properties for controlling layout direction and wrapping are: flex-direction (sets the main axis — row, column, row-reverse, column-reverse), flex-wrap (controls whether items wrap onto multiple lines — nowrap, wrap, wrap-reverse), and flex-flow (shorthand combining both flex-direction and flex-wrap). Options B, C, and D are entirely fictitious property names not found in CSS.

↥ back to top

Q. While using Flexbox, you need to define a container for it. What is the CSS to fulfil the given requirement?

Answer: B) display: flex

To create a flex container, set display: flex on the parent element. All direct children automatically become flex items. CSS property names are case-insensitive but must be valid — container is not a valid property for activating Flexbox, and values wrapped in quotes like ".flex" are strings, not keywords. The correct declaration is simply display: flex;.

↥ back to top

Q. Alex wants to create a responsive web page design project layout that adjusts based on the available screen width. Which CSS property should he use to divide the available space evenly among multiple elements?

Answer: A) flex-grow

flex-grow determines how much a flex item grows relative to its siblings when there is extra space in the container. Setting flex-grow: 1 on all items divides the remaining space evenly. flex-wrap controls line-wrapping; flex-shrink controls shrinking; flex-basis sets the initial size before space distribution.

↥ back to top

Q. You are defining the grid-template-columns and grid-template-rows in a css grid script. This enables the naming of lines on the grid and allows you to target the grid's end line with -1.

What kind of grid pattern does the scenario illustrate?

Answer: D) Explicit Grid

When you define grid-template-columns and grid-template-rows, you create an explicit grid. This allows line naming and the use of negative indices like -1 to target the last grid line. An implicit grid is auto-generated when grid items are placed outside the explicitly defined tracks.

↥ back to top

Q. A developer wants to center a child both horizontally and vertically inside a flex container. Which is correct?

.container {
  display: flex;
  /* ??? */
}

Answer: C) justify-content: center; align-items: center

justify-content aligns along the main axis; align-items aligns along the cross axis. Both are needed for full centering.

↥ back to top

Q. What does flex: 1 shorthand expand to?

Answer: B) flex-grow: 1; flex-shrink: 1; flex-basis: 0%

The flex: 1 shorthand sets flex-grow: 1, flex-shrink: 1, and flex-basis: 0%, allowing the item to grow and shrink equally.

↥ back to top

Q. A flex container has flex-wrap: wrap. Child items each have flex-basis: 45%. What happens?

Answer: C) Items wrap — two per row with the remaining wrapping to the next line

With flex-wrap: wrap, flex items that cannot fit on a single line wrap onto a new line. At 45% each, two items fit per row.

↥ back to top

# 6. CSS Grid


Q. What does the following grid create?

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 200px;
}

Answer: B) 2 rows × 3 columns of equal width

repeat(3, 1fr) creates 3 equal-width columns; two explicit row heights (100px and 200px) are defined.

↥ back to top

Q. A developer writes grid-column: 1 / -1. What does this mean?

Answer: B) The item spans from the first to the last grid line

-1 refers to the last grid line. 1 / -1 spans the element across all columns in an explicit grid.

↥ back to top

Q. What is the difference between grid-gap and gap?

Answer: B) gap is the modern alias for grid-gap

grid-gap was renamed to gap and now works in both Grid and Flexbox layouts. grid-gap still works for backwards compatibility.

↥ back to top

# 7. Pseudo-classes & Pseudo-elements


Q. Which pseudo-class selector styles the input field currently focused on by the user in a form?

Answer: B) :focus

The :focus pseudo-class matches an element that currently has keyboard or pointer focus — for example, an <input> the user has clicked into or tabbed to. :active fires only while the element is being pressed/clicked; :hover fires when the pointer is over the element; :visited applies to already-visited <a> links only.

↥ back to top

Q. Alex wants to apply a style to the first letter of each paragraph with an <div> element with the class “intro”. How can he do this?

Answer: C) .intro p:first-letter

::first-letter (:first-letter) is a CSS pseudo-element that styles the first letter of the first line of a block-level element. .intro p:first-letter targets the first letter of every <p> inside .intro. :first-child selects the first child element; :first-line targets the first rendered line of text; :first-of-type selects the first element of a particular type.

↥ back to top

Q. What is the difference between :nth-child(2) and :nth-of-type(2)?

<div>
  <p>First</p>
  <span>Middle</span>
  <p>Second</p>
</div>

Answer: B) :nth-child counts all siblings; :nth-of-type counts only same-type siblings

p:nth-child(2) would match a <p> that is the 2nd child of its parent — but here the 2nd child is a <span>, so it fails. p:nth-of-type(2) matches the 2nd <p> element regardless of other element types.

↥ back to top

Q. A developer uses ::before. Which statement is correct?

.btn::before {
  content: "→ ";
  color: red;
}

Answer: B) Inserts a CSS-generated pseudo-element before the content of .btn

::before creates a pseudo-element that is the first child of the selected element. It exists in the render tree but not in the DOM. Both :before and ::before are valid; the double-colon syntax distinguishes pseudo-elements from pseudo-classes.

↥ back to top

# 8. Transitions & Animations


Q. You must make a really attractive webpage, so you decide to add lot of animations to it. Which components are must for an animation to work?

Answer: A) Initial and final keyframes, animation duration, and an element to bind the animation with.

For a CSS animation to work, you need: keyframes (at minimum a from/0% and to/100% defined via @keyframes), an animation-duration (without it, the default is 0s and nothing plays), and an element to apply the animation to via animation-name. animation-delay (option D) is optional — it defaults to 0s and is not required for the animation to function.

↥ back to top

Q. What is the difference between CSS transitions and CSS animations?

Answer: C) Transitions animate between two states; animations can run automatically with multiple keyframes

Transitions require a trigger (like :hover) and interpolate between start and end states. Animations (using @keyframes) can run on load, loop, reverse, and define multiple intermediate steps.

↥ back to top

Q. A developer applies the following. When does the animation start?

.box {
  animation: slide 1s ease 0.5s 1 normal forwards;
}

Answer: C) After 0.5 seconds

In the animation shorthand, the fourth time value is the animation-delay. The order is: name duration timing-function delay iteration-count direction fill-mode.

↥ back to top

Q. A transition is set on an element but it doesn't animate. What is the MOST likely cause?

.box {
  transition: background-color 0.3s ease;
}
.box:hover {
  background: blue;
}

Answer: C) The property name is wrong — background and background-color are distinct

The transition watches the background-color property, but the hover rule changes the background shorthand. Both actually trigger the transition in modern browsers (as background maps to background-color). However, explicit matching of the watched property is best practice to avoid unexpected behavior.

↥ back to top

# 9. Transforms


Q. Your school's web page contains a lot of text; while typing, you did not pay much attention to whether Caps Lock was on or off. Which option is available for text-transform to convert your text into a proper text case (uppercase,lowercase, etc)?

Answer: B) capitalize

The valid text-transform values in CSS are none, capitalize, uppercase, lowercase, and full-width. capitalize makes the first letter of each word uppercase. uppercase converts all text to capitals and lowercase converts all to lower — but neither upper nor lower (options C and D) are valid values. justify is a text-align value, not text-transform.

↥ back to top

Q. What does the following transform do?

.card {
  transform: translateX(50%) rotate(15deg) scale(1.2);
}

Answer: B) Applied left-to-right — translate, rotate, scale

CSS transforms are applied in the order they are declared (left to right), which affects the final result. translateX happens first, then rotation, then scaling.

↥ back to top

Q. What is the default transform-origin?

Answer: C) 50% 50% (center)

By default, transforms originate from the center of the element. You can change this with transform-origin.

↥ back to top

# 10. Media Queries & Responsive Design


Q. While working on a responsive web design project, Alex wants to adjust the layout based on the user's device width. Which CSS feature should she use to achieve this?

Answer: B) Media queries

Media queries (@media) conditionally apply CSS rules based on device characteristics such as viewport width, height, or orientation. They are the standard CSS tool for responsive design — e.g., @media (max-width: 768px) { ... }. Flexbox handles layout direction and alignment, pseudo-classes target element states, and transitions animate property changes — none of these adjust layout based on device width.

↥ back to top

Q. Given below is a code snippet:

<body>
    <p> Resize the browser window. When the width of this document is 650px.</p>
</body>

Which CSS3 code segment should you use to make the above code compatible with the screen 650px?

Answer: B) @media only screen and (max-width: 650px)

Option A uses invalid syntax — (width: < 700px) is not valid CSS; comparison operators are not used inside media feature expressions. Option B correctly uses max-width: 650px, which applies the styles when the viewport width is 650px or less, matching the scenario described. Option C uses min-width: 650px, which applies the styles when the width is 650px or greater — the opposite of the described intent. Option D is incorrect because A uses invalid syntax.

↥ back to top

Q. In a particular web design, you must ensure that all the website pages look, work, and feel perfect on any device. Which is the most suitable option to fulfill this requirement?

Answer: D) Responsive Web Design

Responsive Web Design (RWD) ensures that a website looks, works, and feels good on any device by using fluid grids, flexible images, and CSS media queries to adapt the layout to the viewport size. “Cascading Styling Design” and “Adaptive Response Design” are not real terms. Adaptive Web Design (AWD) serves different fixed layouts per device type — it does not fluidly adapt, making RWD the correct answer for universal device compatibility.

↥ back to top

Q. While working on a responsive web design project, Alex wants to adjust the layout based on the user's device width. Which CSS feature should she use to achieve this?

Answer: B) Media queries

Media queries (@media) conditionally apply CSS rules based on device characteristics such as viewport width, height, or orientation. They are the standard CSS tool for responsive design — e.g., @media (max-width: 768px) { ... }. Flexbox handles layout direction, pseudo-classes target element states, and transitions animate property changes.

↥ back to top

Q. Which keyword value(s) is/are used to define @media.display-mode?

  1. fullscreen
  2. standalone
  3. browser

Answer: D) All the options

The CSS display-mode media feature accepts fullscreen (covers entire screen with no browser UI), standalone (looks like a native app, used in PWAs), minimal-ui (minimal browser UI), and browser (conventional browser tab). All three listed values — fullscreen, standalone, and browser — are valid.

↥ back to top

Q. A developer wants a layout for screens smaller than 768px. Which media query is correct?

Answer: B) @media (max-width: 768px)

max-width: 768px targets viewports with a width of 768px or less. min-width would target 768px and larger.

↥ back to top

Q. What does @media print do?

Answer: A) Styles apply when the page is printed or in print preview

The print media type targets the styles used when the document is sent to a printer or displayed in a browser's print preview.

↥ back to top

Q. Which unit is most appropriate for media query breakpoints?

Answer: B) em

em-based breakpoints respect the user's browser font-size settings, making responsive layouts more accessible. px-based queries do not scale when users change their default font size.

↥ back to top

# 11. CSS Variables (Custom Properties)


Q. A developer defines a CSS variable and uses it. Which is the correct syntax?

Answer: C) --primary-color: red; → color: var(--primary-color);

CSS custom properties use a -- prefix for declaration and var() for usage. Option B is SCSS syntax; option D is LESS syntax.

↥ back to top

Q. Where should a globally available CSS variable be declared?

Answer: B) Inside :root {}

:root targets the top-level element (same as html but with higher specificity), making variables declared there available throughout the entire document.

↥ back to top

Q. What happens when a fallback is provided to var()?

color: var(--missing-color, navy);

Answer: B) navy is used only if --missing-color is not defined or is invalid

The second argument to var() is a fallback value used when the custom property is undefined or its value is invalid at computed-value time.

↥ back to top

# 12. Typography & Text


Q. A developer uses line-height: 1.5 without a unit. What does this mean?

Answer: B) 1.5 times the element's font size

A unitless line-height is a multiplier of the element's own font-size, which is the recommended approach as it scales correctly with inherited font sizes.

↥ back to top

Q. Which text-overflow value shows an ellipsis (...) when text overflows?

.label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ???;
}

Answer: C) ellipsis

text-overflow: ellipsis replaces clipped text with .... It requires overflow: hidden and white-space: nowrap to function properly.

↥ back to top

# 13. Colors & Gradients


Q. What is the result of the following gradient?

background: linear-gradient(to right, #ff0000, #0000ff);

Answer: B) Horizontal red-to-blue gradient (left to right)

to right sets the direction, creating a left-to-right horizontal gradient from red to blue.

↥ back to top

Q. What does rgba(0, 0, 0, 0.5) produce?

Answer: A) Black at 50% transparency

rgba() takes red, green, blue (0–255) and alpha (0–1). rgba(0,0,0,0.5) is black with 50% opacity.

↥ back to top

# 14. Z-index & Stacking Context


Q. A developer sets z-index: 999 on an element but it still appears behind another. What is the most likely reason?

Answer: B) The element does not have a position value other than static

z-index has no effect on statically positioned elements. The element must have position: relative, absolute, fixed, or sticky.

↥ back to top

Q. Which property creates a new stacking context?

Answer: B) opacity: 0.9

Any opacity value less than 1 creates a new stacking context, as do transform, filter, will-change, and positioned elements with a z-index other than auto.

↥ back to top

# 15. Overflow & Clipping


Q. You are working on a webpage and want to disable text wrapping inside an element. Which property will help you accomplish the task?

Answer: C) white-space

white-space: nowrap disables text wrapping, forcing all text to remain on a single line. line-height controls the vertical spacing between lines; wrap is not a valid CSS property; text-indent indents only the first line of a block.

↥ back to top

Q. What is the difference between overflow: hidden and overflow: clip?

Answer: C) overflow: hidden creates a BFC; overflow: clip clips without creating a BFC

overflow: clip (CSS Overflow Level 3) clips content at the padding box like hidden but does not create a new block formatting context, avoiding unintended side effects.

↥ back to top

Q. A developer applies overflow: auto. When does a scrollbar appear?

Answer: C) Only when content overflows the element's boundaries

overflow: auto adds scrollbars only when the content is larger than the container, unlike overflow: scroll which always shows scrollbars.

↥ back to top

# 16. Display & Visibility


Q. Alex is designing a responsive website. He needs to hide an element on small screens, Which CSS property can he use?

Answer: A) display

display: none completely removes the element from the layout and hides it from screen readers, making it the standard way to hide elements on small screens inside a @media query. visibility: hidden hides the element visually but still occupies space. opacity: 0 makes it invisible but it remains interactive and takes up space. position does not hide elements.

↥ back to top

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

Answer: B) display: none removes the element from flow; visibility: hidden keeps its space

display: none removes the element entirely from the document layout. visibility: hidden makes it invisible but the element still occupies space in the layout.

↥ back to top

Q. What does display: inline-block allow that display: inline does not?

Answer: B) Setting width, height, margin, and padding on all sides

inline-block elements flow inline like text but accept all box model properties. Pure inline elements ignore width, height, and vertical margin.

↥ back to top

# 17. SCSS / Sass


Q. A developer refactors CSS into SCSS using nesting. What CSS does the following SCSS produce?

nav {
  background: #333;
  ul {
    margin: 0;
  }
  a {
    color: white;
    &:hover {
      color: gold;
    }
  }
}

Answer: C) nav {}, nav ul {}, nav a {}, nav a:hover {}

SCSS nesting prepends the parent selector. The & refers to the immediate parent (nav a), so &:hover becomes nav a:hover.

↥ back to top

Q. A developer uses an SCSS @mixin. What is the primary benefit?

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  @include flex-center;
}

Answer: B) Reusable blocks of CSS that can be included in multiple selectors

Mixins define a reusable set of declarations. Using @include injects the mixin's styles into the selector, reducing duplication.

↥ back to top

Q. What does the SCSS %placeholder (silent class / extend) do differently from a @mixin?

%card-style {
  border: 1px solid #eee;
  border-radius: 4px;
}

.product-card {
  @extend %card-style;
}

.user-card {
  @extend %card-style;
}

Answer: B) Placeholders group selectors in the output, reducing duplication

With @extend, SCSS groups all selectors that share the extended placeholder: .product-card, .user-card { border: 1px solid #eee; ... }. Mixins copy the rules into each selector independently.

↥ back to top

Q. A developer uses @use instead of @import in SCSS. What is the main advantage?

Answer: B) @use loads with its own namespace, preventing collisions

@use (part of the Dart Sass module system) scopes variables and mixins to a namespace (e.g., colors.$primary). @import dumps everything into the global scope, risking name conflicts and is now deprecated.

↥ back to top

Q. What does the SCSS @each directive do?

$sizes: 1, 2, 3, 4;

@each $size in $sizes {
  .mt-#{$size} {
    margin-top: #{$size * 4}px;
  }
}

Answer: A) Loops through a list and generates rules for each item

@each iterates over a list (or map), generating CSS rules for every value. The #{} syntax is SCSS interpolation used to embed expressions into selector names or property values.

↥ back to top

Q. A developer has a SCSS @function. What distinguishes it from a @mixin?

@function rem($px) {
  @return $px / 16px * 1rem;
}

h1 {
  font-size: rem(32px);
}

Answer: B) Functions return a single value; mixins output CSS declaration blocks

SCSS @function computes and @returns a single value (like a number, string, or color) usable in property values. Mixins output one or more CSS declarations via @include.

↥ back to top

Q. What does SCSS darken() do?

$primary: #3498db;

button:hover {
  background: darken($primary, 10%);
}

Answer: B) Decreases the HSL lightness by 10%

darken($color, $amount) operates in HSL color space, reducing the lightness value by the given percentage. It does not affect opacity or individual RGB channels.

↥ back to top

# 18. CSS Units


Q. Which CSS property should Alex use to adjust the font size of a paragraph on his webpage?

Answer: D) font-size

The font-size property sets the size of the font for an element. font-weight controls boldness, text-decoration adds underline/strikethrough effects, and font-style controls italic/oblique styling — none of these affect font size.

↥ back to top

Q. A developer sets font-size: 1.5em on a child element whose parent has font-size: 16px. What is the child's computed font size?

Answer: D) font-size

The font-size property sets the size of the font for an element. font-weight controls boldness, text-decoration adds underline/strikethrough effects, and font-style controls italic/oblique styling — none of these affect font size.

↥ back to top

Q. What is the difference between em and rem units?

Answer: B) rem is relative to the root font size; em is relative to the current element's font size

rem (root em) always references the <html> element's font size (typically 16px by default), making it predictable. em compounds with nesting, which can cause unintended size escalation.

↥ back to top

Q. A developer uses height: 100vh. What does 1vh represent?

Answer: B) 1% of the viewport height

vh (viewport height) units are relative to the browser viewport. 100vh equals the full visible height of the browser window, regardless of document length.

↥ back to top

Q. Which CSS unit is best suited for typography to respect user browser font-size preferences?

Answer: C) rem

rem scales with the user's browser default font size. If a user sets their base font to 20px for accessibility, rem-sized text adjusts automatically. px ignores this setting in most browsers.

↥ back to top

# 19. CSS Functions


Q. What does clamp(1rem, 2.5vw, 2rem) do?

Answer: B) Scales with the viewport, bounded between 1rem and 2rem

clamp(MIN, PREFERRED, MAX) returns the preferred value (2.5vw) as long as it stays within the min/max bounds. It enables fluid typography without media queries.

↥ back to top

Q. What does the following rule compute to on a 300px-wide container?

.box {
  width: calc(100% - 2rem);
}

(Assume root font-size is 16px)

Answer: B) 268px

2rem = 32px (2 × 16px). calc(100% - 2rem) = 300px - 32px = 268px. calc() mixes units, evaluating at render time.

↥ back to top

Q. Which function selects the smallest value from a list?

width: min(50%, 400px);

Answer: C) min()

min() returns the smallest of its comma-separated arguments. Here, the width will be whichever is smaller — 50% of the container or 400px — preventing overflow on narrow viewports.

↥ back to top

# 20. Floats & Block Formatting Context


Q. A parent <div> contains only floated children and collapses to zero height. What is the standard fix?

Answer: C) Use a clearfix or overflow: hidden/auto on the parent

Floated elements are removed from the normal flow, so the parent has nothing to wrap. A clearfix pseudo-element forces the parent to expand around its floated children. Setting overflow: hidden or auto also establishes a BFC that contains floats.

↥ back to top

Q. Which of the following does NOT create a new Block Formatting Context (BFC)?

Answer: D) display: block (default)

A plain display: block with no other special properties does not create a BFC. BFCs are created by overflow values other than visible, float, position: absolute/fixed, display: inline-block, display: flow-root, flex/grid containers, and more.

↥ back to top

Q. A developer applies float: left to an image inside a paragraph. What is the expected layout behavior?

Answer: B) The paragraph text wraps around the right side of the image

float: left shifts the element to the left of its container and allows inline content (like text) to flow alongside it on the right — the classic text-wrapping pattern.

↥ back to top

# 21. Filters & Blend Modes


Q. What does the following CSS do?

.card {
  filter: drop-shadow(4px 4px 6px rgba(0,0,0,0.4));
}

Answer: B) Shadow follows the element's actual rendered shape

filter: drop-shadow() uses the element's alpha channel, so it traces non-rectangular shapes (like PNGs) precisely. box-shadow always shadows the rectangular bounding box.

↥ back to top

Q. What does backdrop-filter: blur(8px) do?

Answer: B) Blurs the area behind the element

backdrop-filter applies filter effects to the content rendered beneath an element, enabling frosted-glass effects. The element itself must have some transparency (background with alpha < 1) for the effect to be visible.

↥ back to top

Q. A developer applies mix-blend-mode: multiply to an image. What does this do?

Answer: B) Blends by multiplying color values, producing a darker result

mix-blend-mode: multiply combines the image's colors with those of the background by multiplying their values (0–1 scale). White areas become transparent; black areas remain black, creating an effect similar to physical ink overlays.

↥ back to top

# 22. Performance & Rendering


Q. Which CSS property promotes an element to its own compositor layer, enabling GPU-accelerated animation?

Answer: B) transform: translateZ(0) or will-change: transform

Adding transform: translateZ(0) (or the modern will-change: transform) hints to the browser to promote the element to a separate compositor layer. Animating transform and opacity on composited layers bypasses layout and paint, resulting in smoother 60fps animations.

↥ back to top

Q. Why should will-change be used sparingly?

Answer: B) Each composited layer consumes GPU memory; overuse degrades performance

will-change signals the browser to prepare for an upcoming change, but every promoted layer occupies VRAM. Applying it to many elements at once can cause more harm than good and should be added only where an animation is actually happening.

↥ back to top

Q. When animating an element, which two CSS properties can be changed without triggering layout or paint (composite-only)?

Answer: C) transform and opacity

The browser rendering pipeline has three stages: layout → paint → composite. Changes to transform and opacity skip the first two stages and are handled entirely on the compositor thread, making them the most performant properties to animate.

↥ back to top

Q. A developer wants styles for the parent selector using & in SCSS. What does the following produce?

.button {
  color: white;

  .theme-dark & {
    color: black;
  }
}

Answer: B) .theme-dark .button { color: black; }

When & appears after a selector (not at the beginning), it refers to the parent (.button) but placed inside the ancestor context (.theme-dark). This pattern is commonly used for theme overrides.

↥ back to top

Q. Which SCSS feature allows you to conditionally apply styles?

$theme: dark;

body {
  @if $theme == dark {
    background: #111;
    color: white;
  } @else {
    background: white;
    color: #111;
  }
}

Answer: C) @if / @else

SCSS supports @if, @else if, and @else for conditional logic at compile time, allowing different CSS output based on variable values.

↥ back to top

Q. A developer gets a deprecation warning: @import is deprecated. What should they migrate to?

Answer: C) @use and @forward

The Dart Sass team deprecated @import in favor of @use (for consuming a module) and @forward (for re-exporting a module's members). These provide better encapsulation and namespacing.

↥ back to top

# 23. CSS Architecture & Naming Conventions


Q. A front-end team is adopting BEM (Block Element Modifier) methodology. A developer is styling a navigation component with an active link. Which class name follows BEM convention correctly?

Answer: B) .nav__link--active

BEM uses Block__Element--Modifier syntax. Here .nav is the block, __link is the element inside it, and --active is the modifier state. This keeps styles flat and avoids specificity conflicts — a pattern favored by large teams to scale CSS predictably.

↥ back to top

Q. A engineer reviews a stylesheet and notices heavy use of !important. What is the primary problem with overusing !important?

Answer: C) It overrides the cascade and makes debugging specificity extremely difficult

!important breaks the natural cascade, forcing every future developer who needs to override the rule to also add !important, creating specificity wars. The correct fix is to refactor selectors to have appropriate specificity.

↥ back to top

Q. A team is building a design system and must choose between a CSS Reset and CSS Normalize. What is the key difference?

Answer: B) Reset removes all defaults; Normalize preserves useful defaults and fixes cross-browser inconsistencies

A CSS Reset (e.g., Eric Meyer's Reset) zeroes out margins, padding, and font sizes on all elements. CSS Normalize (by Nicolas Gallagher) instead keeps practical defaults and only targets the inconsistencies across browsers. Most modern design systems (like Microsoft Fluent) prefer Normalize or a minimal custom baseline.

↥ back to top

Q. An performance team discusses “critical CSS.” What does inlining critical CSS achieve?

Answer: B) Eliminates render-blocking requests so above-the-fold content renders sooner

CSS is render-blocking by default — the browser must download and parse it before painting. Inlining only the styles needed for the initial viewport (critical CSS) removes the blocking request for that content, improving First Contentful Paint (FCP) and Largest Contentful Paint (LCP).

↥ back to top

Q. A developer encounters a CSS architecture pattern called SMACSS (Scalable and Modular Architecture for CSS). The pattern categorizes rules into which five groups?

Answer: B) Base, Layout, Module, State, Theme

SMACSS (by Jonathan Snook) categorizes CSS into: Base (default element styles), Layout (major structural containers), Module (reusable components), State (JS-driven states like .is-active), and Theme (visual variations). This separation helps large financial-sector teams maintain predictable, conflict-free stylesheets.

↥ back to top

Q. A developer at a large organization wants to scope CSS to individual components to prevent style leakage. Which modern CSS feature provides native style encapsulation at the browser level?

Answer: D) Both Shadow DOM with :host and @scope provide native browser-level scoping

Shadow DOM creates an encapsulated DOM/CSS boundary where external styles cannot penetrate (used by Web Components). The @scope CSS at-rule (CSS Cascading and Inheritance Level 6) natively scopes selectors to a subtree without JavaScript. CSS Modules is a build-tool solution, not a native browser feature.

↥ back to top

# 24. Accessibility & CSS


Q. A accessibility engineer reviews a site where users have set “Reduce Motion” in their OS settings, but CSS animations still play. Which media query should have been used to respect this preference?

@keyframes spin {
  to { transform: rotate(360deg); }
}
.loader {
  animation: spin 1s linear infinite;
}

Answer: B) @media (prefers-reduced-motion: reduce)

The prefers-reduced-motion media feature detects whether the user has requested that the system minimize the amount of non-essential motion. Wrapping or disabling animations inside @media (prefers-reduced-motion: reduce) { ... } is a WCAG 2.1 (2.3.3 AAA) best practice.

↥ back to top

Q. A developer builds a site that supports dark mode. Which CSS media query and property combination correctly implements it?

:root {
  --bg: white;
  --text: black;
}
/* ??? */
:root {
  --bg: #121212;
  --text: #e0e0e0;
}

Answer: B) @media (prefers-color-scheme: dark)

prefers-color-scheme detects the user's OS or browser dark/light mode preference. color-scheme is a CSS property (not a media query) that tells the browser which color schemes an element supports. Combining CSS variables with prefers-color-scheme is the standard pattern for implementing dark mode without JavaScript.

↥ back to top

Q. A developer needs to hide an element visually but keep it accessible to screen readers. Which CSS technique is correct?

Answer: D) The .sr-only / visually-hidden CSS class

display: none and visibility: hidden both hide elements from screen readers. opacity: 0 hides visually but the element is still focusable and clickable. The .sr-only pattern (used by Bootstrap, Tailwind, and ARIA best practices) positions the element off-screen in a 1×1 clipped box — visible to screen readers but not to sighted users.

↥ back to top

Q. A front-end developer uses :focus to style keyboard-focused buttons. A UX complaint arises: focus outlines appear when mouse users click buttons, creating visual clutter. What is the best CSS-only solution?

Answer: B) Use :focus-visible

:focus-visible is applied by the browser only when focus was set via keyboard or non-pointer navigation. Mouse clicks do not trigger :focus-visible in most browsers. Removing :focus entirely (option A) is an accessibility violation — WCAG 2.4.7 requires a visible focus indicator for keyboard users.

↥ back to top

Q. An Amazon engineer is auditing color contrast for WCAG 2.1 AA compliance. A button has color: #767676 on a background: white background. What is the issue?

Answer: A) #767676 on white achieves exactly 4.5:1 and meets the WCAG 2.1 AA minimum

WCAG 2.1 Success Criterion 1.4.3 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt / 14pt bold). #767676 on white achieves exactly 4.5:1. Any lighter gray (e.g., #777) fails.

↥ back to top

Q. A developer wants interactive elements to remain usable in Windows High Contrast Mode. Which CSS approach ensures borders and backgrounds are preserved?

Answer: B) Use @media (forced-colors: active) to override affected styles

In Windows High Contrast Mode (and forced-colors: active), the browser replaces many colors with system colors. Transparent backgrounds, box shadows, and custom gradients may disappear. Targeting @media (forced-colors: active) lets developers restore critical borders or use currentColor fallbacks, ensuring the UI remains usable.

↥ back to top

# 25. Advanced Layout Scenarios


Q. An Amazon product page needs a sticky footer that always sits at the bottom of the viewport when content is short, but is pushed down by content when the page is long. Which CSS approach achieves this with minimal markup?

body {
  /* ??? */
}
main {
  /* ??? */
}

Answer: B) display: flex; flex-direction: column; min-height: 100vh; on body and flex: 1 on main

Setting min-height: 100vh on the body makes it at least full-viewport height. A column flex layout with flex: 1 on <main> causes it to grow and fill the remaining space, pushing the footer to the bottom. position: fixed (option D) overlaps content; position: absolute (option A) only works if the body is exactly one viewport tall.

↥ back to top

Q. A developer needs to maintain a 16:9 aspect ratio for embedded video containers across all viewport sizes. Which modern CSS property achieves this in a single line?

.video-wrapper {
  width: 100%;
  /* ??? */
}

Answer: B) aspect-ratio: 16 / 9

The aspect-ratio CSS property (widely supported since 2021) directly sets the intrinsic aspect ratio. Before its introduction, developers used the “padding-top hack” (option C) — padding-top: 56.25% equals 9/16 × 100%. The modern aspect-ratio property is cleaner, readable, and does not require positioning tricks.

↥ back to top

Q. A engineer needs a component's layout to change based on the component's own width — not the viewport width. Which CSS feature enables this?

Answer: B) CSS Container Queries with @container and container-type

Container Queries (CSS Containment Level 3) allow styles to respond to the size of the component's nearest container rather than the viewport. A parent is declared with container-type: inline-size, and children use @container (min-width: 600px) { ... }.

↥ back to top

Q. A dashboard uses a CSS Grid layout. A developer needs the inner grid items to align to the outer grid's column tracks — not their own subgrid tracks. Which CSS feature allows this?

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.child {
  grid-column: 1 / -1;
  display: grid;
  /* ??? */
}

Answer: B) grid-template-columns: subgrid

CSS Subgrid (CSS Grid Level 2) allows a nested grid element to participate in its parent's grid tracks rather than defining its own. grid-template-columns: subgrid makes the child align its columns to the parent's column lines — critical for consistent card layouts and data tables in dashboards.

↥ back to top

Q. A developer builds a card grid where all cards in the same row should have equal height (regardless of content). Which CSS property on the grid container achieves this automatically?

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* ??? */
}

Answer: A) align-items: stretch (the default grid behavior)

CSS Grid automatically makes all items in the same row the same height by stretching them to fill the row track — align-items: stretch is the default. Unlike Flexbox, Grid creates a true two-dimensional layout where all cells in the same row share the same height implicitly. No additional properties are needed.

↥ back to top 
.gallery {
  display: grid;
  grid-template-columns: ???;
}

Answer: B) repeat(auto-fill, minmax(200px, 1fr))

auto-fill creates as many column tracks as will fit. minmax(200px, 1fr) ensures each track is at least 200px but expands to fill available space. This combination creates a fully responsive grid that adapts the column count to the container width without any media queries — a pattern widely used in product listing pages.

↥ back to top

# 26. Modern CSS Features


Q. A developer is building a design system with multiple third-party CSS libraries. Specificity conflicts cause unexpected overrides. Which CSS feature allows the developer to explicitly control the order in which stylesheet layers are applied?

Answer: D) Both @layer and @import with the layer() function

CSS Cascade Layers (@layer) let developers define explicit cascade order. Styles in a later @layer override earlier ones, regardless of specificity. You can also assign an imported stylesheet to a layer: @import url(\'reset.css\') layer(reset). This solves specificity conflicts without !important and is increasingly adopted in large-scale design systems.

↥ back to top

Q. An engineer applies content-visibility: auto to off-screen sections. What does this achieve?

.page-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

Answer: B) Skips rendering of off-screen sections until they approach the viewport

content-visibility: auto instructs the browser to skip layout and paint for elements outside the viewport, dramatically reducing initial rendering work. contain-intrinsic-size provides a placeholder size to preserve scroll behavior. Google Chromium engineers have reported rendering time improvements of 7× on content-heavy pages using this property.

↥ back to top

Q. A developer is adopting native CSS Nesting (no preprocessor). What does the following produce?

.card {
  background: white;

  & .title {
    font-size: 1.5rem;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}

Answer: B) .card {}, .card .title {}, .card:hover {}

Native CSS Nesting (Baseline 2023) is now supported in all major browsers. The & refers to the parent selector. & .title compiles to .card .title and &:hover compiles to .card:hover. Unlike SCSS, native nesting requires & before any combinators or element selectors that are not pseudo-classes.

↥ back to top

Q. A developer needs to style a <form> element differently when it contains at least one invalid <input>. Which CSS selector achieves this without JavaScript?

Answer: B) form:has(input:invalid)

The CSS :has() relational pseudo-class (Baseline 2023) selects a parent based on its children. form:has(input:invalid) targets the <form> if it contains any <input> matching :invalid. This eliminates the need for JavaScript to propagate child-state to a parent — a long-standing limitation of CSS.

↥ back to top

Q. A developer is internationalizing a web application to support both left-to-right (English) and right-to-left (Arabic) layouts. Which CSS approach avoids writing separate RTL overrides?

/* Instead of: */
.sidebar {
  margin-left: 1rem;
}
/* Use: */
.sidebar {
  /* ??? */
}

Answer: B) margin-inline-start: 1rem

CSS Logical Properties map physical directions (left/right/top/bottom) to logical ones relative to the writing mode. margin-inline-start means “the start of the inline axis” — left for LTR, right for RTL — so the layout adapts automatically without a [dir="rtl"] override. This is the recommended approach for internationalized applications.

↥ back to top

Q. A developer wants to apply a CSS custom property that can be set from JavaScript at runtime to drive a dynamic theme. Which approach is correct?

// JavaScript
document.documentElement.style.setProperty(\'--accent-color\', \'#e91e63\');

/* CSS */
.button {
  background: var(--accent-color, #1976d2);
}

Answer: B) This works correctly — CSS variables set via JavaScript are reflected immediately

CSS custom properties are live — changing them via element.style.setProperty() triggers a re-paint. document.documentElement targets the <html> element, making --accent-color available globally (same as :root). The fallback #1976d2 only applies when --accent-color is undefined. This pattern powers runtime theming without page reload.

↥ back to top

# 27. BOOTSTRAP-CSS


Q. You want to apply pagination to your web page using Bootstrap. Which option in Bootstrap is used to disable access to any page at a point in time?

Answer: B) Use class="disabled"

In Bootstrap, adding the disabled class to a pagination <li> element visually grays out the link and prevents interaction. For example: <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>. disable = true and enabled=false are not valid Bootstrap or CSS constructs, and disabling page links is very much possible.

↥ back to top

Q. While working with Bootstrap, you want to allow the web debuggers to refer to the original context from where the code was generated, What is that map file called?

Answer: A)

The CSS list-style shorthand order is list-style-type list-style-position list-style-image. Option A uses the correct order and correctly describes list-style-position as controlling whether the marker appears inside or outside the content flow. Option B has the wrong order (image before position). Option C also has the wrong order and incorrectly describes list-style-position as placing the marker at top/bottom/left/right — those are not valid list-style-position values (inside and outside are).

↥ back to top

Q. Alex wants to leverage a CSS framework to create a responsive layout quickly for a new web development project. Which CSS framework can she use to provide a responsive grid system and various UI components?

Answer: D) Twitter Bootstrap

Twitter Bootstrap is the most widely used CSS framework, offering a responsive 12-column grid system and an extensive library of UI components (buttons, navbars, modals, cards, forms, etc.). Foundation, Bulma, and Semantic UI also provide grids and components, but Bootstrap is the most prominent answer to this scenario.

↥ back to top

Q. You have a collection of images you need to make responsive using Bootstrap 4. Which attribute is used to make the images responsive?

Answer: A) img-fluid

In Bootstrap 4, applying the class img-fluid to an <img> element makes it responsive. It sets max-width: 100% and height: auto so the image scales with its parent container and never overflows. div-container-responsive, class-set-responsive, and img-embed-true are not valid Bootstrap classes.

↥ back to top

Q. While working with Bootstrap, you want to allow the web debuggers to refer to the original context from where the code was generated. What is that map file called?

Answer: B) Source map file with .map extension

A source map (.map file) is a JSON file that maps the minified/compiled output back to the original source code. When Bootstrap's minified CSS (e.g., bootstrap.min.css) is served alongside its .map file, browser DevTools can display the original, human-readable source lines instead of the minified output — making debugging significantly easier. .htmlx and .embeded are not real file extensions in this context.

↥ back to top

Q. Alex is working on a web development project for a client and must create a responsive layout using the Twitter Bootstrap Grid System. The client wants a three-column layout for larger screens, with the left and right columns having a fixed with of 200 pixels each and the center column taking up the remaining space. However, tha layout should stack the columns vertically for smaller screens.

Answer: A) col-lg-4 col-md-6 col-sm-12

Bootstrap's 12-column grid divides large screens into three equal columns with col-lg-4 (4 + 4 + 4 = 12). col-md-6 shows two columns per row on medium screens (6 + 6 = 12, third wraps), and col-sm-12 makes each column full-width on small screens, stacking them vertically. This is the standard Bootstrap three-column responsive pattern.

↥ back to top

Q. Taylor is developing a responsive website using the Bootstrap framework and needs to create a container that spans the entire width of the viewport, providing a full-width layout for the client's content, Which class should she use to achieve this?

Answer: D) .container-fluid

.container-fluid spans the full width of the viewport (width: 100%) at all breakpoints. .container uses responsive max-widths that vary per breakpoint. .row and .col are grid layout classes, not container wrappers.

↥ back to top