HTML and CSS Interview Questions (With Clear Answers) for Freshers and Juniors

HTML and CSS interview questions come up in almost every front-end, UI developer and web designer hiring process, from campus drives to experienced-hire rounds. Interviewers are rarely looking for textbook definitions. They want to see that you understand why things work, and that you can apply it to a real layout.

Below are the HTML and CSS interview questions that come up most often, grouped by topic, with concise answers you can build on in your own words. Do not memorise them – practise explaining them out loud with a small example.

HTML questions

1. What is semantic HTML and why does it matter?

Semantic HTML uses elements that describe meaning – <nav>, <main>, <article>, <button> – instead of generic <div>s. It helps screen readers navigate, gives search engines a clearer structure, and gives built-in behaviour such as keyboard support. A strong answer mentions accessibility first. Read Semantic HTML for SEO.

2. What is the purpose of the DOCTYPE?

<!DOCTYPE html> tells the browser to render the page in standards mode. Without it, browsers fall back to “quirks mode”, which imitates old browser bugs and can change how the box model and layout behave.

3. Difference between block and inline elements?

Block elements (<div>, <p>, <h1>) start on a new line and take the full available width. Inline elements (<span>, <a>, <strong>) sit within a line of text, and width and height do not apply to them. inline-block flows inline but accepts width, height and vertical padding.

4. Why is the alt attribute important?

It provides a text alternative for screen reader users and appears if the image fails to load. Meaningful images need a description of their purpose; decorative images should have an empty alt="" so they are skipped.

5. What do async and defer do on a script tag?

Use defer for most of your own scripts and async for independent scripts such as analytics.

6. How do you make a form accessible?

Connect every input to a <label>, use the correct input types (email, tel), group related options with <fieldset> and <legend>, show errors as text near the field (not only in red), and make sure it works with the keyboard. See HTML Forms.

7. What are data attributes?

Custom attributes starting with data-, such as data-price="499", used to store extra information on an element. JavaScript reads them through element.dataset.price.

CSS fundamentals

8. Explain the box model.

Every element is a box made of content, padding, border and margin. With the default box-sizing: content-box, width sets only the content, so padding and border are added on top. With border-box, width includes padding and border, which is easier to reason about – that is why most projects set it globally. See CSS Box Model.

*, *::before, *::after {
  box-sizing: border-box;
}

9. How does specificity work?

When rules conflict, the more specific selector wins. Think of it as three columns: IDs, then classes/attributes/pseudo-classes, then element types. #menu a (1, 0, 1) beats .nav .link (0, 2, 0) because IDs are compared first. Inline styles beat all of these, and !important overrides normal declarations. If specificity is equal, the rule that comes later in the CSS wins. Good answers add that you should keep specificity low and avoid !important. More in CSS Selectors.

10. What is margin collapsing?

Vertical margins between adjacent block elements combine into a single margin equal to the larger one, rather than adding up. It does not happen with horizontal margins, or inside flex and grid containers.

11. Difference between display: none, visibility: hidden and opacity: 0?

12. Explain the position values.

• static – default, normal flow.
• relative – stays in flow, can be nudged with offsets, and becomes a reference for absolutely positioned children.
• absolute – removed from flow, positioned relative to the nearest positioned ancestor.
• fixed – positioned relative to the viewport; stays when scrolling.
• sticky – behaves like relative until a scroll threshold, then sticks like fixed within its container.

See CSS Display and Position.

13. What creates a new stacking context? Why is my z-index not working?

z-index only works on positioned elements (and flex or grid items). A common surprise: a parent with opacity below 1, a transform, or its own z-index creates a new stacking context, and children can never appear above elements outside it, however high their z-index.

Layout and responsive design

14. Flexbox or Grid – when do you use each?

Flexbox for one-dimensional layouts where content size drives spacing (navbars, button groups). Grid for two-dimensional layouts where rows and columns must align (page layouts, card galleries). They are often combined. Full answer in Flexbox vs Grid.

15. How do you centre a div horizontally and vertically?

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

/* Grid */
.parent { display: grid; place-items: center; }

16. What is mobile-first design?

Writing base styles for small screens, then adding min-width media queries for larger ones. It keeps mobile CSS simpler and forces you to prioritise content. Mention the viewport meta tag and content-based breakpoints – see Responsive Design Breakpoints.

17. px, em, rem – which do you use for font size?

rem for most font sizes, because it scales with the user’s browser setting and does not compound. em for things that should scale with their own text, like button padding. px for borders. Detail in CSS Units Explained.

Modern CSS and performance

18. What are CSS custom properties?

Variables defined like --brand: #1f4fd1; and used with var(--brand). Unlike preprocessor variables, they exist at runtime, inherit through the DOM and can be changed with media queries or JavaScript – perfect for themes. See CSS Variables and Dark Mode Design and CSS.

19. Which properties should you animate for good performance?

transform and opacity, because the browser can often handle them without recalculating layout or repainting. Also mention prefers-reduced-motion. See CSS Animation Performance Tips.

20. What are Core Web Vitals?

Google’s user-experience metrics: LCP (loading, good at 2.5 s or less), INP (responsiveness, good at 200 ms or less – it replaced FID in March 2024) and CLS (visual stability, good at 0.1 or less). Front-end developers affect all three. See Core Web Vitals for Designers.

Practical tasks you may be given

• Convert a screenshot or Figma frame into a responsive HTML/CSS page in a fixed time.
• Build a card grid that shows 1, 2 and 4 columns at different widths.
• Fix a broken layout: overflowing text, a misaligned navbar, a z-index bug.
• Make an existing form accessible.
• Explain your CSS naming approach (for example BEM) and how you would organise styles in a large project.

How to answer CSS interview questions well

1. Start with a one-sentence definition, then give a tiny example.
2. Mention trade-offs: “Grid is better here because…”.
3. Bring up accessibility and performance where relevant – it signals maturity.
4. If you do not know, say how you would find out (MDN, testing in DevTools) instead of guessing.
5. Have two portfolio projects ready to walk through, including one problem you solved.

Frequently asked questions

Further reading

• developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model
• developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Specificity
• developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script
• web.dev/articles/vitals