Scenario-based multiple choice questions covering core CSS3 topics.
- Introduction
- Box Model
- Selectors & Specificity
- Positioning
- Flexbox
- CSS Grid
- Pseudo-classes & Pseudo-elements
- Transitions & Animations
- Transforms
- Media Queries & Responsive Design
- CSS Variables (Custom Properties)
- Typography & Text
- Colors & Gradients
- Z-index & Stacking Context
- Overflow & Clipping
- Display & Visibility
- SCSS / Sass
div {
border-radius: 8px;
}- A) CSS1
- B) CSS2
- C) CSS3
- D) CSS4
Answer: C) CSS3
border-radiusis a CSS3 property. CSS3 introduced many visual enhancements such as rounded corners, shadows, gradients, and transitions.
Q2. 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?
- A) Blue — external stylesheets always win
- B) Red — inline styles have the highest specificity
- C) Red — last-declared rule always wins
- D) It depends on browser defaults
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!importantis used in the stylesheet.
Q3. 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;
}- A) 200px
- B) 240px
- C) 250px
- D) 245px
Answer: C) 250px
By default (
box-sizing: content-box),widthrefers to the content area only. Total width = 200 + 20 + 20 (padding) + 5 + 5 (border) = 250px.
div {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid black;
}- A) 250px
- B) 200px
- C) 150px
- D) 170px
Answer: B) 200px
With
border-box, padding and border are included inside the declaredwidth, so the total rendered width stays at 200px.
Q5. A developer wants 10px vertical spacing between paragraphs but margin collapsing is causing issues. Which scenario triggers margin collapsing?
- A) Two
inlineelements adjacent to each other - B) Two block-level siblings whose margins touch
- C) A flex child and its parent
- D) An absolute-positioned element and a float
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.
/* A */ p { color: red; }
/* B */ .text { color: blue; }
/* C */ #header .text { color: green; }
/* D */ #header p.text { color: orange; }- A) A
- B) B
- C) C
- D) D
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.
input:not([type="submit"]) {
border: 1px solid gray;
}- A) All submit inputs
- B) All inputs except submit buttons
- C) Only text inputs
- D) All form elements except inputs
Answer: B) All inputs except submit buttons
:not(selector)matches elements that do NOT match the given selector. Here it targets every<input>whosetypeattribute is not"submit".
h2 ~ p { color: teal; }- A) Selects the first
<p>immediately after<h2> - B) Selects all
<p>elements that are siblings of<h2>and come after it - C) Selects all
<p>elements inside<h2> - D) Selects
<p>elements that are children of<h2>
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.
<div style="position: relative;">
<span style="position: absolute; top: 10px; left: 10px;">Icon</span>
</div>- A) The viewport
- B) The nearest positioned ancestor (
positionnotstatic) - C) The document body
- D) Its immediate parent regardless of positioning
Answer: B) The nearest positioned ancestor
An absolutely positioned element is placed relative to its closest ancestor that has any
positionvalue other thanstatic.
- A) The user scrolls past its designated threshold
- B) The element reaches the edge of its scrolling container
- C) Another sticky element enters the viewport
- D) The parent container fully scrolls out of view
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.
- A)
relative - B)
sticky - C)
fixed - D)
static
Answer: C) fixed
Both
fixedandabsoluteremove elements from the document flow.fixedadditionally positions the element relative to the viewport and it stays there during scrolling.
Q12. A developer wants to center a child both horizontally and vertically inside a flex container. Which is correct?
.container {
display: flex;
/* ??? */
}- A)
align-items: centeronly - B)
justify-content: centeronly - C)
justify-content: center; align-items: center - D)
text-align: center; vertical-align: middle
Answer: C) justify-content: center; align-items: center
justify-contentaligns along the main axis;align-itemsaligns along the cross axis. Both are needed for full centering.
- A)
flex-grow: 1; flex-shrink: 0; flex-basis: 0 - B)
flex-grow: 1; flex-shrink: 1; flex-basis: 0% - C)
flex-grow: 0; flex-shrink: 1; flex-basis: auto - D)
flex-grow: 1; flex-shrink: 1; flex-basis: auto
Answer: B) flex-grow: 1; flex-shrink: 1; flex-basis: 0%
The
flex: 1shorthand setsflex-grow: 1,flex-shrink: 1, andflex-basis: 0%, allowing the item to grow and shrink equally.
- A) Items overflow the container
- B) Items shrink to fit one row
- C) Items wrap — two per row with the remaining wrapping to the next line
- D) Items are removed if they do not fit
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.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 200px;
}- A) 3 rows × 2 columns
- B) 2 rows × 3 columns of equal width
- C) 6 equal cells
- D) 3 auto-sized rows
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.
- A) The item starts at column 1 and ends at the second-to-last column
- B) The item spans from the first to the last grid line (full width)
- C) The item is placed in a negative column
- D) The item is removed from grid flow
Answer: B) The item spans from the first to the last grid line
-1refers to the last grid line.1 / -1spans the element across all columns in an explicit grid.
- A) They are completely different properties
- B)
gapis the modern alias forgrid-gap; both work the same way - C)
gaponly works in Flexbox, not Grid - D)
grid-gapsupports percentage values;gapdoes not
Answer: B) gap is the modern alias for grid-gap
grid-gapwas renamed togapand now works in both Grid and Flexbox layouts.grid-gapstill works for backwards compatibility.
<div>
<p>First</p>
<span>Middle</span>
<p>Second</p>
</div>- A) They behave identically
- B)
:nth-childcounts all siblings;:nth-of-typecounts only siblings of the same element type - C)
:nth-of-typecounts all siblings;:nth-childcounts only the same type - D)
:nth-childis CSS2;:nth-of-typeis CSS3
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.
.btn::before {
content: "→ ";
color: red;
}- A)
::beforeinserts an actual DOM element before.btn - B)
::beforeinserts a CSS-generated pseudo-element before the content of.btn - C)
::beforerequires JavaScript to function - D)
::beforeis equivalent to:beforein CSS3 only
Answer: B) Inserts a CSS-generated pseudo-element before the content of .btn
::beforecreates a pseudo-element that is the first child of the selected element. It exists in the render tree but not in the DOM. Both:beforeand::beforeare valid; the double-colon syntax distinguishes pseudo-elements from pseudo-classes.
- A) Transitions can loop; animations cannot
- B) Animations require JavaScript; transitions do not
- C) Transitions animate between two states triggered by events; animations can run automatically and have multiple keyframes
- D) They are identical features with different syntax
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.
.box {
animation: slide 1s ease 0.5s 1 normal forwards;
}- A) Immediately
- B) After 1 second
- C) After 0.5 seconds (the delay)
- D) After the element is hovered
Answer: C) After 0.5 seconds
In the
animationshorthand, the fourth time value is theanimation-delay. The order is:name duration timing-function delay iteration-count direction fill-mode.
.box {
transition: background-color 0.3s ease;
}
.box:hover {
background: blue;
}- A)
transitiononly works withanimation - B) The shorthand should use
allinstead ofbackground-color - C) The property name is wrong — it should be
background-colorinstead ofbackground - D)
easeis not a valid timing function
Answer: C) The property name is wrong — background and background-color are distinct
The
transitionwatches thebackground-colorproperty, but the hover rule changes thebackgroundshorthand. Both actually trigger the transition in modern browsers (asbackgroundmaps tobackground-color). However, explicit matching of the watched property is best practice to avoid unexpected behavior.
.card {
transform: translateX(50%) rotate(15deg) scale(1.2);
}- A) Rotates, then translates, then scales — order doesn't matter
- B) Translates 50% right, rotates 15 degrees, and scales 1.2× — applied left-to-right
- C) Scales first, then rotates, then translates
- D) Only the last transform function applies
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.
translateXhappens first, then rotation, then scaling.
- A)
0 0(top-left corner) - B)
100% 100%(bottom-right corner) - C)
50% 50%(center) - D)
0 50%(left-center)
Answer: C) 50% 50% (center)
By default, transforms originate from the center of the element. You can change this with
transform-origin.
- A)
@media (min-width: 768px) { ... } - B)
@media (max-width: 768px) { ... } - C)
@media screen < 768px { ... } - D)
@media (width: 768px) { ... }
Answer: B) @media (max-width: 768px)
max-width: 768pxtargets viewports with a width of 768px or less.min-widthwould target 768px and larger.
- A) Styles apply when the page is printed or in print preview
- B) Styles apply to printers connected to the PC
- C) Styles apply to images only
- D)
@media printis not a valid media type
Answer: A) Styles apply when the page is printed or in print preview
The
- A)
px— fixed pixel values - B)
em— scales with the browser's base font size, respecting user preferences - C)
vw— viewport-based units - D)
%— percentage of the parent element
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.
- A)
var-color: red;→color: use(color); - B)
$color: red;→color: $color; - C)
--primary-color: red;→color: var(--primary-color); - D)
@color: red;→color: @color;
Answer: C) --primary-color: red; → color: var(--primary-color);
CSS custom properties use a
--prefix for declaration andvar()for usage. Option B is SCSS syntax; option D is LESS syntax.
- A) Inside
body {} - B) Inside
:root {} - C) At the top of the file outside any selector
- D) Inside
html body {}
Answer: B) Inside :root {}
:roottargets the top-level element (same ashtmlbut with higher specificity), making variables declared there available throughout the entire document.
color: var(--missing-color, navy);- A) Browser throws an error
- B)
navyis used only if--missing-coloris not defined or is invalid - C)
navyoverrides--missing-color - D) The fallback is ignored
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.
- A) 1.5 pixels
- B) 1.5 times the element's font size
- C) 1.5em relative to the root font size
- D) 150% of the parent element's height
Answer: B) 1.5 times the element's font size
A unitless
line-heightis a multiplier of the element's ownfont-size, which is the recommended approach as it scales correctly with inherited font sizes.
.label {
white-space: nowrap;
overflow: hidden;
text-overflow: ???;
}- A)
clip - B)
hidden - C)
ellipsis - D)
scroll
Answer: C) ellipsis
text-overflow: ellipsisreplaces clipped text with.... It requiresoverflow: hiddenandwhite-space: nowrapto function properly.
background: linear-gradient(to right, #ff0000, #0000ff);- A) Vertical red-to-blue gradient
- B) Horizontal red-to-blue gradient (left to right)
- C) Diagonal gradient
- D) Radial gradient from red to blue
Answer: B) Horizontal red-to-blue gradient (left to right)
to rightsets the direction, creating a left-to-right horizontal gradient from red to blue.
- A) Black at 50% transparency
- B) Gray (50% between black and white)
- C) Fully transparent (invisible)
- D) White at 50% transparency
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.
Q35. A developer sets z-index: 999 on an element but it still appears behind another. What is the most likely reason?
- A)
z-indexonly works withdisplay: flex - B) The element does not have a
positionvalue other thanstatic - C)
z-index: 999is not a valid value - D)
z-indexrequires a parent withoverflow: hidden
Answer: B) The element does not have a position value other than static
z-indexhas no effect on statically positioned elements. The element must haveposition: relative,absolute,fixed, orsticky.
- A)
color: red - B)
opacity: 0.9 - C)
display: block - D)
margin: auto
Answer: B) opacity: 0.9
Any
opacityvalue less than 1 creates a new stacking context, as dotransform,filter,will-change, and positioned elements with az-indexother thanauto.
Q37. What is the difference between overflow: hidden and overflow: clip?
- A) They are identical
- B)
clipis the older alias forhidden - C)
overflow: hiddenestablishes a BFC;overflow: clipclips without creating a BFC - D)
overflow: cliponly works on images
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 likehiddenbut does not create a new block formatting context, avoiding unintended side effects.
- A) Always, regardless of content size
- B) Never —
autodisables scrollbars - C) Only when content overflows the element's boundaries
- D) Only on touch devices
Answer: C) Only when content overflows the element's boundaries
overflow: autoadds scrollbars only when the content is larger than the container, unlikeoverflow: scrollwhich always shows scrollbars.
Q39. What is the difference between display: none and visibility: hidden?
- A) They are the same
- B)
display: noneremoves the element from the layout flow;visibility: hiddenhides it but keeps its space - C)
visibility: hiddenremoves the element from the layout;display: nonekeeps the space - D)
visibility: hiddenonly works on block elements
Answer: B) display: none removes the element from flow; visibility: hidden keeps its space
display: noneremoves the element entirely from the document layout.visibility: hiddenmakes it invisible but the element still occupies space in the layout.
- A) Multiple elements per line
- B) Setting
width,height,margin, andpaddingon all sides - C) Float support
- D) Z-index stacking
Answer: B) Setting width, height, margin, and padding on all sides
inline-blockelements flow inline like text but accept all box model properties. Pureinlineelements ignorewidth,height, and verticalmargin.
nav {
background: #333;
ul {
margin: 0;
}
a {
color: white;
&:hover {
color: gold;
}
}
}- A) Compilation error — nesting is not allowed
- B)
nav {},ul {},a {},a:hover {} - C)
nav {},nav ul {},nav a {},nav a:hover {} - D)
nav {},nav > ul {},nav > a {},nav a:hover {}
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&:hoverbecomesnav a:hover.
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.card {
@include flex-center;
}- A) Mixins compile to CSS variables
- B) Mixins allow reusable blocks of CSS declarations that can be included in multiple selectors
- C) Mixins eliminate the need for selectors
- D) Mixins only work with vendor prefixes
Answer: B) Reusable blocks of CSS that can be included in multiple selectors
Mixins define a reusable set of declarations. Using
@includeinjects the mixin's styles into the selector, reducing duplication.
%card-style {
border: 1px solid #eee;
border-radius: 4px;
}
.product-card {
@extend %card-style;
}
.user-card {
@extend %card-style;
}- A)
%placeholderoutputs CSS for every@extendseparately - B)
%placeholdergroups selectors together in the output CSS, reducing duplication - C)
%placeholdercompiles to JavaScript - D)
%extendis the correct directive, not@extend
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.
- A)
@useworks in plain CSS;@importdoes not - B)
@useloads modules with their own namespace, preventing variable/mixin name collisions - C)
@usecompiles faster than@import - D)
@importis the recommended modern syntax
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).@importdumps everything into the global scope, risking name conflicts and is now deprecated.
$sizes: 1, 2, 3, 4;
@each $size in $sizes {
.mt-#{$size} {
margin-top: #{$size * 4}px;
}
}- A) Loops through a list and generates rules for each item
- B) Selects the first matching element
- C) Merges $sizes into a single class
- D) Generates a CSS animation for each size
Answer: A) Loops through a list and generates rules for each item
@eachiterates 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.
@function rem($px) {
@return $px / 16px * 1rem;
}
h1 {
font-size: rem(32px);
}- A) Functions output full CSS rules; mixins output values
- B) Functions return a single computed value; mixins output blocks of CSS declarations
- C) Functions use
@include; mixins use@return - D) There is no difference
Answer: B) Functions return a single value; mixins output CSS declaration blocks
SCSS
@functioncomputes and@returns a single value (like a number, string, or color) usable in property values. Mixins output one or more CSS declarations via@include.
$primary: #3498db;
button:hover {
background: darken($primary, 10%);
}- A) Reduces the element's opacity by 10%
- B) Decreases the lightness of the color by 10% in HSL space
- C) Subtracts 10 from each RGB channel
- D) Converts the color to grayscale
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.
Q48. A developer wants styles for the parent selector using & in SCSS. What does the following produce?
.button {
color: white;
.theme-dark & {
color: black;
}
}- A)
.button .theme-dark { color: black; } - B)
.theme-dark .button { color: black; } - C)
.theme-dark { color: black; } - D) Compilation error
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.
$theme: dark;
body {
@if $theme == dark {
background: #111;
color: white;
} @else {
background: white;
color: #111;
}
}- A)
@switch - B)
@when/@otherwise - C)
@if/@else - D)
@condition
Answer: C) @if / @else
SCSS supports
@if,@else if, and@elsefor conditional logic at compile time, allowing different CSS output based on variable values.
- A)
@require - B)
@load - C)
@useand@forward - D)
@include
Answer: C) @use and @forward
The Dart Sass team deprecated
@importin favor of@use(for consuming a module) and@forward(for re-exporting a module's members). These provide better encapsulation and namespacing.