HTML & CSS Interview Questions & Answers
HTML (HyperText Markup Language)
1. What is HTML?
o HTML is the standard language used to create the basic structure and
content of web pages. Think of it as the skeleton of a website.
2. What do HTML tags do?
o Tags are like keywords surrounded by angle brackets (< >) that tell the
browser how to display different types of content (e.g., <p> for a
paragraph, <img> for an image).
3. What is an HTML element?
o It's usually a start tag, some content, and an end tag (e.g., <p>This is
text.</p>). Some elements are "empty" and don't need an end tag (e.g.,
<br>).
4. What are HTML attributes?
o Attributes provide extra information about an HTML element and are
placed inside the start tag (e.g., <img src="[Link]"> where src is an
attribute).
5. What is the basic structure of an HTML page?
o It usually includes:
▪ <!DOCTYPE html>: Tells the browser it's an HTML5 document.
▪ <html>: The main container for the whole page.
▪ <head>: Contains information about the page (like the title) that
isn't directly displayed.
▪ <body>: Contains all the visible content of the page.
6. What is the purpose of <!DOCTYPE html>?
o It tells the web browser which version of HTML the page is written in
(specifically HTML5), so the browser knows how to read and display it
correctly.
7. What goes inside the <head> element?
o Things like the page title (<title>), links to CSS files (<link>), links to
JavaScript files (<script>), and other meta-information about the page
(<meta>).
8. What goes inside the <body> element?
o All the content that users will actually see on the web page, like text,
headings, images, links, lists, etc.
9. What are headings in HTML?
o HTML provides six levels of headings, <h1> to <h6>. <h1> is the most
important (main heading), and <h6> is the least important.
10. How do you create a paragraph in HTML?
o Using the <p> tag. Example: <p>This is a paragraph.</p>
11. How do you create a link in HTML?
o Using the <a> (anchor) tag with the href attribute, which specifies the
link's destination. Example: <a href="[Link] to
Google</a>
12. How do you insert an image in HTML?
o Using the <img> tag with the src attribute (specifies the image
source/URL) and an alt attribute (alternative text). Example: <img
src="[Link]" alt="A beautiful photo">
13. What is the alt attribute in an <img> tag for?
o It provides alternative text for an image if the image cannot be displayed
(e.g., due to a slow connection or if the user is using a screen reader).
Important for accessibility.
14. What are lists in HTML?
o Ways to group related items.
▪ <ul>: Unordered list (bullet points).
▪ <ol>: Ordered list (numbered).
▪ <li>: List item (goes inside <ul> or <ol>).
15. How do you create a table in HTML?
o Using the <table> tag, with <tr> for table rows, <th> for table headers, and
<td> for table data cells.
16. What are HTML forms used for?
o To collect input from users, like names, email addresses, passwords,
choices, etc. Created using the <form> tag.
17. What are some common <input> types in HTML forms?
o text, password, email, number, date, checkbox, radio, submit, file.
18. What is semantic HTML?
o Using HTML tags that clearly describe the meaning of the content they
hold, rather than just how they look (e.g., using <article>, <nav>, <footer>
instead of just <div>).
19. Why is semantic HTML important?
o Accessibility: Helps screen readers understand the page structure for
visually impaired users.
o SEO: Helps search engines understand your content better.
o Readability: Makes your code easier for other developers (and yourself)
to understand.
20. What are some examples of semantic HTML5 tags?
o <header>, <footer>, <nav>, <article>, <section>, <aside>, <main>.
21. What is the difference between <div> and <span>?
o <div>: A block-level element used as a general container to group larger
sections of content. It starts on a new line.
o <span>: An inline element used to group smaller pieces of content within
a line, often for styling specific text.
22. What is an empty element in HTML?
o An element that does not have a closing tag or content between a start
and end tag (e.g., <br>, <hr>, <img>, <input>).
23. How do you add comments in HTML?
o Using ``. Comments are ignored by the browser but are helpful for
developers.
24. What is the purpose of the id attribute?
o To provide a unique identifier for an HTML element on a page. It can be
used by CSS to style that specific element or by JavaScript to manipulate
it. An id must be unique within the entire HTML document.
25. What is the purpose of the class attribute?
o To assign one or more class names to an HTML element. Multiple
elements can share the same class. It's primarily used by CSS to style
groups of elements and by JavaScript to select and manipulate them.
26. What is HTML5?
o The latest major version of HTML, which introduced new features like
semantic tags (e.g., <article>, <header>), new form controls, multimedia
tags (<audio>, <video>), and APIs for things like local storage and
geolocation.
27. What is the <canvas> element in HTML5?
o Used to draw graphics, animations, or other visual images on the fly
using JavaScript.
28. What are the <audio> and <video> tags in HTML5?
o Used to embed sound content and video content directly into web
pages without needing plugins like Flash.
29. How can you embed a YouTube video in HTML?
o YouTube provides an "embed" code (usually an <iframe>) that you can
copy and paste into your HTML.
30. What is an <iframe>?
o An inline frame used to embed another HTML document within the
current HTML document.
31. What is HTML validation?
o The process of checking your HTML code against the official HTML
standards to ensure it's well-formed and free of syntax errors. Helps
ensure cross-browser compatibility.
32. What is the difference between <strong> and <b> tags?
o <b> (bold): Makes text bold purely for visual styling.
o <strong>: Indicates that the text has strong importance or seriousness (it
also typically appears bold). It's semantic.
33. What is the difference between <em> and <i> tags?
o <i> (italic): Makes text italic purely for visual styling.
o <em> (emphasis): Indicates that the text should be emphasized (it also
typically appears italic). It's semantic.
34. Can you nest tables within tables?
o Yes, but it's generally discouraged for layout purposes as it can make the
HTML complex and less accessible. CSS is preferred for layout.
35. What is the target="_blank" attribute used for in an <a> tag?
o It tells the browser to open the linked document in a new browser
window or tab.
CSS (Cascading Style Sheets)
36. What is CSS?
o CSS is a language used to describe how HTML elements should be
styled and displayed on a web page (e.g., colors, fonts, layout). It
controls the look and feel.
37. What are the three ways to include CSS in an HTML page?
o Inline CSS: Using the style attribute directly within an HTML tag.
o Internal CSS: Using the <style> tag inside the <head> section of the
HTML file.
o External CSS: Linking to a separate .css file using the <link> tag in the
<head> section (most common and recommended).
38. What is a CSS selector?
o A pattern that identifies the HTML element(s) to which a set of CSS
rules should be applied.
39. What are some common types of CSS selectors?
o Element Selector: Selects all elements of a specific type (e.g., p selects
all paragraphs).
o ID Selector: Selects a single element with a specific id (e.g., #myId).
o Class Selector: Selects all elements with a specific class (e.g.,
.myClass).
o Attribute Selector: Selects elements based on their attributes or
attribute values (e.g., input[type="text"]).
o Universal Selector: * (selects all elements, use with caution).
40. What is the CSS Box Model?
o A concept where each HTML element is treated as a rectangular box. This
box has four parts: Content, Padding, Border, and Margin.
41. Explain the parts of the CSS Box Model.
o Content: The actual text, image, or other media within the element.
o Padding: The transparent space around the content, inside the border.
o Border: A line that goes around the padding and content.
o Margin: The transparent space around the border, outside the element,
separating it from other elements.
42. What is the difference between margin and padding?
o Padding is space inside an element's border.
o Margin is space outside an element's border, creating space between
elements.
43. What are the display property values block, inline, and inline-block?
o block: The element starts on a new line and takes up the full width
available. You can set its width and height. (e.g., <div>, <p>)
o inline: The element does not start on a new line and only takes up as
much width as necessary. You cannot directly set its width and height.
(e.g., <span>, <a>)
o inline-block: Like inline (flows with text), but you can set its width and
height like a block element.
44. What is CSS Specificity?
o A set of rules the browser uses to decide which CSS style rule applies if
multiple rules target the same element and conflict. More specific
selectors (like an ID) override less specific ones (like a class or element
selector).
45. What does "Cascading" in CSS mean?
o It refers to the way styles "cascade" down from more general rules to
more specific rules, and how styles from different sources (browser
defaults, user stylesheets, author stylesheets) are combined. The last
rule applied or the most specific rule wins.
46. How do you set the color of text in CSS?
o Using the color property. Example: p { color: blue; }
47. How do you set the background color of an element in CSS?
o Using the background-color property. Example: body { background-color:
lightgray; }
48. What is the difference between em and rem units in CSS?
o em: Relative to the font-size of its direct parent element.
o rem (root em): Relative to the font-size of the root element (<html>).
rem is often easier to manage for consistent scaling.
49. What is float in CSS used for?
o The float property was traditionally used to make elements "float" to the
left or right, allowing text and other inline elements to wrap around them
(e.g., for image layouts next to text). Modern layouts often use Flexbox or
Grid instead.
50. What are CSS positioning properties?
o Properties that control how an element is positioned on the page.
▪ static: Default value. Element flows in the normal document order.
▪ relative: Positioned relative to its normal position. Can be offset.
▪ absolute: Positioned relative to its nearest positioned ancestor
(not static). Taken out of normal flow.
▪ fixed: Positioned relative to the browser window (viewport). Stays
in place when scrolling.
▪ sticky: A hybrid of relative and fixed. Behaves like relative until it
hits a specified offset, then it "sticks" like fixed.
51. What is the z-index property?
o Controls the stacking order of positioned elements (elements whose
position is not static). An element with a higher z-index will appear in front
of an element with a lower z-index.
52. What are pseudo-classes in CSS?
o Keywords added to selectors that define a special state of an element
(e.g., :hover when mousing over, :focus when an element is selected,
:nth-child() to select specific children).
53. What are pseudo-elements in CSS?
o Keywords added to selectors that let you style a specific part of an
element's content (e.g., ::before to insert content before, ::after to insert
content after, ::first-letter to style the first letter).
54. What is Responsive Web Design (RWD)?
o An approach to web design that makes web pages render well and look
good on a variety of devices and screen sizes (desktops, tablets, mobile
phones).
55. How do you achieve RWD using CSS?
o Media Queries: Apply different CSS rules based on device characteristics
(like screen width).
o Flexible Grids/Layouts: Use relative units like percentages, em, rem for
widths.
o Flexible Images/Media: Ensure images and media scale appropriately.
56. What are Media Queries?
o A CSS technique that allows you to apply different styles based on
conditions such as screen width, height, orientation, or resolution.
Example: @media (max-width: 600px) { /* styles for small screens */ }
57. What is the viewport meta tag?
o An HTML meta tag (<meta name="viewport" content="width=device-
width, initial-scale=1.0">) that controls the layout on mobile browsers.
It sets the width of the viewport to the device width and the initial zoom
level. Essential for RWD.
58. What is CSS Flexbox?
o A layout module in CSS designed for arranging items in a single
dimension (a row or a column). It makes it easier to align and distribute
space among items in a container, even when their size is unknown.
59. What are the main properties of a Flexbox container?
o display: flex; (or inline-flex), flex-direction, justify-content, align-items,
flex-wrap.
60. What are the main properties of Flexbox items?
o flex-grow, flex-shrink, flex-basis, order, align-self.
61. What is CSS Grid Layout?
o A two-dimensional layout system for CSS, meaning it can handle both
columns and rows. It's very powerful for creating complex page layouts.
▦
62. What are the main properties of a CSS Grid container?
o display: grid; (or inline-grid), grid-template-columns, grid-template-rows,
grid-gap (or gap).
63. What are CSS Variables (Custom Properties)?
o Allow you to define reusable values (e.g., colors, font sizes) in your CSS.
They start with two hyphens (e.g., --main-color: blue;) and are accessed
using the var() function (e.g., color: var(--main-color);).
64. What is the difference between visibility: hidden; and display: none;?
o visibility: hidden;: The element is hidden, but it still takes up space in
the layout.
o display: none;: The element is completely removed from the document
flow and does not take up any space.
65. How do you center a block-level element horizontally?
o Set its width and then set its margin-left and margin-right to auto.
Example: div { width: 50%; margin-left: auto; margin-right: auto; } or
shorthand margin: 0 auto; (if top/bottom margin is 0).
66. What are CSS transitions?
o Allow you to smoothly change property values over a given duration
when a state changes (e.g., on :hover).
67. What are CSS animations?
o Allow you to create more complex animations by defining keyframes
that specify the styles at different points during the animation sequence.
68. What is the box-sizing property?
o Controls how the total width and height of an element are calculated.
▪ content-box (default): Width and height apply only to the content.
Padding and border are added on top.
▪ border-box: Width and height include the content, padding, and
border. This often makes layout easier.
69. What is a CSS Reset or Normalize?
o A set of CSS rules used to reduce browser inconsistencies in default
styling of HTML elements, providing a more consistent baseline to build
upon. [Link] is a popular alternative to a full reset.
70. How can you make text bold in CSS?
o Using the font-weight property. Example: p { font-weight: bold; } or font-
weight: 700;
71. How can you make text italic in CSS?
o Using the font-style property. Example: p { font-style: italic; }
72. What does CSS !important do?
o When !important is added to a style declaration, that declaration
overrides any other declarations for that property on that element,
regardless of specificity or source order. It should be used sparingly as it
can make debugging harder.
73. What is a CSS Sprite?
o A technique where multiple small images are combined into a single
larger image file. CSS is then used to display only a specific portion of
the sprite as a background for an element. This reduces the number of
HTTP requests and can improve performance.
74. Can you explain CSS Specificity calculation (briefly)?
o Selectors have different weights:
▪ Inline styles (highest).
▪ IDs.
▪ Classes, pseudo-classes, attribute selectors.
▪ Element selectors, pseudo-elements (lowest).
o The browser calculates a "score" to determine which rule wins.
75. What is the CSS opacity property?
o Controls the transparency level of an element. A value of 1 is fully
opaque, and 0 is fully transparent.
HTML & CSS Combined/General
76. How do you link an external CSS file to an HTML document?
o In the <head> section of the HTML, use the <link> tag: <link
rel="stylesheet" type="text/css" href="[Link]">
77. What is the difference between an ID and a Class?
o ID (id="myId"): Must be unique within the entire HTML page. Used to
target a single, specific element.
o Class (class="myClass"): Can be applied to multiple elements. Used to
group elements that share similar styling or behavior.
78. When would you use an ID selector vs. a Class selector in CSS?
o Use an ID selector for styling a unique element on the page (e.g., the
main header or footer).
o Use a Class selector for styling multiple elements that should look or
behave similarly (e.g., all warning messages, all buttons of a certain type).
79. What is the advantage of using external stylesheets?
o Separation of Concerns: Keeps HTML (structure) and CSS (presentation)
separate.
o Maintainability: Easier to update styles across multiple pages by editing
one CSS file.
o Performance: The CSS file can be cached by the browser, speeding up
subsequent page loads.
80. What does "graceful degradation" mean in web design?
o Designing a website so that it still works and is accessible on older
browsers or less capable devices, even if some advanced features are
not available.
81. What does "progressive enhancement" mean in web design?
o Starting with a baseline of content and functionality that works for all
browsers, and then adding more advanced features and enhancements
for browsers that can support them.
82. What are web fonts and how do you use them?
o Fonts that are not pre-installed on a user's system but are downloaded
by the browser to render text. You can use them with the CSS @font-face
rule or by linking to font services like Google Fonts.
83. How can you ensure your website is accessible?
o Use semantic HTML, provide alt text for images, ensure good color
contrast, make sure content is keyboard navigable, use ARIA attributes
where needed.
84. What is the default display value for <img>?
o inline (or more accurately, inline-block in some contexts due to its ability
to have width/height). It flows with text but you can set its dimensions.
85. What is the default display value for <a>?
o inline.
86. What is the default display value for <li>?
o list-item (which behaves much like block).
87. How would you create a simple three-column layout using HTML and CSS?
o Using Flexbox: Set the parent container to display: flex; and then each
column flex: 1; (or other flex properties).
o Using CSS Grid: Set the parent display: grid; and define grid-template-
columns: 1fr 1fr 1fr;.
o (Older method, less ideal): Using floats for each column and clearing the
float.
88. What is the purpose of CSS frameworks like Bootstrap or Tailwind CSS?
o To provide pre-built components and utility classes to help developers
build responsive and styled websites more quickly and consistently.
89. How do you comment in CSS?
o Using /* This is a CSS comment */.
90. What is "above the fold"?
o The portion of a web page that is visible without scrolling when the page
first loads. It's important to put key content and calls to action here.
91. Can you apply CSS styles to an HTML element based on its attribute?
o Yes, using attribute selectors. For example, input[type="submit"] {
background-color: green; }
92. What is the universal selector in CSS?
o The asterisk (*). It selects all HTML elements on the page. It should be
used carefully as it can impact performance and override other styles
unintentionally.
93. What are vendor prefixes (e.g., -webkit-, -moz-, -ms-) in CSS?
o Prefixes added to some CSS properties that were experimental or
specific to certain browser engines. They were used to allow developers
to use new CSS features before they became fully standardized. Less
common now as browsers have better standards support.
94. What does "pixel-perfect" design mean?
o Trying to make the website look exactly like the design mockups, down
to the individual pixel. While good attention to detail is important, some
flexibility is often needed for responsiveness.
95. What is the difference between visibility: collapse and visibility: hidden?
o visibility: hidden: Element is hidden but still takes up space.
o visibility: collapse: Primarily for table elements. For table rows/columns,
it removes the element and its space (like display: none). For other
elements, it often behaves like hidden.
96. How does the browser render an HTML and CSS page?
o Parsing HTML: Browser reads the HTML to build the DOM (Document
Object Model) tree.
o Parsing CSS: Browser reads CSS (from various sources) to build the
CSSOM (CSS Object Model) tree.
o Render Tree: Combines DOM and CSSOM to create a tree of only visible
elements with their styles.
o Layout (Reflow): Calculates the exact position and size of each element
on the screen.
o Painting (Repaint): Draws the pixels on the screen.
97. What is "FOUC" (Flash of Unstyled Content)?
o When a web page briefly appears with no styling (just plain HTML) before
the CSS loads and applies. Can be mitigated by placing <link> tags for
CSS in the <head>.
98. How can you override a CSS style?
o Increase specificity of your selector.
o Place your rule later in the CSS file (if specificity is the same).
o Use !important (as a last resort).
99. What is the currentColor keyword in CSS?
o A special keyword that represents the value of the color property of an
element. It can be used for other properties like border-color or
background-color to make them inherit the text color.
100. What is your favorite HTML tag or CSS property and why?
• This is a common "soft" question. Pick one you understand well and can explain
a practical use case for. Example: "I like CSS Flexbox because it dramatically
simplifies creating complex, responsive layouts with much less code than older
methods."
