HTML & CSS Viva Questions with
Answers
1. 1. Q: What is HTML?
A: HTML stands for HyperText Markup Language. It's used to create the structure of
web pages.
2. 2. Q: What are HTML tags?
A: Tags are code elements enclosed in angle brackets <>, used to define HTML elements
like headings, paragraphs, etc.
3. 3. Q: What is the difference between <div> and <span>?
A: <div> is a block-level element; <span> is an inline element.
4. 4. Q: What are semantic HTML elements?
A: Elements like <header>, <footer>, <article> that clearly define their purpose in a
webpage.
5. 5. Q: What is the purpose of the <head> tag?
A: It contains metadata, links to stylesheets, and other information not visible on the
page.
6. 6. Q: What is the function of the <meta> tag?
A: It defines metadata like character encoding, author, viewport settings, etc.
7. 7. Q: What is the difference between <strong> and <b>?
A: <strong> indicates importance; <b> is just visual bolding.
8. 8. Q: What is the <a> tag used for?
A: To create hyperlinks to other pages or locations.
9. 9. Q: How do you open a link in a new tab?
A: Use target="_blank" in the <a> tag.
10. 10. Q: What is the difference between id and class attributes?
A: id is unique per element; class can be reused across multiple elements.
11. 11. Q: What is the use of the <form> tag?
A: It is used to collect user input and submit it to a server.
12. 12. Q: How do you include an image in HTML?
A: Using <img src="path" alt="text">.
13. 13. Q: What is the role of the alt attribute in images?
A: Provides alternative text if the image fails to load and improves accessibility.
14. 14. Q: How do you create a table in HTML?
A: Using <table>, <tr> for rows, <td> for data cells, and <th> for headings.
15. 15. Q: What is the difference between <ol> and <ul>?
A: <ol> creates an ordered (numbered) list; <ul> creates an unordered (bulleted) list.
16. 16. Q: What is a self-closing tag? Give an example.
A: Tags that don’t need a closing tag, e.g., <br>, <hr>, <img>.
17. 17. Q: What is the use of the <iframe> tag?
A: Embeds another webpage within the current page.
18. 18. Q: How do you comment in HTML?
A: <!-- This is a comment -->
19. 19. Q: What is the DOCTYPE declaration?
A: Declares the HTML version. Example: <!DOCTYPE html> for HTML5.
20. 20. Q: What is the difference between HTML and XHTML?
A: XHTML is stricter and XML-based; HTML is more forgiving.
21. 21. Q: What is CSS?
A: Cascading Style Sheets, used to style HTML content.
22. 22. Q: What are the different types of CSS?
A: Inline, Internal, and External.
23. 23. Q: How do you link an external CSS file?
A: Using <link rel="stylesheet" href="style.css"> in the <head>.
24. 24. Q: What is the difference between class and id selectors in CSS?
A: .class targets elements with that class; #id targets a specific element with that ID.
25. 25. Q: What is the CSS box model?
A: A model consisting of margins, borders, padding, and content.
26. 26. Q: What is the use of z-index in CSS?
A: Controls the stacking order of overlapping elements.
27. 27. Q: How do you center a div using CSS?
A: Use margin: auto; or Flexbox/Grid layout.
28. 28. Q: What are pseudo-classes? Give an example.
A: They define a special state, e.g., :hover, :first-child.
29. 29. Q: What is the difference between absolute and relative positioning?
A: Absolute is relative to the nearest positioned ancestor; relative is relative to itself.
30. 30. Q: What is specificity in CSS?
A: Rules that determine which CSS rule applies if there are conflicts.
31. 31. Q: What is the difference between em and rem units?
A: em is relative to the parent; rem is relative to the root element.
32. 32. Q: What is the use of media queries?
A: To apply styles based on screen size/device type (responsive design).
33. 33. Q: What is Flexbox?
A: A layout model for aligning items in a one-dimensional space (row or column).
34. 34. Q: What is the difference between display: none and visibility: hidden?
A: display: none removes the element completely; visibility: hidden hides it but keeps
space.
35. 35. Q: How do you apply multiple classes to an HTML element?
A: By separating them with spaces: class="box highlight"
36. 36. Q: What is the difference between min-width and max-width?
A: min-width sets the minimum width an element can shrink to; max-width sets the
maximum.
37. 37. Q: What is the purpose of the !important rule?
A: Overrides other conflicting styles regardless of specificity.
38. 38. Q: What is a CSS transition?
A: Allows smooth change of property values over time.
39. 39. Q: How do you change the background color in CSS?
A: background-color: red;
40. 40. Q: What is a pseudo-element? Example?
A: Style parts of elements: ::before, ::after
41. 41. Q: What project did you build?
A: I created a responsive portfolio website using HTML, CSS, and JavaScript.
42. 42. Q: How did you make your site responsive?
A: I used media queries and flexible layouts using Flexbox/Grid.
43. 43. Q: What challenges did you face during development?
A: Making layout responsive, browser compatibility, styling complex components.
44. 44. Q: How did you optimize your HTML and CSS?
A: By removing redundant code, compressing images, and combining/minifying CSS.
45. 45. Q: Which layout techniques did you use?
A: I used CSS Flexbox/Grid for layout and responsive alignment.
46. 46. Q: How did you validate your HTML and CSS?
A: Using the W3C validator tools for HTML and CSS.
47. 47. Q: How do you ensure accessibility in your website?
A: By using semantic HTML tags, alt attributes, and ARIA roles where needed.
48. 48. Q: How did you test your project?
A: On different browsers, devices, and using DevTools for responsiveness.
49. 49. Q: What improvements would you make in the future?
A: Add animations, convert to a single-page application, or integrate backend.
50. 50. Q: Why did you choose this project for your final year?
A: It aligned with my interest in web development and showcased my frontend skills.
