Skip to main content

HTML and CSS interview question

HTML Questions:

  1. What is the difference between HTML and HTML5?

    • HTML5 introduces new features like <article>, <header>, multimedia support, local storage, and improved form elements over previous HTML versions.

  2. What are void (self-closing) elements in HTML?

    • Elements like <img>, <br>, <hr>, which don’t have closing tags.

  3. Explain the structure of an HTML document.

    • An HTML document includes <!DOCTYPE>, <html>, <head> (with metadata), and <body> for content.                                                                                                                                                                     

  4. What is the purpose of the alt attribute in an <img> tag?

    • Provides alternative text if the image cannot be displayed and improves accessibility for visually impaired users.

  5. What are semantic elements in HTML?

    • Elements like <header>, <article>, and <footer>, which convey specific meaning about the structure of content.

  6. What is the difference between inline, block, and inline-block elements?

    • Inline elements (<span>) flow within the content; block elements (<div>) take up full width; inline-block elements behave like inline but respect width and height.                                                                                     

  7. How do you create a hyperlink in HTML?

    • Use the <a> tag: <a href="url">Link text</a>.

  8. Explain the difference between localStorage and sessionStorage.

    • localStorage persists data across sessions, while sessionStorage stores data only for the current session.

  9. What is the difference between <section> and <div>?

    • <section> is semantic representing a distinct section of content; <div> is non-semantic, used for generic container elements.                                                                                                         

  10. What are data attributes in HTML? How are they used?

    • Custom attributes prefixed with data-, used to store extra information for DOM elements, e.g., <div data-id="123"></div>.

CSS Questions:

  1. What is the CSS box model?

    • It consists of content, padding, border, and margin, defining how elements are sized and spaced.

  2. Explain the difference between margin and padding.

    • Padding is space inside an element, while margin is space outside it.                                               

  3. What are the different ways to apply CSS to an HTML document?

    • Inline styles, internal styles (<style> tag in the <head>), and external stylesheets (<link> tag).

  4. What is a CSS selector? Can you name a few common ones?

    • A selector targets HTML elements to apply styles. Common ones include element (h1), class (.className), and ID (#idName).

  5. What are pseudo-classes and pseudo-elements in CSS?

    • Pseudo-classes (:hover, :focus) style elements based on their state; pseudo-elements (::before, ::after) style parts of elements.                                                                                                             

  6. Explain the concept of specificity in CSS.

    • Specificity determines which CSS rule is applied, based on the weight of selectors (ID > class > element).

  7. How do media queries work in responsive design?

    • Media queries apply CSS rules based on device characteristics like screen width: @media (max-width: 600px) {}.

  8. What is Flexbox and how does it work?

    • Flexbox is a layout model that arranges elements in rows or columns, distributing space efficiently with properties like justify-content and align-items.                                                           

  9. What is CSS Grid? How is it different from Flexbox?

    • CSS Grid is a two-dimensional layout system for creating complex layouts, while Flexbox is one-dimensional (row or column).                                                                                                           

  10. How do you center an element vertically and horizontally using CSS?

    • Using Flexbox: display: flex; justify-content: center; align-items: center; or CSS Grid: display: grid; place-items: center;