HTML/CSS quiz — 75 questions with answers and explanations

Answer: D

position: absolute takes the element out of the document flow and positions it relative to the nearest ancestor whose position is not static (relative/absolute/fixed/sticky). If no ancestor is positioned, the reference is the initial containing block — visually the same as positioning against the page. That's why you usually set position: relative on the parent to serve as the reference.

Answer: C

Grid is a 2-dimensional layout system — it controls rows and columns at the same time, good for overall page structure (header/sidebar/main). Flexbox is 1-dimensional — it distributes items along a single axis (row or column), good for navigation bars, button rows, internal cards. They complement each other and are often nested within the same page.

Answer: C

Because <span> is an inline element by default: it only takes the width of its content and ignores width/height and vertical margins. To set a size, change to display: inline-block (stays on the same line, accepts width/height) or display: block (takes the full row, starts a new line).

Answer: A

A pseudo-class (one :) selects a real element by state or position: :hover, :focus, :first-child, :nth-child(). A pseudo-element (two ::) creates or selects a virtual part not present in the DOM: ::before, ::after, ::first-line, ::placeholder. Quick memory: class = filter condition, element = generate an extra "piece" of an element.

Answer: A

Use alt="" (empty string, but keep the attribute). This is the standard signal for screen readers to skip decorative images. Omitting alt entirely is wrong — a screen reader may read the filename instead. Three-case rule: informative image → briefly describe the content; image is a link → describe the destination; decorative image → alt="".

Answer: A

id must be unique across the page, each value belongs to only one element — used for anchor links (#section) and getElementById(). class is reusable: many elements can share the same class, and one element can carry multiple classes. In CSS, #id has higher specificity than .class, making it harder to override — so prefer classes for styling.

Answer: D

Use <section> when a block of content has its own topic, usually with a heading — e.g., a product page with a description section, a reviews section, a specs section. Use <div> when you just need a box for styling or layout, with no content meaning. Screen readers recognize <section> as a content region; <div> is semantically invisible.

Answer: A

Only paragraph A. .card > p uses the child combinator (>) so it only matches <p> that is a direct child of .card. Paragraph B is nested inside <section> — a grandchild, not a child — so it is excluded. To select both A and B, use the descendant combinator (space): .card p, which matches all descendant levels.

Answer: D

The text is red. When two rules have equal specificity, the cascade breaks the tie by source order: the rule that appears later in the source (or in a stylesheet loaded later) wins. This is why stylesheet import order matters — the override file must come after the base file. Source order is only considered once specificity is tied; if specificity differs, it doesn't come into play.

Answer: C

width: 50% is calculated relative to the width of the parent element (the containing block) — an 800px parent gives a 400px child, and if the parent resizes the child recalculates. Contrast with other units: 50vw is relative to the viewport, rem to the html font-size, and px is a fixed value that depends on nothing.

Answer: D

Two standard ways: (1) set the label's for to match the input's id — <label for="email">Email</label><input id="email">; (2) wrap the input inside the label — <label>Email <input></label>. This association makes clicking the text focus/check the input (a bigger tap target on mobile) and lets screen readers announce the correct input name. A placeholder is not a substitute for a label.

Answer: B

Use visibility: hidden — the element is invisible but its box still takes up space, so the surrounding layout doesn't shift. For comparison: display: none removes it from layout entirely (space is gone, later elements move up); opacity: 0 also keeps the space but still receives mouse events — users can accidentally click something they can't see.

Answer: C

border is part of the box model — drawn between padding and margin, it takes up space, so it makes the element bigger and pushes the layout; it can be set per side and rounded with border-radius. outline is drawn on top of / outside the border and takes up no space, so it doesn't shift the layout; it can't be set per side, and is pushed outward with outline-offset. The outline is the browser's default focus indicator.

Answer: A

The browser switches to quirks mode — a compatibility mode for pages written before the standards. The box model and many other layout rules are interpreted the old way, so the page renders differently from what you expect.

Answer: D

It tells mobile browsers to use the actual device width as the viewport width. Without it, browsers assume the page was designed for roughly a 980px-wide screen and scale it down — text becomes tiny and media queries match against the wrong number.

Answer: B

Because heading levels create the page's table-of-contents structure. Screen reader users navigate by jumping between headings and rely on the hierarchy to understand how the content is organized. Font size should be decided by CSS, entirely separate from level selection.

Answer: B

Use an anchor when the action takes the user to a different address — another page or a position within the same page. Use a button when the action does something: submits a form, opens a dialog, deletes an item. Visual styling is set with CSS and is unrelated to the choice of tag.

Answer: C

Because people with colour blindness can't tell them apart, and screen readers don't convey colour at all. An input that only turns its border red to signal an error is invisible to both groups. Always add another signal: an icon, text, or a change in shape.

Answer: C

The table tag, because it carries the semantics of row-column relationships. Screen readers announce the matching column header as the user moves between cells — something a grid built from divs does not provide.

Answer: D

Declare an appropriate input type, or declare the desired keyboard mode. Mobile browsers pick the keyboard based on those declarations, and this is the only way to influence it.

Answer: C

The element is exactly 200px wide. box-sizing: border-box makes width include content + padding + border, so the browser shrinks the content to 150px (200 − 20×2 − 5×2) instead of growing the element. With the default content-box, the same CSS would give a width of 250px.

Answer: C

The text is red. Specificity is computed across 3 columns (ID, class, element): #nav a = (1,0,1) beats .menu .item a = (0,2,1), ul li a.active = (0,1,3) and a = (0,0,1). Comparing left to right, the higher ID column wins immediately — you can't stack multiple classes to beat one ID.

Answer: B

The two most common causes: (1) no offset declared — sticky requires at least one of top/right/bottom/left as the stick threshold; (2) an ancestor with overflow other than visible (hidden/auto/scroll) changes the scroll reference area and the element never reaches the threshold. Also, sticky only sticks within its parent — if the parent is too short, it gets pushed away as soon as it sticks.

Answer: A, D, E

Three correct benefits: (1) SEO — search engines understand the page structure; (2) Accessibility — screen readers navigate by landmark; (3) Maintainability — the code is self-describing. Semantic HTML does NOT make the page render faster or automatically responsive — that's the job of CSS and resource optimization.

Answer: C

font-size = 40px, padding = 16px. Rule: em in a font-size declaration references the parent's font-size (2 × 20px = 40px); rem always references the root html font-size (1 × 16px = 16px), no matter how deeply nested the element is. That's why rem is more predictable than em with multiple levels of nesting.

Answer: A

CSS custom properties are runtime CSS properties: declare --primary: #2563eb (usually in :root for global, but allowed on any selector), use via var(--primary), with fallback var(--x, blue). They participate in cascade and inheritance, and can be changed by JS at runtime — unlike SASS variables, which disappear after compile.

Answer: B, D, E

Inherited: color, font-family, line-height (the typography/text group in general: font-size, letter-spacing, text-align... also inherit). Not inherited: margin, border and the box model group (padding, width, background). Quick rule: text-related properties inherit, box-related properties don't.

Answer: C

Both async and defer download in parallel without blocking HTML parsing. They differ in execution timing: async runs as soon as it finishes downloading (order not guaranteed — good for independent analytics); defer waits until HTML parsing completes, runs before DOMContentLoaded, and preserves tag order — so b.js always runs before c.js. Both only apply to external scripts.

Answer: D

aspect-ratio: 16 / 9 gives the box a preferred ratio: with only width (100%), the browser derives the height right at layout time — before the image loads. That way the frame is reserved and content below doesn't jump when the image appears (reduced CLS). It doesn't crop the image — that's object-fit's job.

Answer: B

sizes declares up front how wide the image will be ("50vw at ≥768px, otherwise 100vw") so the browser can pick a source from srcset at preload time — before CSS layout finishes. It multiplies that width by the DPR and picks the nearest image: viewport 375px, DPR 2 → 100vw = 750px device → loads img-800. sizes doesn't style the image; declaring it wrong versus the real CSS picks the wrong image.

Answer: D

The recommendation is progressive enhancement: no animation by default, then wrap motion in @media (prefers-reduced-motion: no-preference). This is a preference the user declares at the OS level (often due to vestibular disorders — strong motion causes dizziness, nausea), not a performance signal. Avoid * { animation: none !important } — code waiting on animationend will hang.

Answer: B

:focus matches every time an element receives focus, including mouse clicks — causing the outline many people want to remove. :focus-visible lets the browser judge when an indicator is needed: keyboard navigation matches, clicking a button usually doesn't. The standard pattern: style the ring on :focus-visible, so no one has a reason to write bare outline: none — which breaks the keyboard user experience.

Answer: A

justify-content aligns on the main axis (horizontal for row) → packs items to the center of the row. align-items aligns on the cross axis (vertical) → items hug the top edge. align-self overrides align-items for a single item, so .special is stretched to full height. Switch to flex-direction: column and the axes swap: justify-content becomes vertical, align-items horizontal.

Answer: C

transition interpolates between an old and a new state, needs a trigger (hover, class change, inline style change) and only goes one A→B step. animation + @keyframes defines multiple stops (0%…100%), runs on render without an event, and supports looping, alternate direction, and fill modes. Use transition for simple interactions, animation for multi-step or automatic motion.

Answer: D

Base padding: 16px applies to every screen; the min-width: 768px block only activates from 768px up and overrides it to 32px. So a 375px phone keeps 16px, a 1280px desktop gets 32px. Mobile-first = write base styles for small screens then widen with min-width (matches from the threshold up); desktop-first is the reverse, using max-width (matches from the threshold down).

Answer: C

z-index only applies to positioned elements (position other than static) and to flex/grid items. .box-a is static by default, so its z-index: 100 is ignored entirely, letting .box-b (which is position: relative) cover it. Fix: add position: relative (or absolute/fixed/sticky) to .box-a. This is the most common z-index bug — a huge number but forgot to set position.

Answer: D

The data travels in the URL query string instead of the request body, which makes results shareable and bookmarkable — good for search and filtering. In exchange, the data is exposed in browser history, server logs, and Referer headers.

Answer: B

They validate in the browser before form submission, with default error messages and no JavaScript needed. But they are only user experience: anyone can bypass them with devtools or by sending the request directly, so the server must validate again.

Answer: A

They store arbitrary data on an element in a valid way. JavaScript reads them through the dataset property, and CSS can select them with an attribute selector. The names after the prefix are converted to camelCase when accessed from JavaScript.

Answer: A

It allows choosing a completely different image or file format conditionally — different crops for portrait and landscape screens, or a new format with a fallback. Source-selection attributes only change the size of the same image.

Answer: C

Indicates whether the header cell describes a row or a column. Screen readers use that to announce the matching header as the user moves between cells — without it, the user hears a string of numbers with no idea which column they belong to.

Answer: B

Applies a default set of restrictions to the embedded content: blocks scripts, blocks form submission, treats the content as a separate origin, blocks opening new windows. Each capability is re-enabled by a corresponding value in the list, so you grant only exactly what is needed.

Answer: D

With the default direction of a row, justify-content aligns along the main axis (horizontal) and align-items aligns along the cross axis (vertical). Changing the container direction to column swaps the two axes, so these two properties swap the direction they act on as well.

Answer: D

flex-grow: 1; flex-shrink: 1; flex-basis: 0%. The key point is that the base size is 0 rather than auto — meaning the entire width is divided according to the grow factor ratios, independent of the content inside.

Answer: D

Lets you name areas and then draw the layout with strings right in the CSS, each string being one row. Child elements only need to declare the name of the area they belong to. This makes the layout visible in the code and changing it for a media query is just rewriting the diagram.

Answer: A

When the container is wider than the number of items needed, the first collapses the empty tracks so items can stretch to take that space; the second keeps the empty tracks so they still occupy space in the grid, so items are usually narrower than with the first when there are few items.

Answer: A

The grid automatically creates additional implicit rows to hold the element. These rows are sized to fit the content by default, and this can be adjusted with the property that declares the size of auto-generated rows. The same mechanism applies to columns.

Answer: C

Because it only creates spacing between elements, not at the two ends. With margins, the first or last element also gets leftover margin, so you have to write extra selectors to exclude it. It also combines both axes into one property and does not suffer from margin collapsing.

Answer: B

The first form matches when the value is exactly equal to the given string. The second matches when the value contains that string anywhere. Attribute selectors also have operators for prefix, suffix, and for a whitespace-separated word list.

Answer: B

The first counts the position among all sibling elements, then checks whether the element at that position matches. The second counts only among elements of the same tag type. When tag types alternate, the two selectors give completely different results.

Answer: B

Because it jumps out of the normal cascade: a declaration with this keyword is only overridden by another declaration that also has it with higher specificity. The result is an escalation race, and in the end nobody knows which rule is winning.

Answer: A

Because it takes the viewport height for the state where the address bar is hidden. When the address bar is visible — the initial state when you land on the page — the bottom of the element is cut off. The newer units with min, max, and dynamic prefixes solve exactly this problem.

Answer: D

The width of the digit 0 in the current font. Because it tracks the font, this unit is useful for limiting text line length: a max width of about 60 to 75 of these units gives readable line lengths regardless of font size.

Answer: C

The opacity property applies to the whole element including child content, so text inside becomes faded too. A background with an alpha channel makes only the background translucent while the text stays fully crisp. Also, an opacity value below 1 creates a new stacking context.

Answer: D

Because the unitless value is inherited as a ratio and gets multiplied by each child element's own font size. A value with a unit is computed once at the parent and inherited as that fixed number — so a child with a larger font size will have overlapping lines.

Answer: B

Show text with the fallback font immediately, then swap to the real font once it loads. Users can read right away instead of seeing blank space — at the cost of one font-swap flash.

Answer: D

Because changing position via positioning properties forces the browser to recalculate layout and then repaint, while a transform only affects the composite step — the last and cheapest step. For animations running at 60 frames per second, this difference decides smoothness.

Answer: C

The first casts a shadow based on the box's rectangle (rounded according to the set radius). The filter casts a shadow based on the actual shape of the content — so with images that have transparent backgrounds or clipped elements, only the second gives a shadow that follows the true outline.

Answer: C

The content behind the element, not the element itself. This is how you create a frosted-glass effect: the element has a partially transparent background and everything under it gets blurred. To see the effect, the element's background must be partially transparent.

Answer: D

It positions against the transformed ancestor. Any ancestor with a transform, filter, or a few other properties creates a new containing block, and the fixed-position element anchors to that instead of the viewport — so it scrolls with the page.

Answer: A

Base them on where the layout actually starts to break — shrink the window gradually and place the breakpoint right where content no longer fits. Choosing specific device sizes goes stale quickly, since the device list changes every year.

Answer: D

4.5:1 for normal text. Large text — 18pt or larger, or 14pt if bold — only needs 3:1. Non-text UI components like input borders and icons also need 3:1.

Answer: D

Keyboard and screen reader users. Without it, they have to Tab through the entire navigation menu — sometimes dozens of links — on every page before reaching the main content.

Answer: C

It tells the screen reader to watch that region and announce new content once the user stops interacting. Without it, dynamic changes — error messages, updated search results, cart counts — happen silently for anyone who can't see the screen.

Answer: D

How much content shifts position after it has already been displayed. It's calculated as the affected area multiplied by the shift distance. It's a metric about experience, not speed: users click the wrong button because content jumps right as they touch it.

Answer: A

Start loading the font early instead of waiting for the browser to discover it through CSS. Fonts sit at the end of the dependency chain — HTML, then CSS, then the font — so they usually load very late and cause text to shift when swapping from the fallback font.

Answer: C

It follows the writing direction of the content instead of the physical side. For Vietnamese or English, it's equivalent to the left margin; for Arabic, which is written right to left, it becomes the right margin. One stylesheet serves both directions.

Answer: B

Use the property that decides how the image fills the frame. A fill value crops the excess but keeps the aspect ratio; a fit value scales the whole image and leaves empty space on the sides.

Answer: D

It follows the language's writing direction instead of the physical screen direction. In a right-to-left language, the same declaration yields the margin on the opposite side — so the layout mirrors itself without rewriting the styles.

Answer: D

Use the group of properties that limit the number of lines of a text block — a multiline box display with a max line count that hides the overflow. The single-line truncation property only handles content that does not wrap.

Answer: B

Declare scroll-margin-top on the target elements, matching the navigation bar's height. The browser reserves that space when scrolling to them, so no hidden element or script calculation is needed.

Answer: C

The element does not receive mouse events, and events pass through to the layer below. It is useful for decorative overlays, but it also disables any buttons inside if mistakenly applied to a whole block.

Answer: B

Declare that the string may break between words when it is too long. A continuous string with no spaces — an email address, a path, a transaction code — does not wrap on its own and so overflows the frame.

Answer: C

One value fills the box and crops the excess, the other shows the whole image and leaves empty space. Both preserve the original aspect ratio; the only difference is whether filling or showing the full image takes priority.

Answer: B

It applies a group of rules only when the browser supports the named feature. That lets you write a fallback for old browsers and an enhanced version for new ones in the same stylesheet.