Top 10 HTML and CSS interview questions

Every element is a rectangular box made of four layers, from inside out: content, padding, border and margin.

With the default box-sizing: content-box, width applies only to the content, so padding and border are added on top: a width: 200px box with padding: 10px and border: 1px renders 222px wide. With box-sizing: border-box, width includes padding and border, so the box stays 200px and the content shrinks. Most projects set *, *::before, *::after { box-sizing: border-box; } because sizes become predictable.

Bonus points: vertical margins between block elements collapse (the larger wins), and margins don't collapse inside flex or grid containers.

• Flexbox is one-dimensional: it lays items out along a single row or column and lets their content decide sizes. Great for navbars, toolbars, centring and aligning items in a card.
• Grid is two-dimensional: you define rows and columns and place items into them. Great for page layouts, dashboards and card galleries.

.toolbar { display: flex; align-items: center; gap: 8px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }

They're not competitors; real layouts use Grid for the page and Flexbox inside components.

When several rules target the same element, the browser picks by specificity, counted as (inline styles, IDs, classes/attributes/pseudo-classes, elements/pseudo-elements):

• p → (0,0,0,1)
• .price → (0,0,1,0)
• nav .link:hover → (0,0,2,1)
• #cart .price → (0,1,1,0)
• style="…" → (1,0,0,0)

A higher count in an earlier column always wins. On a tie, the rule that appears later wins. !important beats normal rules (avoid it except for utilities and overrides of third-party CSS). Good practice: keep specificity low and flat with single class selectors so styles are easy to override.

• static (default): normal document flow; top/left have no effect.
• relative: stays in flow, can be offset; creates a reference point for absolutely positioned children.
• absolute: taken out of flow and positioned relative to the nearest ancestor that isn't static (or the page).
• fixed: positioned relative to the viewport; stays put while scrolling.
• sticky: behaves like relative until a scroll threshold (top: 0), then sticks like fixed within its parent.

Typical use: a badge on a card is position: absolute; top: 8px; right: 8px; inside a card with position: relative.

Three reliable ways:

/* 1. Flexbox */
.parent { display: flex; justify-content: center; align-items: center; }

/* 2. Grid (shortest) */
.parent { display: grid; place-items: center; }

/* 3. Absolute + transform (works without flex/grid on the parent) */
.parent { position: relative; }
.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

For horizontal centring of a block with a fixed width: margin: 0 auto;. For text: text-align: center.

Semantic HTML uses elements that describe their meaning: header, nav, main, article, section, aside, footer, button, label, h1–h6, instead of generic divs and spans.

Why it matters:

1. Accessibility: screen readers announce landmarks, headings and buttons, and users navigate by them. Native buttons and links work with the keyboard automatically.
2. SEO: search engines understand the structure and main content.
3. Maintainability: the markup explains itself.

Example: a <div class="btn" onclick> isn't focusable or announced as a button; <button> is, with no extra code.

Responsive design makes one layout adapt to any screen width.

1. Add the viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">.
2. Use fluid layouts: percentages, fr, Flexbox wrapping, Grid with auto-fill/minmax.
3. Use media queries, written mobile-first with min-width:

.cards { display: grid; gap: 16px; }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(3, 1fr); } }

1. Flexible media: img { max-width: 100%; height: auto; }, srcset for different resolutions.
2. Relative units (rem, %, vw) and clamp() for fluid typography.

Then test on real devices or browser device mode, including landscape and very small (320px) widths.

• display: none: removed from layout entirely; takes no space; not read by screen readers; not clickable.
• visibility: hidden: invisible but still takes space; not clickable; hidden from screen readers.
• opacity: 0: invisible but takes space and is still clickable and focusable; can be animated smoothly.

For content that should be hidden visually but still read by screen readers (like a "skip to content" link label), use a visually-hidden utility class (position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);).

• Pseudo-classes (single colon) select elements in a certain state or position: :hover, :focus-visible, :disabled, :checked, :first-child, :nth-child(2n), :not(.active), :has(img).
• Pseudo-elements (double colon) style a part of an element or insert generated content: ::before, ::after, ::placeholder, ::selection, ::first-line.

.required-label::after { content: " *"; color: crimson; }
tr:nth-child(even) { background: #f7f7f7; }
button:focus-visible { outline: 2px solid #0b6e4f; }

::before/::after need a content property to render.

• Images: right size, modern formats (WebP/AVIF), loading="lazy" below the fold, width/height attributes to prevent layout shift.
• CSS: keep it small, remove unused styles, inline the critical CSS for the first screen, avoid @import chains.
• Fonts: font-display: swap, preload the main font, limit weights.
• Scripts: defer (or async for independent scripts) so they don't block HTML parsing.
• Animations: animate transform and opacity, not layout properties.
• Delivery: compression (gzip/brotli), caching headers, a CDN.

Measure with Lighthouse or PageSpeed Insights and talk in Core Web Vitals: LCP (load), CLS (visual stability), INP (responsiveness).