Top HTML & CSS Interview Questions with Answers
y
ne
HTML Interview Questions & Answers
ur
What is HTML?
o
Answer: HTML (HyperText Markup Language) is the standard language for creating web pages.
_j
si
What are the new features in HTML5?
Answer: HTML5 introduced new semantic elements, audio and video support, canvas, and local
m
storage.
va
What is the difference between HTML and XHTML?
@
Answer: XHTML is a stricter and more structured version of HTML, requiring proper syntax and case
sensitivity.
Explain the purpose of the <!DOCTYPE> declaration.
Answer: It tells the browser which HTML version to use for rendering the page correctly.
What are semantic elements in HTML?
Answer: Semantic elements (like <article>, <section>, <header>) provide meaning to web content
for better SEO and accessibility.
What is the difference between <div> and <span>?
Answer: <div> is a block-level element used for layout, while <span> is an inline element used for
styling text.
What is the use of the 'alt' attribute in an <img> tag?
Answer: The 'alt' attribute provides alternative text for images, improving accessibility and SEO.
How do you create a hyperlink in HTML?
Answer: Using the <a> tag: <a href='https://example.com'>Click Here</a>.
What is the difference between 'id' and 'class' attributes?
Answer: 'id' is unique and used for a single element, while 'class' can be used for multiple elements.
What are HTML forms and their elements?
Answer: Forms collect user input and include elements like <input>, <textarea>, <button>, and
<select>.
CSS Interview Questions & Answers
What is CSS and why is it used?
Answer: CSS (Cascading Style Sheets) is used to style HTML elements and improve web design.
What are the different types of CSS?
Answer: Inline CSS (inside elements), Internal CSS (inside <style> tag), and External CSS (linked
via .css file).
What is the difference between relative, absolute, and fixed positioning?
Answer: Relative positions element based on normal flow, absolute places it relative to nearest
positioned ancestor, fixed keeps it fixed on the screen.
What are pseudo-classes and pseudo-elements in CSS?
Answer: Pseudo-classes (e.g., :hover) apply styles based on element state, while pseudo-elements
(e.g., ::before) style specific parts of an element.
Explain the concept of Flexbox in CSS.
Answer: Flexbox is a layout model that allows responsive alignment and distribution of items in a
container.
How does Grid layout work in CSS?
Answer: CSS Grid is a powerful 2D layout system that divides a page into rows and columns for
precise placement.
What is the difference between 'em', 'rem', 'px', and '%' in CSS?
Answer: 'px' is absolute, 'em' is relative to the parent font size, 'rem' is relative to the root font size,
and '%' is relative to the containing element.
How can you make a website responsive using CSS?
Answer: Using media queries, flexible layouts, and relative units like % and em.
What is the difference between inline, internal, and external CSS?
Answer: Inline applies styles inside an element, internal uses <style> in HTML, and external links to
a separate CSS file.
How does z-index work in CSS?
Answer: z-index controls the stack order of elements, with higher values appearing in front of lower
values.
