HTML & CSS interview questions and answers

Q: How would you make a custom-styled button (built from a ) accessible to keyboard and screen-reader users?

Answer: A native gives you keyboard focus, Enter/Space activation, and a screen-reader announcement of 'button' automatically. A gives you NONE of that, so you'd need to manually replicate all of it — which is exactly why the advice is almost always 'just use a real and style it', rather than doing this. But if you're stuck with a div (e.g. inside a component library constraint), you need to add: 1. tabindex="0" — makes it focusable via Tab. 2. role="button" — tells assistive tech to announce it as a button. 3. A keydown handler for Enter AND Space — native buttons activate on both; click alone only fires on mouse/Enter, not Space. 4. A visible focus style (:focus-visible), since divs don't get one by default the way buttons do. This is the core idea behind ARIA: it only adds the announced ROLE and STATE, it does not add any actual behavior — you still have to implement the keyboard handling yourself. Analogy: a real comes with keyboard support and screen-reader announcements built in, like a car with airbags already installed. Turning a into a 'button' with ARIA is like bolting on the airbag label without actually installing the airbag — you still have to wire up the real safety mechanism (the keyboard handlers) yourself. In an interview: A div has no built-in focusability, keyboard activation, or screen-reader role, so you'd need to add tabindex="0", role="button", a keydown handler for both Enter and Space, and a visible focus style. ARIA only adds the announced role, not the behavior, which is why using a real button and styling it is almost always the better fix.

Question 1

What is the difference between an element, a tag, and an attribute?

Accepted Answer

Answer: A tag is the markup itself, like

or

— the opening and closing markers. An element is the whole thing: the opening tag, its content, and the closing tag together (

Hello

is one element). An attribute is extra information placed inside the opening tag, like class="box" or src="img.png", giving the browser more detail about that element. Some elements are 'void' / self-closing and have no closing tag or content, like ,
, and . Analogy: the tag is the label on a box, the element is the whole box with its contents, and the attribute is a sticky note giving extra instructions about that box. In an interview: A tag is the opening/closing marker itself, an element is the full tag-content-tag unit, and an attribute is extra info inside the opening tag. Some elements like img and input are void and self-close with no content.

Question 2

What is the difference between id and class, and when should you use each?

Accepted Answer

Answer: id must be UNIQUE on the page — exactly one element can have a given id. It's used for JavaScript hooks (getElementById), fragment links (#section), and form label associations. It also carries the highest specificity of the common selectors, which is exactly why it's risky to style with. class can be applied to MANY elements, and one element can have MULTIPLE classes (class="card featured"). It's the standard way to apply shared, reusable CSS styling. Rule of thumb: use class for styling (reusable, low specificity, easy to override), reserve id for unique JS/anchor hooks, not for CSS. Analogy: id is a person's passport number: exactly one per person, used for precise identification. class is a group membership badge: many people can wear the same one, and one person can wear several at once. In an interview: id must be unique per page and is best reserved for JS hooks or anchors; class can repeat across elements and an element can have several, making it the right tool for reusable styling because it has lower specificity.

Question 3

What is the difference between block-level and inline elements?

Accepted Answer

Answer: A block-level element starts on a new line, stretches to fill its parent's width by default, and accepts width/height/margin/padding on all sides. Examples: div, p, h1–h6, ul, section. An inline element flows within the surrounding text, only takes up as much width as its content, and does NOT respect top/bottom margin or an explicit width/height (they're ignored or behave oddly). Examples: span, a, strong, em. There's a third category, inline-block, which flows inline like text but DOES accept width, height, and full margin/padding — commonly used for things like nav links you want side-by-side but sized explicitly. Analogy: block elements are paragraphs in a book: each starts its own new line and takes the full width. Inline elements are individual words within a sentence: they just sit in the flow of text, only as wide as themselves. In an interview: Block elements start a new line and fill available width, accepting all margin/padding/sizing. Inline elements flow within text, size to their content, and ignore vertical margin and explicit height. inline-block is the middle ground: flows inline but respects full box-model sizing.

Question 4

What is the difference between localStorage, sessionStorage, and cookies?

Accepted Answer

Answer: All three store small amounts of data in the browser, but differ in lifetime and where they're visible. localStorage: persists indefinitely (until explicitly cleared), shared across all tabs of the same origin, ~5-10MB limit, never automatically sent to the server. sessionStorage: cleared when the TAB closes, and is per-tab — even two tabs of the same site have separate sessionStorage. Same size limit as localStorage, also never sent to the server automatically. Cookies: much smaller (~4KB), can have an expiry date, and — unlike the other two — are AUTOMATICALLY attached to every matching HTTP request to the server, which is why they're used for authentication sessions. They can also be marked httpOnly (invisible to JavaScript, safer against XSS). Analogy: localStorage is a filing cabinet that stays put forever. sessionStorage is a notepad that gets thrown out when you leave the room (close the tab). A cookie is a name badge you automatically show to the receptionist (the server) every time you walk by, unlike the other two which you'd have to hand over yourself. In an interview: localStorage persists indefinitely and is shared across tabs; sessionStorage is cleared per-tab when it closes; both are JS-only and never sent to the server. Cookies are small, can expire, and are automatically sent with every matching HTTP request, which is why they're used for auth sessions.

Question 5

What is semantic HTML, and why does it matter?

Accepted Answer

Answer: Semantic HTML means choosing elements that describe their MEANING, not just their appearance —

,

Question 6

What is the difference between

and , and when do you use each?

Accepted Answer

Answer: Both are generic containers with no inherent meaning, used purely for grouping/styling — the difference is display type.

is block-level: starts on a new line, takes full available width. Use it to group larger chunks of content — a card, a section wrapper, a form group. is inline: sits within a line of text without breaking it. Use it to wrap a small piece of text or an icon you want to style differently WITHOUT disrupting the surrounding text flow, like highlighting one word in a sentence. Analogy: a

is a cardboard box you'd use to group several items together on a shelf. A is a highlighter you'd drag across a single word in a sentence without moving anything else. In an interview: Both are meaningless generic containers; div is block-level for grouping larger chunks, span is inline for styling a small piece of text or icon without breaking the surrounding flow.

Question 7

How would you make a custom-styled button (built from a

) accessible to keyboard and screen-reader users?

Accepted Answer

Answer: A native

Question 8

How does CSS specificity work, and how do you calculate which rule wins?

Accepted Answer

Answer: When multiple CSS rules target the same element with the same property, specificity decides which one wins (before considering source order or !important). Specificity is scored as a tuple, roughly (inline styles, IDs, classes/attributes/pseudo-classes, elements): - Inline style (style="") beats everything. - ID selectors (#header) are worth more than any number of classes. - Class, attribute, and pseudo-class selectors (.card, [type=text], :hover) are next. - Element/tag and pseudo-element selectors (div, ::before) are the lowest. Higher category always wins regardless of count: one #id beats a hundred .classes. Within the SAME specificity, the rule that appears LATER in the stylesheet wins. !important overrides normal specificity entirely (and should be used sparingly, since it breaks the normal cascade). Analogy: specificity is a tie-breaker system like military rank: one general (#id) outranks a hundred soldiers (.class), no matter how many soldiers you have. Only if both sides send the same rank does 'who spoke last' (source order) decide. In an interview: Specificity is scored inline > id > class/attribute/pseudo-class > element, and a higher category always beats any number of a lower one. Equal specificity falls back to source order, last rule wins. !important overrides the whole system and should be used sparingly.

Question 9

What is the box model, and what's the difference between content-box and border-box?

Accepted Answer

Answer: Every element's rendered box is made of four layers, from inside out: content, padding, border, margin. Width/height, padding, and border together determine the element's rendered size; margin is space OUTSIDE the box, between it and its neighbors. box-sizing: content-box (the default) means width/height apply ONLY to the content area — padding and border are added on TOP of that, so the element ends up bigger than the width you set. box-sizing: border-box means width/height include padding and border, so the box you set width:200px on is EXACTLY 200px total, and padding/border eat into the content area instead of adding to it. Most modern CSS resets set border-box globally because it's far more predictable. Analogy: content-box is ordering a '10-inch pizza' where the box adds extra size on top for the crust and packaging, so the actual box you receive is bigger than 10 inches. border-box is ordering a box that's guaranteed to be exactly 10 inches total, with the pizza shrinking to fit inside it. In an interview: The box model is content, padding, border, and margin from inside out. content-box (default) adds padding and border on top of the set width, making the box bigger than specified; border-box includes them in the set width, so the total size stays exactly as declared — which is why most resets set it globally.

Question 10

What's the difference between visibility: hidden, display: none, and opacity: 0?

Accepted Answer

Answer: All three make an element invisible, but differ in layout impact and interactivity. display: none: removes the element from the layout ENTIRELY — no space reserved, not in the accessibility tree, not clickable, not focusable. Neighboring elements shift to fill the gap. visibility: hidden: element is invisible but STILL takes up its layout space — neighbors don't shift. Not clickable. Its children CAN override it back with visibility: visible. opacity: 0: element is fully transparent, still takes up space, and — the key gotcha — is STILL clickable and focusable, since opacity doesn't affect layout or interaction, only rendering. Also the only one of the three that can be smoothly transitioned/animated by CSS (you can't animate display or visibility directly the same way). Analogy: display:none is removing a chair from the room entirely. visibility:hidden is an invisible chair still taking up floor space that you'd bump into if you didn't know better, but can't actually sit on. opacity:0 is a completely transparent, but fully solid and sittable, chair — you can still trip over it and use it. In an interview: display:none removes the element from layout and interaction entirely. visibility:hidden keeps its layout space but removes interaction. opacity:0 keeps both layout space and interactivity — it's only visually transparent — which is the classic gotcha for invisible elements accidentally blocking clicks, and it's also the only one of the three that animates smoothly.

Question 11

What is the difference between position: relative, absolute, fixed, and sticky?

Accepted Answer

Answer: All four change how an element is positioned, relative to different reference points. static (default): normal document flow, top/left/etc. have no effect. relative: stays in normal flow (space is still reserved), but top/left/etc. shift it visually from where it WOULD have been. Also commonly used just to create a positioning context for an absolute child, without moving itself. absolute: removed from normal flow (no space reserved, siblings ignore it), and positioned relative to its nearest ANCESTOR that has position other than static. If no ancestor is positioned, it falls back to the initial containing block (roughly the page). fixed: removed from flow, positioned relative to the VIEWPORT, and stays in place even when the page scrolls — used for sticky headers/modals that shouldn't move. sticky: behaves like relative until the element crosses a scroll threshold you set (e.g. top: 0), then it 'sticks' like fixed within its parent's bounds, then unsticks when the parent scrolls out of view. Analogy: static is a leaf floating in the normal river current. relative is that leaf nudged slightly sideways but still floating in the same current, leaving a leaf-shaped gap where it would have been. absolute is a leaf plucked out and pinned to a specific spot on a nearby wall (its nearest positioned ancestor). fixed is pinned to the window frame itself, not the wall — it never moves even if the wall scrolls. sticky is a leaf that floats normally, until it hits a marked point, where it 'catches' and stays as you keep scrolling, until its container passes by. In an interview: relative nudges an element visually while keeping its layout space, and often sets up positioning context for children. absolute removes it from flow and positions against the nearest positioned ancestor. fixed removes it from flow and pins it to the viewport regardless of scroll. sticky acts relative until a scroll threshold, then sticks like fixed within its parent's bounds.

Question 12

What is Flexbox, and what do justify-content and align-items each control?

Accepted Answer

Answer: Flexbox is a one-dimensional layout system — it arranges items along a single axis (row or column) inside a container with display: flex. The MAIN axis is the direction items flow (row by default, left-to-right). The CROSS axis is perpendicular to that. justify-content controls alignment along the MAIN axis (e.g. spacing items horizontally in a row: flex-start, center, space-between, space-around). align-items controls alignment along the CROSS axis (e.g. vertically centering items within a row: flex-start, center, stretch). Mixing these up is the most common Flexbox confusion — remember they swap meaning if you set flex-direction: column, since the main axis becomes vertical. Analogy: picture a row of items on a shelf. justify-content decides how they're spaced left-to-right ALONG the shelf (the main axis). align-items decides how tall/short items line up top-to-bottom ACROSS the shelf's height (the cross axis). In an interview: Flexbox is one-dimensional layout along a main and cross axis. justify-content aligns items along the main axis (horizontal spacing in a row), align-items aligns along the cross axis (vertical alignment in a row). The two swap meaning if flex-direction is column.

Question 13

What's the difference between Flexbox and CSS Grid, and when would you use each?

Accepted Answer

Answer: Flexbox is ONE-dimensional — it lays items out along a single row OR column, and items can wrap, but Flexbox doesn't let you control both rows AND columns as a coordinated grid at once. Grid is TWO-dimensional — you define rows and columns together, and can place items into specific cells, span multiple rows/columns, and even leave gaps, with alignment control on both axes simultaneously. Rule of thumb: use Flexbox for a single row or column of items — a navbar, a button group, cards flowing in one direction. Use Grid when you need actual rows AND columns to line up together — an overall page layout, a photo gallery, a dashboard with cards of different sizes. They also combine well: Grid for the page's overall structure, Flexbox inside individual grid cells for aligning their content. Analogy: Flexbox is arranging books along a single shelf — you can space and align them along that one shelf, wrapping to a new shelf if needed, but each shelf doesn't coordinate with the others. Grid is a full bookcase, with shelves and columns both explicitly planned out, so a book can be told to span two shelves and three columns at once. In an interview: Flexbox handles one-dimensional layout, a single row or column. Grid handles two dimensions, rows and columns coordinated together, with items placeable and spannable across cells. Use Flexbox for linear groups like navbars, Grid for overall page or gallery layouts — and they combine well together.

Question 14

What does flex: 1 actually mean, and how does it differ from just setting width?

Accepted Answer

Answer: flex is shorthand for three properties: flex-grow, flex-shrink, flex-basis. flex: 1 expands to flex-grow: 1; flex-shrink: 1; flex-basis: 0%. flex-basis: 0% means the item starts with essentially zero base size, THEN flex-grow: 1 says 'take an equal share of any leftover space' — so with several flex: 1 siblings, they end up EQUAL width regardless of their content, because they're all growing from the same zero starting point. This is different from just setting a fixed width, which is a hard number that won't grow or shrink to fill the container. It's also different from flex: auto, where flex-basis is auto (based on content size), so items with more content start bigger and grow from there — NOT necessarily ending up equal. Analogy: flex: 1 is telling several people 'you all start from zero and split whatever's left equally', so they end up the same size no matter how much they were each originally holding. A fixed width is telling one person 'you get exactly this much, no more, no less', full stop. In an interview: flex: 1 is shorthand for grow:1, shrink:1, basis:0%, meaning the item starts from zero and takes an equal share of remaining space, so several flex:1 siblings end up equal width regardless of content. That differs from a fixed width, which never grows or shrinks, and from flex: auto, where basis follows content size so items start unequal.

Question 15

How do you center a div both horizontally and vertically?

Accepted Answer

Answer: There are several valid approaches; the most common modern one is Flexbox on the PARENT: 1. Flexbox: display: flex; justify-content: center; align-items: center; on the parent. Simple, works for dynamic content sizes, most common answer today. 2. Grid: display: grid; place-items: center; on the parent — arguably even shorter. 3. Absolute positioning + transform: for a child of known or unknown size, position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); — useful when you can't touch the parent's display type. 4. margin: auto trick: for a child with a FIXED width/height, position: absolute; inset: 0; margin: auto; also centers it. In an interview, leading with the Flexbox or Grid answer is expected — it's the standard modern solution. Analogy: centering used to be one of CSS's classic pain points, joked about across the industry. Flexbox and Grid turned it into a one-line parent property instead of a bag of old hacks. In an interview: The standard modern answer is display: flex with justify-content: center and align-items: center on the parent, or the shorter display: grid; place-items: center. When you can't change the parent's layout, absolute positioning with top/left 50% and a translate(-50%, -50%) transform also centers it.

Question 16

What is a media query, and what's the difference between mobile-first and desktop-first?

Accepted Answer

Answer: A media query is a CSS rule that applies styles only when a condition is met, most commonly viewport width: @media (min-width: 768px) { ... }. Mobile-first: base (un-queried) styles target the SMALLEST screen, then min-width media queries progressively ADD complexity for larger screens as you scroll down the stylesheet. This is the modern default, and it usually means less CSS overriding itself, since mobile styles tend to be simpler. Desktop-first: base styles target the largest screen, then max-width media queries progressively STRIP DOWN or override for smaller screens. Older approach, tends to require overriding more properties since you're undoing desktop assumptions. The <meta name="viewport" content="width=device-width, initial-scale=1"> tag in the HTML head is required alongside media queries — without it, mobile browsers render at a fake 'desktop-width' viewport and scale down, making the queries meaningless. Analogy: mobile-first is building up from a simple studio apartment, adding rooms as you get more space (min-width). Desktop-first is starting from a mansion and knocking down walls to fit a smaller lot (max-width) — usually more demolition work than building up. In an interview: A media query applies CSS conditionally, most often on viewport width. Mobile-first sets base styles for small screens and adds complexity with min-width queries going up; desktop-first does the reverse with max-width, usually needing more overrides. Both require the viewport meta tag to work correctly.

Question 17

What's the difference between px, %, em, rem, and vw/vh units?

Accepted Answer

Answer: px: an absolute, fixed pixel value. Doesn't scale with anything else — predictable but rigid. %: relative to the parent element's corresponding dimension (width % is relative to parent width, etc.). em: relative to the FONT SIZE of the CURRENT element (or its parent, for font-size itself). The tricky part: em COMPOUNDS — if a parent has font-size: 1.2em and a child also uses em, the child's actual size multiplies on top of the parent's already-scaled size, which can spiral unexpectedly in deeply nested markup. rem: relative to the ROOT element's (html) font-size ONLY, ignoring any nesting — no compounding. This predictability is why rem is generally preferred over em for most sizing today. vw/vh: 1vw = 1% of the viewport WIDTH, 1vh = 1% of the viewport HEIGHT. Useful for elements that should scale directly with screen size, like a full-height hero section (height: 100vh). Analogy: px is a fixed steel ruler that never changes. % is 'a fraction of my parent's size'. em is 'a fraction of MY OWN font size', but since children inherit and can also be em, the fractions can stack on each other like compound interest. rem is 'a fraction of the ONE root font size', a single fixed reference point no matter how deep you are. vw/vh is 'a fraction of the actual screen', regardless of any element's own size. In an interview: px is fixed and absolute; % is relative to the parent's dimension; em is relative to the current element's font size and compounds through nesting; rem is relative only to the root font size and never compounds, which is why it's generally preferred; vw/vh are percentages of the viewport width/height, useful for full-screen elements.

Question 18

A layout looks fine on desktop but breaks with horizontal overflow on mobile. What are the common causes and fixes?

Accepted Answer

Answer: Common causes, roughly in order of likelihood: 1. A fixed-width element wider than the viewport — a width: 600px box on a 375px phone screen forces horizontal scroll. Fix: use max-width: 100% or relative units instead of a hard px width. 2. Missing viewport meta tag — without it, mobile browsers default to rendering at a wide 'desktop' viewport and zoom out, breaking everything. Fix: add <meta name="viewport" content="width=device-width, initial-scale=1">. 3. Unwrapped long content — a long unbroken string (a URL, an unbroken word) can force its container wider than intended. Fix: overflow-wrap: break-word or word-break. 4. Padding/border pushing a 100%-width element past its container under content-box sizing (see the box model question). Fix: box-sizing: border-box. 5. A flex/grid item not allowed to shrink — flex items default to min-width: auto, which can prevent them shrinking below their content size, overflowing a narrow flex row. Fix: min-width: 0 on the flex item. Debugging tip: temporarily add * { outline: 1px solid red; } to visually spot which element is wider than its container. Analogy: horizontal overflow is almost always one specific element refusing to shrink, like one stubborn piece of furniture too wide for the room that's forcing the whole wall to bulge outward. The fix is nearly always finding that one piece and either resizing it or letting it flex. In an interview: The usual causes are a fixed-width element wider than the viewport, a missing viewport meta tag, unwrapped long text or URLs, padding pushing past 100% width under content-box sizing, or a flex item's default min-width: auto refusing to shrink. Fixes are max-width/relative units, adding the viewport tag, overflow-wrap, box-sizing: border-box, and min-width: 0 on flex items respectively.

HTML & CSS interview preparation

HTML basics

CSS basics and the cascade

Flexbox and Grid

Responsive design

HTML basics

Semantic HTML and accessibility

CSS basics and the cascade

Flexbox and Grid

Responsive design