INTERVIEW

Top 60+ HTML and CSS Interview Questions with Answers [2026]

By Archana

Aug 11, 2026 16 Min Read 59653 Views

(Last Updated)

What separates candidates who clear HTML and CSS interviews from those who stop at textbook answers? It is applied judgment. Modern frontend interviews assess how you approach performance trade-offs, layout system selection, accessibility compliance, CSS architecture, scalability, and long-term maintainability.

This article walks you through everything in HTML and CSS interviews – and covers all HTML and CSS interview questions and answers from simple concepts like the box model to advanced topics such as CSS preprocessors and semantic HTML elements. You’ll find detailed answers that will help you succeed in your next interview, whether you’re just starting out or have years of experience.

Quick Answer: Modern HTML and CSS interviews test architectural maturity, performance awareness, accessibility competence, and maintainability discipline. Hiring managers evaluate whether candidates understand trade-offs, not just syntax.

Strong candidates:

Justify layout decisions
Prioritize accessibility by default
Optimize for performance early
Structure CSS for scale
Avoid specificity escalation
Write resilient and defensive code

Frontend engineering in 2026 is about system thinking, not isolated styling knowledge. Mastery comes from building production-grade interfaces, analyzing failures, and refactoring with intent. If you can explain the reasoning behind each technical choice clearly and confidently, you position yourself as an engineer and not just a coder.

Basic-Level HTML and CSS Interview Questions with Answers (For Freshers)

What is HTML and why is it important?
What is CSS and how can we include it in a webpage?
What are HTML tags?
What is the difference between HTML and CSS?
What is the structure of a basic HTML document?
What is the purpose of the <head> tag in HTML?
How do you add a link in HTML?
How do you insert an image in HTML?
What is a class in CSS?
What is an ID in CSS and how is it different from a class?
What are inline, internal, and external CSS?
What is a semantic HTML element?
What is the difference between <div> and <span>?
What is the box model in CSS?
How do you make a list in HTML?
What are CSS selectors?
What is Flexbox in CSS?
What are the common HTML5 input types used in forms?

Intermediate-Level HTML and CSS Interview Questions with Answers (For 1-3 years experience)

What is the difference between <div> and <span> elements in HTML?
What are HTML semantic elements and why are they important?
What is the difference between relative, absolute, and fixed positioning in CSS?
What is the CSS Box Model?
What is the difference between <ul>, <ol>, and <dl> elements?
What are pseudo-classes in CSS?
What’s the difference between visibility: hidden and display: none in CSS?
How do media queries work in CSS?
What is the purpose of the <meta> tag in HTML and how is it commonly used?
What is CSS Grid, and when should you use it?
What is the difference between Flexbox and CSS Grid?
What are CSS variables or custom properties?
How does z-index work in CSS, and what is a stacking context?
What does box-sizing: border-box do in CSS?

Advanced-level HTML and CSS Interview Questions with Answers (For 3+ years of experience)

What is the difference between <canvas> and <svg> in HTML5, and when should you use one over the other?
How do you implement a responsive layout without using any CSS frameworks like Bootstrap?
What are critical rendering path optimizations in HTML/CSS, and how do they affect performance?
What are the different ways to manage CSS specificity and avoid style conflicts in large-scale applications?
How can you improve accessibility in HTML and CSS for users with disabilities?
What is the Web Storage API, and what is the difference between localStorage and sessionStorage?
What are Web Workers in HTML5, and when would you use them?
How do you serve responsive images using <picture> and srcset?
What is CSS containment, and how can it improve performance?
What are CSS Container Queries, and how are they different from Media Queries?
What are CSS Cascade Layers (@layer), and why are they useful?
What is the content-visibility CSS property, and how can it improve rendering performance?

15 Scenario-Based HTML and CSS Interview Questions with Expert Answers

Scenario: Your layout breaks when a third-party component injects unpredictable HTML. How do you prevent style leakage?
Scenario: A webpage loads slowly on mobile despite optimized images. Lighthouse flags render-blocking CSS. What do you do?
Scenario: A dropdown menu must work for mouse, keyboard, and screen reader users. What HTML and CSS strategies do you apply?
Scenario: You need a responsive card grid where card heights differ but alignment must remain clean. Flexbox causes uneven rows. What is your solution?
Scenario: A design requires fluid typography that scales smoothly between mobile and desktop without multiple breakpoints. How do you implement it?
Scenario: A large enterprise app suffers from CSS bloat after years of development. How do you refactor safely?
Scenario: A modal overlay scrolls the background page when open. How do you prevent this without breaking accessibility?
Scenario: A fixed header overlaps anchor link targets when users click navigation links. What is the clean solution?
Scenario: You must support dark mode without duplicating CSS files. What is the recommended approach?
Scenario: A marketing team wants animated counters but performance drops on low-end devices. What CSS-first strategy can help?
Scenario: You need to visually reorder elements for mobile without changing DOM structure. How?
Scenario: A button component must support multiple visual variants but share core structure. How do you architect the CSS?
Scenario: Text content overflows containers unpredictably due to user-generated input. What defensive CSS do you apply?
Scenario: A sticky sidebar stops sticking when placed inside a container. Why and how do you fix it?
Scenario: Your CSS specificity has become unmanageable due to nested selectors like .app .layout .card h2. What corrective strategy do you apply?

CSS Concepts React Developers Should Know for Interviews

Common CSS Interview Questions for React Developers

Concluding Thoughts…
Frequently Asked Questions

What topics should I prepare for HTML and CSS interviews?
Are CSS Grid and Flexbox important for HTML and CSS interviews?
What HTML5 concepts are commonly tested in interviews?

Basic-Level HTML and CSS Interview Questions with Answers (For Freshers)

Getting ready for your first web development interview can feel overwhelming. But mastering these simple HTML and CSS interview questions will boost your confidence a lot when you apply for entry-level positions with starting salaries between ₹3-5 lakhs per annum in India. Let’s take a closer look at the most common questions that every fresher should know.

1. What is HTML and why is it important?

HTML (HyperText Markup Language) is the standard language for creating web pages. It works as the backbone of all web content and structures your page content through various elements like headings, paragraphs, links, and images.

HTML plays a vital role for several reasons:

Foundation of Web Content: HTML gives the simple structure that browsers need to display text, images, and multimedia in a proper way.
Semantic Structure: Modern HTML (especially HTML5) has semantic elements that give meaning to different parts of your webpage, making it more available and SEO-friendly.
Universal Language: Every web browser understands HTML, making it the universal language for web development.

A simple HTML document structure looks like this:

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

During interviews, show that you understand HTML’s role in creating the structure that CSS and JavaScript build upon. This shows you know the basic relationship between these technologies.

2. What is CSS and how can we include it in a webpage?

CSS (Cascading Style Sheets) is a style sheet language that describes the look and formatting of a document written in HTML or XML. It separates content from presentation, so the same content displays in multiple formats across different devices.

You can add CSS to a webpage in four main ways:

External Style Sheet: Link a separate CSS file to your HTML document using the <link> element in the HTML <head> section.

<link rel="stylesheet" type="text/css" href="mystyles.css" />

Internal CSS: Put CSS right inside your HTML document using <style> tags in the <head> section.
<style type=”text/css”>

/* Add style rules here */

  body {

    background-color: #f0f0f0;

    font-family: Arial, sans-serif;

  }

</style>

Inline Styles: Apply CSS right to HTML elements using the style attribute.

<h2 style="color:red;background:black">Inline Style</h2>

CSS Import: Import one CSS file into another using the @import rule.

@import "path/to/style.css";

Each method works best in specific situations. External CSS helps manage styles across multiple pages, while inline styles work better for quick, one-off styling needs.

3. What are HTML tags?

HTML tags are predefined keywords surrounded by angle brackets like <p> or <h1>. These tags describe the content between them and define its role on the web page. Most HTML elements come in pairs: an opening tag (e.g., <p>) and a closing tag (e.g., </p>), with the content in between. For example:

<p>This is a paragraph.</p>

Here, the browser knows to display the content as a paragraph because of the <p> tag.

4. What is the difference between HTML and CSS?

HTML is used for structuring the content of a webpage, while CSS is used for styling that structure. Think of HTML as the framework of a house (walls, doors, rooms), and CSS as the paint, decorations, and furniture. For example, if you define a button in HTML, you can use CSS to make it green, add rounded corners, or create hover effects. Without HTML, there’s nothing to style; without CSS, everything looks dull and default.

5. What is the structure of a basic HTML document?

A standard HTML document begins with the declaration and follows a defined hierarchy:

<!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first webpage.</p>
  </body>
</html>

<!DOCTYPE html>: Declares the document as HTML5.
<html>: Root element of the document.
<head>: Contains metadata like the title, links to stylesheets, and scripts.
<body>: Holds all the visible content like text, images, buttons, etc.

This structure ensures that the browser understands how to render the page.

6. What is the purpose of the <head> tag in HTML?

The <head> tag contains non-visible information (metadata) about the web page. This includes:

<title>: Sets the title in the browser tab.
<meta>: Defines character set, viewport settings, SEO tags, etc.
<link>: Connects external stylesheets or fonts.
<script>: Loads JavaScript files.

Even though users don’t see what’s inside <head>, it’s crucial for performance, SEO, and responsiveness.

7. How do you add a link in HTML?

To create a clickable link, use the <a> (anchor) tag.

For example:

<a href="https://www.openai.com">Visit OpenAI</a>

href (Hypertext REFerence): The URL to navigate to.
The text between <a> and </a> becomes clickable.

You can also link to email addresses using mailto: or files like PDFs or images hosted online.

8. How do you insert an image in HTML?

Use the <img> tag, which is self-closing and requires at least two attributes:

<img src="cat.jpg" alt="A cute cat">

src: Specifies the image path or URL.
alt: Describes the image; helps screen readers and appears when the image fails to load.

You can also control width, height, alignment, and borders using CSS or inline attributes.

9. What is a class in CSS?

A class in CSS is a reusable selector that allows you to apply the same styles to multiple HTML elements. It’s defined using a period (.) followed by a name, like .highlight. In HTML, you apply the class using the class attribute:

<style>
  .highlight {
    background-color: yellow;
    font-weight: bold;
  }
</style>


<p class="highlight">This text is highlighted.</p>

Classes are powerful for styling groups of similar elements without repeating CSS code.

10. What is an ID in CSS and how is it different from a class?

An ID is a unique identifier for an HTML element. It’s defined with a hash (#) symbol and used for specific, single-use styling. You should not use the same ID on more than one element per page.

Example:

<style>

  #header {

    font-size: 28px;

    color: blue;

  }

</style>

<h1 id="header">Welcome!</h1>

Use classes when you want to style multiple elements, and IDs when styling just one specific element.

11. What are inline, internal, and external CSS?

There are three ways to apply CSS:

Inline CSS: Written directly inside an element using the style attribute. Not reusable.

<p style="color:red;">Inline text</p>

Internal CSS: Written inside a <style> tag in the <head> section of the HTML file.

<style>

  p { color: blue; }

</style>

External CSS: Written in a separate .css file and linked using:

<link rel="stylesheet" href="style.css">

External CSS is the one usually preferred for its maintainability and performance.

Suggested Reads: Types of CSS with Examples

12. What is a semantic HTML element?

Semantic HTML uses tags that clearly describe their purpose. Examples include:

<header>: Page or section heading
<nav>: Navigation links
<main>: Main content area
<footer>: Footer of the page

Compared to generic tags like <div> and <span>, semantic tags improve accessibility, SEO, and code readability for developers and browsers.

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

<div> is a block-level container that stacks elements vertically.
<span> is an inline-level container that keeps elements on the same line.

Use <div> to group larger sections of the page (like containers or columns) and <span> to style a small part of the text, like a word inside a sentence.

<p>This is a <span style="color: red;">red</span> word.</p>

14. What is the box model in CSS?

The CSS box model describes how elements are visually represented on the page. It consists of:

Content: The actual text or image.
Padding: Space around the content.
Border: Surrounds the padding.
Margin: Space outside the border that separates it from other elements.

Understanding the box model helps you control the spacing, alignment, and sizing of elements precisely.

15. How do you make a list in HTML?

You can create two types of lists:

Ordered List (<ol>): Numbers items in sequence.
Unordered List (<ul>): Uses bullets for each item.

Each list item is wrapped in an <li> tag:

<ol>

  <li>HTML</li>

  <li>CSS</li>

</ol>

Lists are essential for creating menus, steps, or bullet points in web pages.

16. What are CSS selectors?

CSS selectors are patterns used to target HTML elements so that styles can be applied to them.

Common types include:

Element selector: Targets all elements of a specific type, such as p.
Class selector: Targets elements with a specific class, such as .card.
ID selector: Targets an element with a specific ID, such as #header.
Attribute selector: Targets elements based on attributes, such as input[type=”text”].

Example:

p { color: blue; } .card { padding: 16px; } #header { background-color: black; }

Selectors help developers apply styles precisely without changing the HTML structure.

17. What is Flexbox in CSS?

Flexbox is a one-dimensional CSS layout system used to arrange elements in a row or column.

It is commonly used for:

Aligning items horizontally or vertically.
Distributing space between elements.
Creating navigation bars.
Centering content.
Building responsive layouts.

Example:

.container { display: flex; justify-content: center; align-items: center; gap: 1rem; }

Flexbox is especially useful when you need to control the alignment and spacing of elements along a single axis.

18. What are the common HTML5 input types used in forms?

HTML5 introduced several input types that make forms easier to use and validate.

Common examples include:

email for email addresses.
number for numeric values.
date for selecting dates.
tel for telephone numbers.
url for website addresses.
range for selecting values using a slider.

Example:

These input types improve usability and can provide built-in browser validation without requiring additional JavaScript.

Intermediate-Level HTML and CSS Interview Questions with Answers (For 1-3 years experience)

Developers with 1-3 years of experience should demonstrate deeper knowledge of HTML and CSS after learning the basics. Mid-level front-end developers in India earn ₹5-7 lakhs per annum. These intermediate HTML questions delve into the nuanced aspects of web development that help you stand out in a competitive job market.

1. What is the difference between <div> and <span> elements in HTML?

The <div> and <span> elements are both used as containers in HTML, but they serve different purposes based on their display behavior.

<div> is a block-level element. It means that it takes up the full width of the container and starts on a new line. It is commonly used to structure large sections of content like headers, footers, sidebars, or cards.
<span> is an inline element. It does not start on a new line and only takes up as much width as needed. It’s perfect for targeting small pieces of text inside a paragraph or heading, especially when applying CSS styles.

2. What is the difference between id and class attributes in HTML?

The id and class attributes are used to label elements, mainly for styling and JavaScript targeting, but their usage differs in scope:

id is unique and should be used only once per HTML page. It’s useful when you need to apply styles or behavior to a single, specific element.
class can be reused across multiple elements. It’s more flexible and is typically used when you want to apply the same style to a group of elements.

Example:

<div id="main-banner"></div>  <!-- Used once -->

<div class="card"></div>       <!-- Reused across multiple items -->

In CSS:

#main-banner { background: blue; }

.card { border: 1px solid #ccc; }

3. What are HTML semantic elements and why are they important?

Semantic elements give meaning to the structure of a web page. Instead of using generic tags like <div> and <span> everywhere, HTML5 introduced tags like <header>, <footer>, <article>, <nav>, and <section> that clearly describe their purpose.

Why they matter:

Accessibility: Screen readers can interpret them more accurately, aiding visually impaired users.
SEO: Search engines use semantic tags to better understand content hierarchy.
Maintainability: Code becomes more readable for developers.

Example:

<article>

  <header>Blog Title</header>

  <p>Post content here...</p>

</article>

4. What is the difference between relative, absolute, and fixed positioning in CSS?

These values define how an element is placed within the layout:

relative: Moves the element relative to its original position. It doesn’t remove the element from the document flow.
absolute: Positions the element relative to the nearest positioned ancestor. If none exists, it falls back to the <body> (i.e., the viewport).
fixed: Positions the element relative to the viewport. It stays fixed on the screen even when you scroll.

5. What is the CSS Box Model?

The box model is how browsers render and space HTML elements. Every element is treated as a rectangular box made up of:

Content – The actual text/image in the box.
Padding – Space between the content and the border.
Border – The outline around the element.
Margin – The space outside the border that separates it from other elements.

Why it matters: Understanding the box model is critical when designing layouts, especially when spacing and alignment don’t look right.

.box {

  margin: 20px;

  padding: 10px;

  border: 1px solid black;

}

6. What is the difference between <ul>, <ol>, and <dl> elements?

These tags define lists, but they serve different purposes:

<ul>: Unordered List – items are typically shown as bullets.
<ol>: Ordered List – items are numbered or lettered (like steps or rankings).
<dl>: Description List – used for key-value pairs like FAQs or glossaries.

Example:

<dl>

  <dt>HTML</dt>

  <dd>HyperText Markup Language</dd>

</dl>

Use <ul> or <ol> for content sequencing, and <dl> when defining terms or data sets.

7. What are pseudo-classes in CSS?

A pseudo-class defines the special state of an element, without needing extra classes or IDs.

Common examples:

:hover – activates when a user hovers over the element.
:focus – activates when an element like an input is selected.
:first-child – selects the first child of a parent.

Example:

button:hover {

  background-color: green;

}

This enhances interactivity without JavaScript.

8. What’s the difference between visibility: hidden and display: none in CSS?

Both hide elements, but:

display: none: The element is completely removed from the layout. It won’t take up any space.
visibility: hidden: The element becomes invisible, but still occupies space in the layout.

9. How do media queries work in CSS?

Media queries let you apply CSS styles based on device properties like screen width, height, resolution, or orientation. They’re key to building responsive web designs.

Syntax:

@media (max-width: 768px) {

  .container {

    flex-direction: column;

  }

}

This code makes .container switch to a column layout on screens 768px wide or smaller — ideal for tablets and phones.

10. What is the purpose of the <meta> tag in HTML and how is it commonly used?

The <meta> tag adds metadata to HTML documents. This invisible yet vital information helps browsers, search engines, and web services understand your content better. You’ll find meta tags in the <head> section, where they serve several key functions:

Key purposes of meta tags:

Character Encoding: Your text displays correctly across browsers by defining how it’s encoded.
<meta charset=”UTF-8″>
Viewport Configuration: Your page scales properly on different devices, which makes it responsive.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
SEO Enhancement: Search engines use this summary to rank your page and boost click-through rates.
<meta name=”description” content=”Learn about HTML and CSS interview questions”>
Search Engine Directives: Search engines need guidance on how to handle your content.
<meta name=”robots” content=”index, follow”>
Social Media Optimization: Social platforms create better link previews with Open Graph meta tags.
<meta property=”og:title” content=”HTML & CSS Interview Guide”>

11. What is CSS Grid, and when should you use it?

CSS Grid is a two-dimensional layout system that lets you control both rows and columns at the same time. It is useful for page layouts, dashboards, galleries, and other interfaces that require structured alignment.

Example:

.container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

Here, the container is divided into three equal-width columns with a 20-pixel gap between them.

CSS Grid is especially useful for complex two-dimensional layouts where both horizontal and vertical positioning matter.

12. What is the difference between Flexbox and CSS Grid?

Flexbox and CSS Grid are both modern CSS layout systems, but they solve different layout problems.

Flexbox is primarily one-dimensional and works with either a row or a column.
CSS Grid is two-dimensional and controls rows and columns together.
Flexbox works well for navigation menus, button groups, and component alignment.
Grid is better suited to page layouts, galleries, and structured content grids.
They can also be used together within the same interface.

For example, you might use Grid for the overall page layout and Flexbox to align elements within individual cards.

13. What are CSS variables or custom properties?

CSS custom properties, commonly called CSS variables, let you define reusable values and reference them throughout a stylesheet.

They are declared using a name beginning with — and accessed with the var() function.

:root { –primary-color: #2563eb; –spacing: 16px; } .button { background-color: var(–primary-color); padding: var(–spacing); }

CSS variables help:

Reduce repeated values.
Maintain consistent styling.
Make theme changes easier.
Create reusable design systems.
Dynamically update values when needed.

Unlike variables in preprocessors, CSS custom properties are understood by the browser and participate in the CSS cascade.

14. How does z-index work in CSS, and what is a stacking context?

The z-index property controls how overlapping elements are stacked along the z-axis. Elements with a higher z-index generally appear in front of elements with a lower value within the same stacking context.

For example:

.modal { position: fixed; z-index: 1000; }

A stacking context is an independent stacking environment. It can be created by properties such as positioned elements with a z-index, opacity values below 1, or certain CSS transforms.

This explains why simply assigning an extremely high z-index does not always bring an element to the front. Its parent stacking context can still place it behind another element.

15. What does box-sizing: border-box do in CSS?

By default, CSS uses content-box, where an element’s specified width and height apply only to its content. Padding and borders are added on top of those dimensions.

With border-box, the declared width and height include the content, padding, and border.

* { box-sizing: border-box; } .card { width: 300px; padding: 20px; border: 2px solid #ccc; }

Here, the card remains 300px wide in total, rather than becoming wider after its padding and border are added.

Using border-box makes element sizing more predictable and simplifies responsive layouts.

💡Did You Know?

Early web developers sometimes used transparent 1×1 pixel GIFs as invisible spacers to position elements because CSS layout tools were still limited.

Advanced-level HTML and CSS Interview Questions with Answers (For 3+ years of experience)

Senior developers who earn between ₹8-15 lakhs per annum should know advanced HTML and CSS concepts. Interviewers look for more than just theory. They want to gain practical knowledge about frontend performance optimization, scalable architectures, and cutting-edge techniques. These questions will help assess your problem-solving skills and technical leadership abilities.

1. What is the difference between <canvas> and <svg> in HTML5, and when should you use one over the other?

Both <canvas> and <svg> are used for rendering graphics on a web page, but they are fundamentally different in how they operate. <canvas> is a raster-based drawing API that uses JavaScript to draw graphics pixel by pixel. Once something is drawn on the canvas, it’s part of the bitmap and cannot be accessed or modified through the DOM. It’s ideal for real-time, dynamic graphics like games or data visualizations that require frequent updates.

In contrast, <svg> is vector-based and each element within the SVG is part of the DOM. This makes SVGs scalable, accessible, and stylable via CSS and JavaScript. SVG is best suited for static or semi-dynamic graphics such as icons, logos, and infographics that require interaction or animation without high refresh rates.

2. How do you implement a responsive layout without using any CSS frameworks like Bootstrap?

Creating a responsive layout from scratch involves using media queries, flexbox, and CSS Grid effectively. Media queries allow you to apply different styles based on screen size, orientation, or resolution. For instance, you can stack elements vertically on small screens and display them in a row on larger ones.

Flexbox is perfect for one-dimensional layouts, such as aligning items in a navbar or sidebar. CSS Grid, on the other hand, is more suited for two-dimensional layouts like complex dashboard interfaces. By combining these tools, you can build a responsive layout that adjusts seamlessly across desktops, tablets, and mobiles without relying on any third-party libraries.

3. What are critical rendering path optimizations in HTML/CSS, and how do they affect performance?

The critical rendering path is the sequence of steps the browser takes to convert HTML, CSS, and JavaScript into pixels on the screen. Optimizing this path means reducing render-blocking resources and improving load speed. One common optimization is to minimize or defer non-critical CSS by using media attributes or loading them asynchronously. For example, using media=”print” can delay loading print styles until needed.

Another technique is to inline critical CSS for above-the-fold content, so the page loads faster initially. Minimizing CSS file size, removing unused styles, and avoiding deeply nested rules also improve render times. Efficient rendering leads to better performance and user experience, especially on slower devices or networks.

4. What are the different ways to manage CSS specificity and avoid style conflicts in large-scale applications?

CSS specificity can become a major issue in large codebases where multiple developers work on the same stylesheets. A robust solution involves following naming conventions like BEM (Block Element Modifier), which ensures modular and readable class names. BEM avoids clashes by structuring class names hierarchically, e.g., .button–primary or .card__header.

Using scoped styles (via Shadow DOM in Web Components or CSS Modules in frameworks like React) can encapsulate CSS to specific components. You should also avoid using it! important excessively, as it overrides the natural cascade and makes debugging harder. A well-organized CSS architecture with proper commenting, utility classes, and layered specificity ensures maintainability in complex projects.

5. How can you improve accessibility in HTML and CSS for users with disabilities?

Accessibility (a11y) ensures that web content is usable by people with disabilities. In HTML, this starts by using semantic tags like <header>, <nav>, <main>, and <footer>, which help screen readers interpret the page structure. Add alt attributes for images and aria-label, aria-hidden, or role attributes where necessary to convey additional context.

In CSS, you should ensure that color contrasts meet WCAG standards (minimum 4.5:1 for text), avoid using color alone to convey information, and maintain focus styles for keyboard navigation. Also, avoid hiding content with display: none if it should still be accessible to screen readers. Accessibility is not just a technical requirement; it enhances usability for all users, including those with temporary impairments or situational limitations.

6. What is the Web Storage API, and what is the difference between localStorage and sessionStorage?

The Web Storage API allows web applications to store key-value data directly in the browser.

The two main storage mechanisms are:

localStorage stores data with no automatic expiration and retains it even after the browser is closed.
sessionStorage stores data only for the current browser tab or session and removes it when the tab is closed.
Both store values as strings.
Both are scoped to the page’s origin.

localStorage.setItem(“theme”, “dark”); const theme = localStorage.getItem(“theme”); sessionStorage.setItem(“step”, “2”);

Web Storage is useful for lightweight client-side data such as user preferences, form progress, and UI state. Sensitive information such as passwords or authentication secrets should not be stored there.

7. What are Web Workers in HTML5, and when would you use them?

Web Workers allow JavaScript to perform computationally intensive tasks in a background thread without blocking the browser’s main UI thread.

They are useful for tasks such as:

Processing large datasets.
Complex calculations.
Parsing large files.
Performing CPU-intensive operations without freezing the interface.

Example:

const worker = new Worker(“worker.js”); worker.postMessage({ data: largeDataset }); worker.onmessage = (event) => { console.log(event.data); };

Web Workers cannot directly manipulate the DOM. Instead, they communicate with the main thread using messages.

8. How do you serve responsive images using <picture> and srcset?

Responsive images allow browsers to load an image appropriate for the user’s screen size, resolution, or supported image format instead of downloading the same image for every device.

The <picture> element can provide multiple image sources:

The srcset attribute can also provide multiple image resolutions and let the browser select an appropriate one.

This reduces unnecessary downloads on smaller devices and can improve page-loading performance.

9. What is CSS containment, and how can it improve performance?

CSS containment allows developers to tell the browser that a particular element or component is largely independent of the rest of the page.

For example:

.card { contain: layout paint; }

Depending on the containment type, the browser can limit layout calculations, painting, or size calculations to a particular part of the page.

This can improve rendering performance in complex interfaces because changes inside one component do not always require the browser to recalculate the entire page.

10. What are CSS Container Queries, and how are they different from Media Queries?

Media Queries apply styles based primarily on characteristics of the viewport, while Container Queries allow a component to respond to the size of its containing element.

Example:

.card-container { container-type: inline-size; } @container (min-width: 500px) { .card { display: flex; } }

Container Queries are particularly useful for reusable components because the same component can adapt differently depending on where it is placed, regardless of the overall screen size.

11. What are CSS Cascade Layers (@layer), and why are they useful?

CSS Cascade Layers allow developers to explicitly control the priority of groups of styles within the cascade.

For example:

@layer reset, base, components, utilities; @layer components { .button { padding: 0.75rem 1rem; } }

They are useful in large applications because they:

Make cascade priority more predictable.
Help separate resets, base styles, components, and utilities.
Reduce reliance on highly specific selectors.
Make third-party styles easier to manage.

Cascade Layers therefore provide another way to organize large stylesheets without constantly increasing selector specificity.

12. What is the content-visibility CSS property, and how can it improve rendering performance?

The content-visibility property lets the browser skip rendering work for content that is not currently visible on the screen.

For example:

.section { content-visibility: auto; contain-intrinsic-size: 500px; }

With content-visibility: auto, the browser can delay layout and painting for off-screen sections until they approach the viewport.

This can improve initial rendering performance on long pages containing many complex sections. contain-intrinsic-size can provide an estimated size for skipped content, helping reduce unexpected layout shifts.

15 Scenario-Based HTML and CSS Interview Questions with Expert Answers

1. Scenario: Your layout breaks when a third-party component injects unpredictable HTML. How do you prevent style leakage?

Answer:

Use style isolation techniques. Prefer component-scoped styling through CSS Modules, Shadow DOM, or strict BEM naming conventions. Avoid global selectors such as div p or element-based resets that cascade unpredictably.

In enterprise applications, layering strategies like ITCSS or utility-first layering reduce collision risk. Restrict selectors to class-based targeting and minimize inheritance dependencies. A predictable naming architecture prevents regressions when external HTML is introduced.

2. Scenario: A webpage loads slowly on mobile despite optimized images. Lighthouse flags render-blocking CSS. What do you do?

Answer:

Extract and inline critical CSS required for above-the-fold rendering. Defer non-critical styles using media attributes or asynchronous loading strategies. Remove unused CSS via build tooling such as PurgeCSS.

Large CSS bundles increase time to first render. Reducing CSS payload and eliminating deep selector chains improves parse and render efficiency. Performance optimization at the CSS level directly impacts Core Web Vitals.

Answer:

Use semantic structure:

<button aria-expanded="false" aria-controls="menu-list">

 Menu

</button>

<ul id="menu-list" hidden>

 <li><a href="#">Item 1</a></li>

</ul>

Toggle hidden and update aria-expanded via script.

Key accessibility details:

Use <button> not <div> for automatic keyboard support.
Support Enter and Space activation.
Trap focus inside the menu if it behaves like a popup.
Close on Escape.
Use :focus-visible for clear keyboard focus styling.

Never remove outlines unless replacing them with an equally visible focus indicator. WCAG requires visible focus states.

4. Scenario: You need a responsive card grid where card heights differ but alignment must remain clean. Flexbox causes uneven rows. What is your solution?

Answer:

Use CSS Grid with explicit row control:

.container {

 display: grid;

 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

 gap: 1rem;

 grid-auto-rows: 1fr;

}

For masonry-like behavior, consider grid-auto-flow: dense.

Flexbox distributes items row by row without equal-height enforcement across rows. Grid gives structural control across both axes. When layout consistency matters across breakpoints, Grid is the appropriate architectural choice.

5. Scenario: A design requires fluid typography that scales smoothly between mobile and desktop without multiple breakpoints. How do you implement it?

Answer:

Use clamp() with viewport-based interpolation:

h1 {

 font-size: clamp(1.5rem, 2vw + 1rem, 3rem);

}

This formula:

Sets a minimum size
Scales proportionally with viewport width
Caps at a maximum

Pair with line-height: 1.2 or unitless scaling for readability. This approach reduces breakpoint complexity and improves typographic consistency across devices.

6. Scenario: A large enterprise app suffers from CSS bloat after years of development. How do you refactor safely?

Answer:

Follow a measured cleanup process:

Use Chrome DevTools Coverage to detect unused CSS.
Run CSS stats analysis tools for selector depth and duplication.
Introduce layered architecture such as ITCSS or utility layers.
Remove dead rules incrementally.
Use visual regression testing tools like Percy or BackstopJS.

Avoid full rewrites without metrics. Large CSS systems require staged refactoring with measurable impact on bundle size and render time.

Answer:

When modal opens:

body.modal-open {

 overflow: hidden;

}

Advanced considerations:

Preserve scroll position before locking.
Use focus trapping within the modal.
Add aria-modal=”true” and role=”dialog”.
Restore focus to the triggering element after close.

Avoid display: none on background if screen readers still need context control. Proper focus management is essential.

8. Scenario: A fixed header overlaps anchor link targets when users click navigation links. What is the clean solution?

Answer:

Apply scroll offset using:

section {

 scroll-margin-top: 80px;

}

This preserves semantic structure without artificial padding or pseudo-element hacks. It is cleaner than adding invisible spacer elements.

9. Scenario: You must support dark mode without duplicating CSS files. What is the recommended approach?

Answer:

Define theme variables:

:root {

 --bg: #ffffff;

 --text: #111111;

}

[data-theme="dark"] {

 --bg: #111111;

 --text: #ffffff;

}

body {

 background: var(--bg);

 color: var(--text);

}

Also support system preference:

@media (prefers-color-scheme: dark) {

 :root {

   --bg: #111111;

   --text: #ffffff;

 }

}

Custom properties centralize theme control and prevent duplication across components.

10. Scenario: A marketing team wants animated counters but performance drops on low-end devices. What CSS-first strategy can help?

Answer:

Prefer CSS animation for simple transitions:

.counter {

 transition: transform 0.3s ease;

}

Animation best practices:

Animate transform and opacity only.
Avoid animating height, width, top, left.
Use will-change sparingly.

GPU-accelerated properties reduce layout recalculation and repaint cost.

11. Scenario: You need to visually reorder elements for mobile without changing DOM structure. How?

Answer:

Use Flexbox:

.item-1 { order: 2; }

.item-2 { order: 1; }

Or Grid placement.

Important: Maintain logical DOM order for accessibility. Screen readers follow source order. Visual reordering must not disrupt semantic reading flow.

Answer:

Use a base class with modifiers:

.button {

 padding: 0.75rem 1rem;

 border-radius: 4px;

}

.button--primary {

 background: blue;

}

.button--secondary {

 background: gray;

}

This isolates variation from structure. Component scalability depends on predictable modifier patterns rather than duplicated styles.

13. Scenario: Text content overflows containers unpredictably due to user-generated input. What defensive CSS do you apply?

Answer:

For long strings:

word-break: break-word;

overflow-wrap: anywhere;

For truncated single-line text:

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

For multi-line truncation:

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

overflow: hidden;

Defensive CSS is critical when content is not controlled by developers.

14. Scenario: A sticky sidebar stops sticking when placed inside a container. Why and how do you fix it?

Answer:

position: sticky requires:

A scrollable ancestor
No conflicting overflow: hidden on parent
Defined top value

If parent container clips overflow, sticky behavior fails. Remove overflow restriction or move sticky element higher in the DOM hierarchy.

Sticky positioning depends on scroll context boundaries.

15. Scenario: Your CSS specificity has become unmanageable due to nested selectors like .app .layout .card h2. What corrective strategy do you apply?

Answer:

Refactor toward flat class-based selectors:

.card-title {}

Guidelines:

Avoid chaining parent selectors.
Do not rely on element selectors for styling.
Avoid !important.
Introduce utility classes for recurring properties.

Specificity escalation reduces maintainability. Controlled selector depth improves predictability and debugging speed.

CSS Concepts React Developers Should Know for Interviews

React developers still rely on CSS to style, organize, and make components responsive. Here are some CSS concepts worth knowing when preparing for React-focused interviews.

CSS Concept	Why It Matters in React
CSS Modules	Scopes styles to individual components and helps prevent class-name conflicts
CSS-in-JS	Allows styles to be created and managed alongside component logic
Conditional Styling	Changes styles based on component props, state, or user interactions
Global vs Scoped CSS	Helps determine which styles should apply application-wide and which should remain component-specific
CSS Variables	Makes reusable design values and themes easier to manage
Responsive Component Styling	Helps components adapt to different screen and container sizes

Key CSS Concepts for React Developers

Common CSS Interview Questions for React Developers

Let’s look at some commonly asked CSS interview questions for React Developers, along with their answers:

1. What is the difference between CSS Modules and regular CSS in React?

Regular CSS is global by default, which means class names can potentially conflict across components. CSS Modules locally scope class names to the component where they are imported.

import styles from “./Button.module.css”; function Button() { return ; }

CSS Modules are particularly useful in larger React applications because they help keep component styles isolated and maintainable.

2. How do you apply conditional styling in React?

Conditional styling changes an element’s CSS based on props, state, or another condition.

For example:

function Button({ isActive }) { return ( ); }

For more complex components, developers can also use utilities for managing multiple conditional class names.

3. What is CSS-in-JS, and when would you use it in React?

CSS-in-JS is an approach where styles are defined using JavaScript rather than traditional standalone stylesheets.

It can be useful when:

Styles depend heavily on component props or state.
Components need locally scoped styles.
An application uses a JavaScript-based theming system.
Styles and component logic need to be closely organized.

However, CSS-in-JS is not automatically the best choice for every React project. The decision should depend on factors such as maintainability, performance, tooling, and the application’s styling requirements.

If you’re serious about mastering HTML and CSS and want to ace top web developer interviews, the HCL GUVI Full Stack Development Course is the perfect fit. This industry-aligned course not only sharpens your front-end skills with real-world projects but also prepares you thoroughly for technical interviews with expert mentorship and placement support.

Concluding Thoughts…

I’m sure by this point you’ve understood that HTML and CSS are really not that difficult to master and you can easily ace interviews if you just practice questions like these and more. HTML and CSS skills create lucrative career paths. Entry-level developers earn ₹1.8L while senior developers make up to ₹15L per year in India.

Your interview success depends on both theory knowledge and practical skills – from simple box model concepts to advanced topics like CSS containment and performance optimization. Strong technical knowledge paired with good communication skills will make you stand out.

The path to becoming an expert front-end developer needs constant learning and adaptation. Keep up with the latest HTML and CSS updates. Try different approaches and build challenging projects that test your abilities. This detailed preparation will boost your confidence and improve your chances of success in web development interviews. Good Luck!

Frequently Asked Questions

1. What topics should I prepare for HTML and CSS interviews?

Focus on semantic HTML, forms, CSS selectors, the box model, positioning, Flexbox, Grid, responsive design, accessibility, and CSS variables. For advanced roles, also prepare HTML5 APIs, browser rendering, CSS architecture, and performance optimization.

2. Are CSS Grid and Flexbox important for HTML and CSS interviews?

Yes. Both are fundamental to modern web layouts. You should understand their key properties, alignment techniques, responsive behavior, and when Grid is a better choice than Flexbox or vice versa.

3. What HTML5 concepts are commonly tested in interviews?

Common topics include semantic elements, forms and input types, responsive images, Web Storage, Web Workers, multimedia elements, and accessibility. Practice explaining not only how these features work but also when you would use them.

Success Stories

About the Author

Archana

A traveler, and explorer, Archana is an active writer at GUVI. You can usually find her with a book/kindle binge-reading (with an affinity to the mystery/humor).

View all posts by Archana