Are you looking for an HTML and CSS interview? Our comprehensive guide will help you with all the important questions and answers to crack the interview. Whether you’re an experienced developer or just starting your journey, understanding HTML and CSS is crucial for building dynamic and visually appealing websites.
HTML CSS Interview Questions and Answers
1. What is HTML?
2. What are HTML elements?
3. What is the purpose of the <!DOCTYPE> declaration?
4. What is semantic HTML?
5. Explain the difference between an <article> and a <section> element.
6. What is the difference between an inline and a block-level element?
7. What is the use of the <meta> tag in HTML?
8. How do you make a hyperlink open in a new tab?
9.What is the difference between HTML5 and HTML4?
10. How can you include external JavaScript in HTML?
11 .What is the purpose of the <canvas> element in HTML5?
12. What are data attributes in HTML5?
13. What is a form validation and how is it achieved in HTML5?
14. How can you make an image responsive in HTML?
15. What is the alt attribute in the <img> tag used for?
16. What is CSS?
17. What is the CSS box model?
18. Explain the difference between absolute, relative, fixed, and sticky positioning.
19. What is the z-index and how does it work?
20. What are CSS selectors and give an example of different types?
21. What is specificity in CSS?
22. Explain the display property in CSS.
23. What is Flexbox?
24. What is the CSS Grid?
25. Explain the difference between rem, em, px, and % units in CSS.
26. What is the :nth-child() selector in CSS?
27. What is the difference between visibility: hidden and display: none?
28. How can you implement media queries in CSS?
29. What is the transition property in CSS?
30. What are CSS preprocessors, and name a few?
31. Explain the box-shadow and text-shadow properties.
32. How can you center a div horizontally and vertically in CSS?
1. What is HTML?
Answer:
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a webpage using a series of elements or tags.
2. What are HTML elements?
Answer:
HTML elements are the building blocks of HTML pages. They represent various parts of the page, such as headings, paragraphs, links, images, etc. Each element is defined by a start tag, some content, and an end tag.
3. What is the purpose of the <!DOCTYPE> declaration?
Answer:
The <!DOCTYPE> declaration tells the web browser what version of HTML the page is written in. It ensures the page is rendered correctly in different browsers. The most common is <!DOCTYPE html> for HTML5.
4. What is semantic HTML?
Answer:
Semantic HTML refers to the use of HTML tags that convey the meaning of the content they enclose. Examples include <article>, <footer>, <header>, <section>, and <nav>.
5. Explain the difference between an <article> and a <section> element.
Answer:
<article> is a self-contained, independent piece of content, such as a blog post. <section> is a generic container for thematically grouped content that may not stand on its own.
6. What is the difference between an inline and a block-level element?
Answer:
Block-level elements start on a new line and take up the full width available (e.g., <div>, <h1>, <p>), while inline elements do not start on a new line and only take up as much width as needed (e.g., <span>, <a>, <img>).
7. What is the use of the <meta> tag in HTML?
Answer:
The <meta> tag provides metadata about the HTML document, such as author, keywords, description, and character set. These are often used for SEO and browser behavior.
8. How do you make a hyperlink open in a new tab?
Answer:
By using the target="_blank" attribute in the <a> tag, like this:
<a href="https://example.com" target="_blank">Link</a>
9. What is the difference between HTML5 and HTML4?
Answer:
HTML5 introduces new features like semantic elements, native audio and video support, canvas for graphics, local storage, and geolocation. It also deprecated certain elements like <font> and simplified the <!DOCTYPE> declaration.
10. How can you include external JavaScript in HTML?
Answer:
By using the <script> tag with the src attribute:
<script src="script.js"></script>
11. What is the purpose of the <canvas> element in HTML5?
Answer:
The <canvas> element is used to draw graphics on a web page, such as charts, graphs, and animations, using JavaScript.
12. What are data attributes in HTML5?
Answer:
Data attributes allow you to store extra information on an HTML element. They start with data- followed by a name, like data-id="123", and can be accessed via JavaScript.
13.What is a form validation and how is it achieved in HTML5?
Answer:
HTML5 provides built-in form validation using attributes like required, pattern, minlength, maxlength, and type for input fields.
14. How can you make an image responsive in HTML?
Answer:
By using the srcset attribute in the <img> tag or by applying CSS with the max-width: 100% and height: auto properties.
15. What is the alt attribute in the <img> tag used for?
Answer:
The alt attribute provides alternative text for images, which is displayed if the image cannot be loaded. It is also important for accessibility and SEO.
CSS Interview Questions
16. What is CSS?
Answer:
CSS (Cascading Style Sheets) is a stylesheet language used to control the layout and appearance of HTML elements on a web page.
17. What is the CSS box model?
Answer:
The CSS box model describes how elements are rendered on a webpage. It consists of four parts: content, padding, border, and margin.
18. Explain the difference between absolute, relative, fixed, and sticky positioning.
Answer:
absolute: Positioned relative to its nearest positioned ancestor.relative: Positioned relative to its normal position.fixed: Positioned relative to the viewport (it stays in place when scrolling).sticky: A hybrid of relative and fixed, it toggles between the two based on scroll position.
19. What is the z-index and how does it work?
Answer:
The z-index controls the stacking order of elements. Elements with a higher z-index value are displayed in front of those with a lower value. It only works on positioned elements (e.g., relative, absolute, or fixed).
20. What are CSS selectors and give an example of different types?
Answer: CSS selectors are patterns used to select the elements you want to style. Examples:
- Universal selector (
*) - Class selector (
.class-name) - ID selector (
#id) - Element selector (
div,p, etc.) - Attribute selector (
[type="text"])
21. What is specificity in CSS?
Answer:
Specificity determines which CSS rule is applied when there are conflicting styles. It is calculated based on the types of selectors used. Inline styles have the highest specificity, followed by IDs, classes, and element selectors.
22. Explain the display property in CSS.
Answer: The display property determines how an element is displayed. Common values include:
block: The element is displayed as a block.inline: The element is displayed inline.inline-block: Behaves like an inline element but accepts block properties (e.g., width, height).none: Hides the element.
23. What is Flexbox?
Answer:
Flexbox (Flexible Box Layout) is a CSS layout model that allows for more efficient arrangement of elements within a container. It provides easy alignment, distribution of space, and responsive design features.
24. What is the CSS Grid?
Answer:
CSS Grid is a powerful layout system that allows for two-dimensional (rows and columns) layout designs. It offers precise control over how items are placed and resized in a grid.
25. Explain the difference between rem, em, px, and % units in CSS.
Answer:
px: Absolute unit representing pixels.em: Relative to the font-size of the parent element.rem: Relative to the font-size of the root element (usually<html>).%: Relative to the size of the parent element.
26. What is the :nth-child() selector in CSS?
Answer:
The :nth-child() selector selects elements based on their position within a parent. It can accept keywords like even, odd, or numeric expressions like 2n+1 to target elements dynamically.
27. What is the difference between visibility: hidden and display: none?
Answer:
visibility: hidden hides the element but keeps its space in the layout, while display: none removes the element from the document flow, freeing up the space it would occupy.
28. How can you implement media queries in CSS?
Answer:
Media queries are used for responsive design by applying different styles based on screen size or device type. Example:
@media (max-width: 768px) { body { background-color: lightblue; } }
29. What is the transition property in CSS?
Answer:
The transition property allows you to change CSS properties smoothly over a specified duration. Example:
div { transition: background-color 0.5s; }
30. What are CSS preprocessors, and name a few?
Answer:
CSS preprocessors are scripting languages that extend CSS with features like variables, nesting, and mixins. Examples include Sass, LESS, and Stylus.
31. Explain the box-shadow and text-shadow properties.
Answer:
box-shadow: Adds shadow effects to an element’s box.
text-shadow: Adds shadow effects to text.
32. How can you center a div horizontally and vertically in CSS?
Answer:
One of the easiest ways to center a div is using Flexbox:
.center-div { display: flex; justify-content: center; align-items: center; height: 100vh; }
These questions test both basic concepts (such as understanding tags and elements) and advanced CSS topics (such as Flexbox, Grid, and positioning).
Learn More: Carrer Guidance [HTML CSS Interview Questions and Answers]
API Testing Interview Questions and Answers
Salesforce Integration Interview Questions and Answers for fresher
Salesforce integration interview questions and answers for experienced
Flutter Interview Questions and Answers
Active Directory Interview Questions and Answers for Fresher
Active directory interview questions answers for experienced
Java interview questions and answers for 10 years experience