🎨

HTML & CSS MCQ

Test your HTML & CSS knowledge with 100 multiple choice questions covering fundamentals to advanced concepts, with instant feedback and explanations.

100 Questions 40 Beginner 40 Intermediate 20 Advanced

How This Practice Test Works

Every question below expands right on this page — click a question to reveal its four options, pick the one you think is correct, and you'll get instant feedback along with the correct answer and a short explanation of the reasoning. Questions are grouped by difficulty, so start with the 40 beginner questions to confirm your fundamentals, work through the 40 intermediate ones, and finish with the 20 advanced questions that mirror what exams and technical screenings actually ask. There's no sign-up, no timer, and no limit — retake the test as often as you like.

Curated by Tech Baithak Editorial Team · Last updated: June 2026

What does HTML stand for?

Correct Answer

Hyper Text Markup Language

Explanation

HTML stands for Hyper Text Markup Language, the standard markup language for creating web pages.

Which HTML tag is used to define the largest heading?

Correct Answer

<h1>

Explanation

<h1> defines the largest and most important heading; headings range from <h1> (largest) to <h6> (smallest).

Which tag is used to create a hyperlink?

Correct Answer

<a>

Explanation

The <a> (anchor) tag with an "href" attribute creates a hyperlink to another page or resource.

Which attribute specifies the URL of the page a link goes to?

Correct Answer

href

Explanation

The "href" (hypertext reference) attribute on an <a> tag specifies the destination URL.

Which tag is used to insert an image?

Correct Answer

<img>

Explanation

The <img> tag embeds an image, using the "src" attribute to specify the image URL and "alt" for alternative text.

What is the correct HTML element for inserting a line break?

Correct Answer

<br>

Explanation

<br> is a self-closing/void element that inserts a single line break.

Which CSS property changes the text color of an element?

Correct Answer

color

Explanation

The "color" property sets the color of an element's text content.

How do you link an external CSS file to an HTML document?

Correct Answer

Explanation

A <link> element with rel="stylesheet" and an href pointing to the CSS file is placed in the <head> to apply external styles.

Which CSS selector targets an element with id="header"?

Correct Answer

#header

Explanation

The "#" symbol selects elements by their id attribute; "." selects by class.

Which CSS selector targets all elements with class="box"?

Correct Answer

.box

Explanation

A leading "." denotes a class selector, matching all elements with that class attribute.

What does the CSS "box model" describe?

Correct Answer

The way content, padding, border, and margin combine to form an element's total size

Explanation

The box model consists of content, padding, border, and margin layers that together determine an element's rendered dimensions.

Which HTML tag is used to create an unordered (bulleted) list?

Correct Answer

<ul>

Explanation

<ul> creates an unordered (bulleted) list, while <ol> creates an ordered (numbered) list; <li> defines each list item.

What is the purpose of the <head> element in an HTML document?

Correct Answer

To contain meta-information, the title, links to stylesheets/scripts, not directly displayed on the page

Explanation

The <head> contains metadata such as <title>, <meta> tags, and links to CSS/JS — content that configures the page rather than being rendered directly in the body.

Which CSS property is used to change the font size of text?

Correct Answer

font-size

Explanation

"font-size" controls the size of text, specified in units like px, em, rem, or %.

What does the "alt" attribute on an <img> tag provide?

Correct Answer

Alternative text describing the image, used for accessibility and shown if the image cannot load

Explanation

"alt" provides descriptive text for screen readers and displays if the image fails to load, important for accessibility and SEO.

Which HTML element is used to define the title shown in the browser tab?

Correct Answer

<title>

Explanation

<title>, placed inside <head>, sets the text shown in the browser tab and used as the default bookmark name.

What is the correct syntax for a CSS comment?

Correct Answer

/* comment */

Explanation

CSS comments are written between "/*" and "*/" and can span multiple lines.

Which CSS property controls the space between an element's border and its content?

Correct Answer

padding

Explanation

"padding" adds space inside an element, between its content and its border; "margin" adds space outside the border.

What is the correct HTML for creating a checkbox?

Correct Answer

Explanation

<input type="checkbox"> creates a checkbox form control.

Which CSS property is used to make text bold?

Correct Answer

font-weight

Explanation

"font-weight: bold" (or a numeric value like 700) makes text bold.

What does the CSS value "display: none" do to an element?

Correct Answer

Completely removes the element from the rendered layout, as if it does not exist

Explanation

"display: none" removes the element entirely from the document flow — it takes up no space and is not rendered or announced by most screen readers.

Which tag is used to define a table row?

Correct Answer

<tr>

Explanation

<tr> defines a table row; <td> defines a data cell and <th> a header cell within that row.

What is the purpose of the <form> element?

Correct Answer

To collect user input and submit it to a server

Explanation

<form> groups input controls (text fields, buttons, etc.) and defines how the data is submitted (action and method attributes).

Which CSS unit is relative to the font-size of the root element (<html>)?

Correct Answer

rem

Explanation

"rem" (root em) is relative to the font-size of the root <html> element, while "em" is relative to the parent element's font size.

What does the "class" attribute allow you to do?

Correct Answer

Apply the same CSS styles or JavaScript behavior to multiple elements by sharing a common name

Explanation

Unlike "id" (which should be unique per page), "class" can be applied to multiple elements, enabling shared styling.

Which property is used to set the background color of an element?

Correct Answer

background-color

Explanation

"background-color" sets the background color of an element's box.

What is the correct way to add an inline style to an HTML element?

Correct Answer

Explanation

The "style" attribute applies CSS declarations directly to a single element.

Which HTML5 element is used to define independent, self-contained content, like a blog post?

Correct Answer

Explanation

<article> represents a self-contained composition that could be independently distributed or reused, such as a blog post or news story.

What does the CSS "text-align: center" property do?

Correct Answer

Centers the text content horizontally within its containing element

Explanation

text-align controls the horizontal alignment of inline content (like text) within its block-level container.

Which doctype declaration is used for HTML5?

Correct Answer

<!DOCTYPE html>

Explanation

HTML5 uses the simple "<!DOCTYPE html>" declaration to tell the browser to render the page in standards mode.

What does the CSS property "border-radius" do?

Correct Answer

Rounds the corners of an element's border box

Explanation

border-radius rounds the corners of an element, with larger values producing more rounded (or fully circular) corners.

How do you make text italic using CSS?

Correct Answer

font-style: italic;

Explanation

"font-style: italic" renders text in an italic (or oblique) typeface.

Which attribute is used to specify that an input field must be filled out before submitting a form?

Correct Answer

required

Explanation

The boolean "required" attribute on form controls prevents form submission until the field has a value.

What does the CSS "cursor: pointer" property do?

Correct Answer

Changes the mouse cursor to a hand/pointer icon when hovering over the element, indicating it is clickable

Explanation

"cursor: pointer" displays a hand-shaped cursor on hover, a common visual cue for clickable elements.

Which HTML element represents the main navigation links of a page?

Correct Answer

<nav>

Explanation

<nav> is a semantic HTML5 element used to wrap a section of navigation links.

What is the purpose of the "viewport" meta tag, e.g. "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"?

Correct Answer

To control the page's dimensions and scaling on different devices, essential for responsive design

Explanation

This meta tag tells mobile browsers to set the viewport width to the device's width and disable default zoom scaling, a foundational step for responsive websites.

Which CSS property sets the width of an element's border?

Correct Answer

border-width

Explanation

"border-width" specifies the thickness of an element's border, often used alongside border-style and border-color.

What does the HTML "<strong>" tag do?

Correct Answer

Indicates text of strong importance, typically rendered in bold by default

Explanation

<strong> semantically marks text as important; browsers typically render it in bold by default, but the meaning is about importance, not just style.

What is the difference between <div> and <span>?

Correct Answer

<div> is a block-level generic container, while <span> is an inline generic container

Explanation

<div> is block-level (takes up the full width available, starting on a new line), while <span> is inline (flows within text without forcing a line break).

Which CSS property controls the stacking order of overlapping positioned elements?

Correct Answer

z-index

Explanation

z-index determines which element appears in front when elements overlap; higher values are rendered above lower values, and it only applies to positioned elements.

What is the difference between "margin: 0 auto" centering a block element and "text-align: center"?

Correct Answer

"margin: 0 auto" centers a block-level element with a defined width horizontally within its parent, while "text-align: center" centers inline/inline-block content (like text) inside its container

Explanation

For a block element to be centered with "margin: 0 auto", it needs an explicit width (so auto margins can distribute remaining space); text-align affects how inline-level content is aligned within its containing block.

What does "box-sizing: border-box" change about how width and height are calculated?

Correct Answer

It makes the specified width/height include padding and border, so the element's total rendered size matches the declared dimensions instead of growing beyond them

Explanation

By default (content-box), width/height apply only to the content area, with padding and border added on top; border-box includes padding and border within the specified width/height, simplifying layout math.

What is the difference between "position: relative" and "position: absolute"?

Correct Answer

relative positions an element relative to its normal position (still occupying space in the flow), while absolute removes the element from the normal flow and positions it relative to its nearest positioned ancestor

Explanation

relative keeps the element in its normal flow position but allows offsetting via top/left/etc.; absolute takes the element out of the flow entirely, positioning it relative to the nearest ancestor with a non-static position (or the viewport if none).

What does CSS specificity determine, and which of these has the highest specificity: an inline style, an ID selector, or a class selector?

Correct Answer

Specificity determines which CSS rule applies when multiple rules target the same element; inline styles generally have higher specificity than ID selectors, which in turn outrank class selectors

Explanation

CSS specificity ranks rules: inline styles > ID selectors > class/attribute/pseudo-class selectors > element selectors, determining which conflicting declaration wins (ignoring !important).

What is the purpose of CSS Flexbox's "justify-content" property?

Correct Answer

It aligns flex items along the main axis, distributing extra space between/around/before items

Explanation

justify-content controls alignment and spacing of flex items along the main axis (e.g. flex-start, center, space-between, space-around).

What does the "align-items" property control in a flex container?

Correct Answer

Alignment of items along the cross axis (perpendicular to the main axis)

Explanation

align-items aligns flex items along the cross axis (e.g. vertically in a row-direction flex container), with values like flex-start, center, stretch.

What is the difference between CSS Grid and Flexbox at a high level?

Correct Answer

Flexbox is primarily designed for one-dimensional layouts (a row or a column), while CSS Grid is designed for two-dimensional layouts (rows and columns simultaneously)

Explanation

Flexbox excels at distributing space along a single axis (row or column), while Grid provides explicit control over both rows and columns at once, suiting full-page or complex layouts.

What does a CSS media query like "@media (max-width: 600px) { ... }" do?

Correct Answer

Applies the enclosed styles only when the viewport width is 600px or less

Explanation

Media queries apply CSS conditionally based on characteristics of the device/viewport, here applying styles only when the viewport is 600px wide or narrower — common for responsive design.

What is the purpose of the ":hover" pseudo-class?

Correct Answer

Applies styles when the user's pointer is positioned over the element

Explanation

:hover is a pseudo-class that matches an element while a pointing device (like a mouse) is positioned over it, commonly used for interactive feedback.

What is the difference between "em" and "rem" units in CSS?

Correct Answer

"em" is relative to the font-size of the element's parent (and can compound across nested elements), while "rem" is always relative to the root <html> element's font-size, avoiding compounding

Explanation

Because "em" is relative to the parent's font-size, nested elements using "em" can compound unpredictably; "rem" always refers to the root font-size, providing more predictable scaling.

What does the CSS "transition" property do?

Correct Answer

Animates changes to a property's value smoothly over a specified duration, rather than the change happening instantly

Explanation

transition specifies which properties should animate, over what duration and timing function, when their values change (e.g. on hover).

What is semantic HTML, and why is it preferred?

Correct Answer

Using HTML elements that convey meaning about their content (e.g. <header>, <article>, <footer>) rather than generic <div>/<span>, improving accessibility, SEO, and code clarity

Explanation

Semantic elements describe their purpose to browsers, assistive technologies, and search engines, improving accessibility and maintainability compared to generic containers.

What does the CSS pseudo-element "::before" do?

Correct Answer

Inserts generated content immediately before the element's actual content, inside the element

Explanation

::before (with the "content" property) generates and inserts content as the first child of the selected element, often used for decorative icons or labels.

What is the effect of "overflow: hidden" on a container with content larger than its size?

Correct Answer

Content that exceeds the container's box is clipped and not visible, with no scrollbars provided

Explanation

"overflow: hidden" clips any content extending beyond the element's padding box without providing a way to scroll to see it.

What does the "fr" unit represent in CSS Grid, e.g. "grid-template-columns: 1fr 2fr"?

Correct Answer

A fraction of the remaining available space in the grid container, distributed proportionally among tracks using fr

Explanation

The "fr" unit divides remaining space in the grid container proportionally; "1fr 2fr" gives the second column twice the space of the first after fixed-size tracks are accounted for.

What is the purpose of the "alt", "title", and ARIA attributes for accessibility?

Correct Answer

They provide additional information to assistive technologies (like screen readers) and users, describing images, providing tooltips, and conveying roles/states of interactive elements

Explanation

These attributes help make web content perceivable and operable by assistive technologies, conveying information that might otherwise be communicated only visually.

What does the CSS "calc()" function allow?

Correct Answer

Performing mathematical calculations to determine CSS property values, optionally mixing units (e.g. "width: calc(100% - 50px)")

Explanation

calc() lets you combine different units and perform arithmetic directly in CSS values, useful for layouts that mix percentages and fixed sizes.

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

Correct Answer

"visibility: hidden" hides the element but it still occupies its layout space, while "display: none" removes it entirely from the layout, taking up no space

Explanation

visibility: hidden leaves a gap where the element would be (it's invisible but still takes up space), whereas display: none collapses the element entirely as if it weren't there.

What does the ":nth-child(2n)" pseudo-class select?

Correct Answer

Every even-numbered child element (2nd, 4th, 6th, etc.) of its parent

Explanation

:nth-child(2n) matches child elements whose position is a multiple of 2 (i.e. even-positioned children), often used for zebra-striping rows.

What is the purpose of the "data-*" custom attributes in HTML, e.g. "data-user-id=\"42\""?

Correct Answer

They allow storing custom, application-specific data on HTML elements that can be accessed via CSS attribute selectors or JavaScript's dataset property

Explanation

data-* attributes provide a standardized way to embed custom data private to the page/application, retrievable in JS via element.dataset.userId.

What does "min-width" and "max-width" allow you to do for responsive design?

Correct Answer

Constrain an element's width so it never shrinks below min-width or grows beyond max-width, while still allowing it to be flexible (e.g. percentage-based) between those bounds

Explanation

min-width and max-width set boundaries on a flexible width (often a percentage), allowing fluid layouts that don't become too small or too large.

What does the HTML5 <video> element's "controls" attribute do?

Correct Answer

Displays the browser's default playback controls (play/pause, volume, seek bar)

Explanation

The boolean "controls" attribute on <video> (or <audio>) shows the browser's native UI controls for controlling playback.

What is "CSS specificity" calculated from when comparing two selectors like "#nav .link" and ".container a"?

Correct Answer

The number and type of selectors used (IDs, classes/attributes/pseudo-classes, and elements), where "#nav .link" (1 ID + 1 class) outranks ".container a" (1 class + 1 element)

Explanation

Specificity is computed by counting ID selectors, class/attribute/pseudo-class selectors, and element/pseudo-element selectors; a selector with an ID generally outranks one without, regardless of source order (unless !important or later equal-specificity rules apply).

What does the "flex-wrap: wrap" property do in a flex container?

Correct Answer

Allows flex items to wrap onto multiple lines if they don't fit within the container's main axis

Explanation

By default flex items try to fit on one line (nowrap); flex-wrap: wrap allows them to flow onto additional lines when there isn't enough space.

What is the purpose of the <label> element in forms, and how does "for" attribute relate to it?

Correct Answer

It provides a caption for a form control; the "for" attribute (matching the input's id) associates the label with that input, so clicking the label focuses/activates the input and screen readers announce the label

Explanation

Associating a <label> with its input via "for"/"id" improves usability (clicking the label activates the control) and accessibility (screen readers announce the label when the input is focused).

What does "white-space: nowrap" do to text content?

Correct Answer

Prevents the text from wrapping onto multiple lines, keeping it on a single line even if it overflows its container

Explanation

white-space: nowrap collapses whitespace as normal but suppresses line breaks, forcing text to remain on one line (often combined with overflow/text-overflow for truncation).

What is the difference between "<script>", "<script defer>", and "<script async>"?

Correct Answer

A plain <script> blocks parsing while it downloads/executes; "defer" downloads in parallel but runs after parsing completes (in order); "async" downloads in parallel and runs as soon as ready (order not guaranteed)

Explanation

These attributes control how external scripts interact with HTML parsing: default scripts block parsing; defer preserves order and runs after parsing; async runs as soon as loaded, potentially out of order and interrupting parsing.

What does the CSS "object-fit: cover" property do for an <img> or <video> element?

Correct Answer

Scales the content to maintain its aspect ratio while filling the element's box entirely, cropping any overflow

Explanation

object-fit: cover scales the replaced content (preserving aspect ratio) so it covers the entire box, cropping parts that overflow — useful for thumbnails that should fill a fixed area without distortion.

What is the purpose of CSS custom properties (variables), e.g. "--main-color: #336699;" used as "color: var(--main-color);"?

Correct Answer

They allow defining reusable values that can be referenced throughout a stylesheet (and updated dynamically via JavaScript or media queries), reducing repetition and enabling theming

Explanation

CSS custom properties are native to CSS (no preprocessor required), can cascade and be scoped, and can be read/updated at runtime via JavaScript, enabling dynamic theming.

What does the "grid-template-areas" property allow you to do?

Correct Answer

Define named grid regions visually using a text-based template, then place items into those named areas with "grid-area"

Explanation

grid-template-areas lets you sketch a layout using named strings (e.g. "header header" / "sidebar main"), and elements assigned matching grid-area names are placed accordingly.

What does the "<picture>" element with multiple "<source>" tags enable?

Correct Answer

Serving different image resources based on conditions like viewport size or supported formats, letting the browser choose the most appropriate one

Explanation

<picture> with <source> elements (using media or type attributes) enables responsive/art-directed images and format fallbacks, with <img> as the default/fallback.

What does the CSS "::placeholder" pseudo-element style?

Correct Answer

The placeholder text shown in a form field before the user enters a value

Explanation

::placeholder lets you style the placeholder text color, opacity, and other text styles of an input or textarea.

What is the purpose of the "outline" CSS property, and why should it not simply be set to "none" for focused interactive elements?

Correct Answer

Outline draws a line around an element without affecting layout, commonly used to show keyboard focus; removing it without an alternative focus style harms keyboard-only users who rely on it to see which element is active

Explanation

The default focus outline is a key accessibility feature for keyboard navigation; if removed, a custom visible focus style must be provided instead so users can track focus.

What does "float: left" traditionally do, and why is it now mostly replaced by Flexbox/Grid for layout?

Correct Answer

It removes an element from normal flow and shifts it to the left, allowing content to wrap around it; it requires clearfix hacks to contain floated children and is less predictable than Flexbox/Grid for full layouts

Explanation

float was originally designed for wrapping text around images, and using it for whole-page layouts required workarounds like clearfix; Flexbox and Grid provide purpose-built, more predictable layout systems.

What is the difference between "<section>" and "<div>" elements semantically?

Correct Answer

<section> represents a thematic grouping of content, typically with a heading, and conveys meaning to assistive technologies and document outlines, while <div> is a generic container with no inherent semantic meaning

Explanation

Use <section> when the content represents a distinct, thematically related block (often with its own heading); use <div> purely for styling/scripting hooks with no semantic implication.

What does the CSS "gap" property do when used in a flex or grid container?

Correct Answer

Sets the spacing between rows and/or columns of flex/grid items, without adding space at the outer edges of the container

Explanation

gap (shorthand for row-gap and column-gap) creates consistent spacing between grid/flex items without requiring margins, which could otherwise add unwanted space at container edges.

What does the HTML "<button type=\"submit\">" versus "<button type=\"button\">" difference matter for?

Correct Answer

A button with type="submit" inside a <form> triggers form submission when clicked, while type="button" performs no default action and is typically used with JavaScript event handlers

Explanation

Without specifying type, a <button> inside a form defaults to "submit"; explicitly using type="button" prevents accidental form submission when the button is meant only to trigger JS logic.

What does the CSS "background-size: cover" value do for a background image?

Correct Answer

Scales the background image, preserving its aspect ratio, so it completely covers the element's background area, cropping parts that overflow

Explanation

background-size: cover scales the image up or down while preserving its aspect ratio so the entire element background is covered, cropping any excess — commonly used for hero/banner images.

What is the purpose of the "rel=\"noopener noreferrer\"" attribute on a link opened with "target=\"_blank\""?

Correct Answer

It prevents the newly opened page from gaining access to the originating window via window.opener (security) and prevents the referrer information from being sent (privacy)

Explanation

Without rel="noopener", a page opened via target="_blank" can use window.opener to manipulate the original tab, a known security risk; "noreferrer" additionally strips referrer information sent to the new page.

What does the CSS "filter" property allow, e.g. "filter: blur(5px)" or "filter: grayscale(100%)"?

Correct Answer

It applies graphical effects like blur, grayscale, brightness, or contrast directly to an element's rendered output, similar to image editing filters

Explanation

The filter property applies visual effects (blur, grayscale, brightness, contrast, drop-shadow, etc.) to the rendered element, commonly used for hover effects or image adjustments.

What is the CSS "stacking context" and how is a new one created?

Correct Answer

A stacking context groups elements along the z-axis where z-index values are only compared within that context; new stacking contexts are created by properties like positioned z-index, opacity less than 1, and transform

Explanation

z-index values only have meaning relative to siblings within the same stacking context; certain CSS properties (positioned elements with z-index, opacity, transform, filter, will-change, etc.) establish new stacking contexts, which can cause unexpected layering when nested.

What is the difference between "reflow" and "repaint" in browser rendering, and why does this matter for performance?

Correct Answer

Reflow (layout) recalculates element geometry/position (triggered by changes like width or display), while repaint redraws pixels without changing layout (e.g. color); reflow is costlier and often triggers a repaint too

Explanation

Layout-affecting changes (reflow) are costlier because they may cascade to affect many elements' positions/sizes, while paint-only changes are cheaper; minimizing layout thrashing (frequent reflows) is a key performance technique.

What does "will-change: transform" hint to the browser, and what is a risk of overusing it?

Correct Answer

It hints that the element is expected to change via transform soon, allowing the browser to optimize ahead of time (e.g. promoting to its own compositor layer); overusing it on many elements can consume excessive memory/GPU resources, hurting performance

Explanation

will-change is a performance hint for the browser to prepare optimizations (like layer promotion) before a change occurs; applying it indiscriminately to many elements can backfire by consuming significant memory for layers that may never benefit.

What is the Cascade Layers feature (@layer) in modern CSS designed to solve?

Correct Answer

It lets developers explicitly define the priority order of groups of style rules (layers), so conflicts are resolved by layer order first, making it easier to manage styles from resets, frameworks, components, and overrides predictably

Explanation

Cascade layers let authors group rules and control their relative precedence independent of selector specificity or source order within a layer, helping manage conflicts between third-party CSS, resets, and custom styles.

What is "Critical CSS" and why might it be extracted and inlined in the <head>?

Correct Answer

The minimal set of CSS needed to render the above-the-fold (initially visible) content; inlining it avoids a render-blocking request for the full stylesheet, improving perceived load performance (First Contentful Paint)

Explanation

By inlining only the styles needed for initial visible content and loading the remaining CSS asynchronously, pages can render meaningful content faster without waiting on the full stylesheet download.

How does the CSS "contain" property (e.g. "contain: layout paint") help with rendering performance?

Correct Answer

It tells the browser that an element's internal layout/paint/style effects do not affect (and are not affected by) the rest of the page, allowing the browser to limit the scope of recalculations to that element's subtree

Explanation

containment establishes a boundary so that changes inside the contained element don't require the browser to recompute layout/paint for the entire document, isolating expensive recalculations to a smaller subtree.

What is the purpose of "ARIA live regions" (e.g. "aria-live=\"polite\"")?

Correct Answer

They inform assistive technologies that content within the region may update dynamically, and how urgently to announce those changes to screen reader users (e.g. "polite" waits for a pause, "assertive" interrupts immediately)

Explanation

Live regions enable screen readers to announce dynamic content changes (like notifications or chat messages) without requiring the user to be focused on that element, with "polite" vs "assertive" controlling interruption priority.

What is the difference between "rendering" via the "content-visibility: auto" CSS property compared to lazy-loading images via "loading=\"lazy\""?

Correct Answer

"content-visibility: auto" skips rendering (layout and paint) work for off-screen content of any kind until it is near the viewport, while "loading=\"lazy\"" specifically defers the network fetch of an image/iframe until it is near the viewport

Explanation

content-visibility optimizes rendering cost for any off-screen subtree by skipping layout/paint, while native lazy-loading specifically defers fetching image/iframe resources — they address different bottlenecks (rendering vs. network) and can be used together.

What does the CSS ":is()" and ":where()" pseudo-classes allow, and what is the key difference between them?

Correct Answer

Both group multiple selectors into a concise form (e.g. ":is(header, footer) a"), but :is() takes the specificity of its most specific argument, while :where() always has zero specificity, useful for easily-overridable base styles

Explanation

These functional pseudo-classes simplify writing combined selectors; the specificity difference (:is() contributes its most specific argument's specificity, :where() contributes none) makes :where() particularly useful for low-priority resets that are easy to override.

What is a "Flash of Unstyled Content" (FOUC) and what commonly causes it?

Correct Answer

A brief moment where a page is rendered with browser default styles before the author's CSS finishes loading and applying, often caused by render-blocking CSS loaded late, @import chains, or certain font-loading strategies

Explanation

FOUC occurs when the browser renders content before stylesheets are applied, briefly showing unstyled (default) content; placing CSS links early in <head> and avoiding render-blocking delays helps prevent it.

What is the purpose of CSS "logical properties" like "margin-inline-start" versus physical properties like "margin-left"?

Correct Answer

Logical properties adapt to the document's writing mode and text direction (LTR vs RTL), so "margin-inline-start" maps to "margin-left" in LTR but "margin-right" in RTL, simplifying internationalized layouts

Explanation

Logical properties reference flow-relative directions (block/inline, start/end) rather than fixed physical directions, automatically adapting layouts for different writing modes and text directions without separate RTL-specific overrides.

What does the "isolation: isolate" CSS property do, and when is it useful?

Correct Answer

It creates a new stacking context without requiring other properties like position or z-index, useful for ensuring blend modes (mix-blend-mode) or z-index layering apply only within a subtree without affecting the rest of the page

Explanation

isolation: isolate establishes a stacking context purely for isolation purposes (e.g. to contain mix-blend-mode effects to a subtree) without the side effects of other stacking-context-triggering properties like forcing positioning.

How does the CSS "@supports" rule enable progressive enhancement?

Correct Answer

It allows conditionally applying a block of CSS only if the browser supports a specified CSS feature/property value, letting authors provide enhanced styles for capable browsers while falling back gracefully for others

Explanation

@supports performs feature queries (e.g. "@supports (display: grid)"), allowing CSS to adapt based on actual browser capability rather than guessing via browser detection, a core technique of progressive enhancement.

What is the significance of the "loading" attribute value "lazy" on an <iframe>, and what is a potential downside if applied to above-the-fold content?

Correct Answer

It defers loading the iframe's content until it is near the viewport, improving initial page load performance; however, applying it to above-the-fold iframes can delay the appearance of important visible content, hurting perceived performance

Explanation

Lazy loading is beneficial for off-screen resources to reduce initial load cost, but applying it to content visible immediately on load can counterproductively delay rendering of that content.

What does the CSS "@font-face" rule's "font-display" property control, e.g. "font-display: swap"?

Correct Answer

How a web font is displayed during the loading period — "swap" shows fallback text immediately and swaps to the custom font once loaded, reducing invisible text but potentially causing a layout shift (FOIT vs FOUT trade-off)

Explanation

font-display controls the font loading timeline's "block" and "swap" periods, balancing between a Flash of Invisible Text (FOIT) and a Flash of Unstyled Text (FOUT) with potential layout shift when the custom font swaps in.

What is the difference between "inline", "inline-block", and "block" display values regarding layout behavior?

Correct Answer

"block" elements take the full available width and start on a new line; "inline" elements flow within text and ignore width/height/vertical margins; "inline-block" flows like inline but respects width, height, and margins like a block

Explanation

inline-block combines behaviors: it sits inline with surrounding content (no forced line break) but, unlike pure inline elements, respects box model properties like width, height, and vertical margin/padding.

What problem does "container queries" (e.g. "@container (min-width: 400px) { ... }") solve compared to traditional media queries?

Correct Answer

They allow styling an element based on the size of its containing element (a designated "container"), rather than the viewport, enabling truly modular components that adapt regardless of where they are placed on the page

Explanation

Container queries enable component-level responsiveness — a card component can adapt its layout based on the width of its parent container, regardless of the overall viewport size, supporting more reusable design systems.

How does the browser's rendering pipeline order (Parse HTML → Build DOM/CSSOM → Render Tree → Layout → Paint → Composite) explain why CSS placed at the top of <head> is generally recommended?

Correct Answer

Because the render tree (combining DOM and CSSOM) is needed before layout and paint can occur, render-blocking CSS must be downloaded and parsed first; placing it early lets this happen sooner, minimizing the time the page stays blank

Explanation

Since CSSOM construction blocks render tree creation (and thus first paint), discovering and downloading CSS as early as possible in the document reduces the time before the browser can render anything.

What is the purpose of the "prefers-reduced-motion" media feature?

Correct Answer

It detects a user-level OS setting indicating the user prefers minimal animations/motion (often for vestibular disorders or motion sensitivity), allowing sites to disable or reduce non-essential animations accordingly

Explanation

@media (prefers-reduced-motion: reduce) lets developers respect an accessibility preference set at the OS level, reducing or removing animations for users sensitive to motion.

What does the CSS "aspect-ratio" property allow you to do, and how did developers commonly achieve this effect before it was introduced?

Correct Answer

It lets an element maintain a specified width-to-height ratio (e.g. "aspect-ratio: 16/9") even as its size changes; previously this was commonly achieved with the "padding-top percentage hack" on a wrapper element

Explanation

aspect-ratio provides a direct, declarative way to maintain proportional dimensions for responsive elements (like video embeds), replacing the older technique of using a percentage padding-top on a relatively positioned wrapper to reserve aspect-ratio-correct space.