Important HTML and CSS Questions and Answers
HTML Questions and Answers
Q: What is HTML?
A: HTML (HyperText Markup Language) is the standard language used to create web pages. It defines the
structure of a webpage using elements like headings, paragraphs, links, images, etc.
Q: What is the difference between <div> and <span>?
A: <div> is a block-level element used to group larger sections.
<span> is an inline-level element used for styling small text parts.
Q: What is the use of the <a> tag?
A: The <a> (anchor) tag is used to create hyperlinks.
Example: <a href='https://google.com'>Go to Google</a>
Q: What are semantic tags? Give examples.
A: Semantic tags describe the meaning of content.
Examples: <header>, <footer>, <article>, <section>, <nav>
Q: What is the difference between HTML and HTML5?
A: HTML5 is the latest version with new features like <video>, <audio>, <canvas>, new form inputs, better
mobile support, and local storage APIs.
Q: What is the difference between id and class?
A: id is unique and used once in a page (#id)
class can be used multiple times (.class)
Q: What is the use of the <form> tag?
A: Used to collect user input. It can include <input>, <textarea>, <select>, etc.
Important HTML and CSS Questions and Answers
Q: How do you add an image in HTML?
A: Using the <img> tag:
<img src='image.jpg' alt='description'>
CSS Questions and Answers
Q: What is CSS?
A: CSS (Cascading Style Sheets) is used to style HTML elements like colors, layouts, fonts, spacing, etc.
Q: What are the types of CSS?
A: Inline CSS: style attribute inside HTML tag
Internal CSS: inside <style> tag in <head>
External CSS: separate .css file linked to HTML
Q: How do you link a CSS file to HTML?
A: <link rel='stylesheet' href='style.css'>
Q: What is the difference between em, rem, px, and %?
A: px: Fixed size
em: Relative to parent's font-size
rem: Relative to root (html) font-size
%: Relative to container/parent
Q: What is the Box Model in CSS?
A: Each element is a box with: Content, Padding, Border, Margin
Q: What are pseudo-classes in CSS?
A: Special states of elements.
Important HTML and CSS Questions and Answers
Examples: :hover, :focus, :nth-child()
Q: What is the difference between relative, absolute, and fixed positioning?
A: relative: positioned relative to normal position
absolute: positioned relative to nearest positioned ancestor
fixed: positioned relative to browser window
Q: How to center a div horizontally and vertically?
A: .parent { display: flex; justify-content: center; align-items: center; }
Bonus: Practice Task
Q: Create a red button with white text and some padding.
A: <!DOCTYPE html>
<html>
<head>
<style>
.btn {
background-color: red;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
</style>
</head>
<body>
<button class='btn'>Click Me</button>
</body>
</html>
