Here are the top 10 HTML and CSS interview questions along with their answers:
1. What is the difference between HTML and HTML5?
Answer:
- HTML is the standard markup language for creating web pages, while HTML5 is the latest version of HTML with new features such as multimedia (audio and video), new semantic elements (like
<article>,<section>, etc.), improved form controls, and support for offline storage with technologies like Web Storage and WebSockets.
2. What are semantic elements in HTML5? Give examples.
Answer:
Semantic elements clearly describe their meaning in a human- and machine-readable way. For example:
<header>: Defines the header of a document or section.<footer>: Defines the footer.<article>: Defines a self-contained piece of content.<section>: Defines a section in a document.<nav>: Defines a navigation block. These elements help with search engine optimization (SEO) and accessibility.
3. What is the box model in CSS?
Answer:
The CSS box model is a concept that describes the structure of an HTML element as a rectangular box. It includes:
- Content: The actual content (text, images, etc.).
- Padding: Space between the content and the border.
- Border: A line surrounding the padding.
- Margin: Space between the border and other elements.
4. What is the difference between inline, block, and inline-block elements?
Answer:
- Inline elements take up only as much space as their content and don't start on a new line. Examples:
<span>,<a>. - Block elements take up the full width available, start on a new line, and push other content down. Examples:
<div>,<p>. - Inline-block elements allow you to place elements side by side (inline), but they also respect width and height properties, unlike inline elements. Example:
<img>,<button>.
5. What is the difference between class and ID selectors in CSS?
Answer:
- Class selectors (denoted by a
.) can be used multiple times within a document. For example,.button { }. - ID selectors (denoted by a
#) must be unique and used only once per page. For example,#header { }. IDs have higher specificity than classes, meaning if both are applied to the same element, the ID styles will take precedence.
6. What is the purpose of the z-index in CSS?
Answer:
The z-index property controls the vertical stacking order of elements on a web page. Elements with a higher z-index value will appear on top of elements with lower values. It only works for positioned elements (elements with position: relative, absolute, or fixed).
7. What is the difference between visibility: hidden and display: none in CSS?
Answer:
visibility: hiddenmakes an element invisible, but it still occupies space in the layout.display: noneremoves the element entirely from the document flow, meaning it doesn’t take up any space on the page.
8. What is a CSS preprocessor? Name some examples.
Answer:
A CSS preprocessor is a scripting language that extends CSS and compiles into standard CSS. It provides features like variables, nested rules, and mixins that aren't available in regular CSS. Popular examples include:
- Sass (Syntactically Awesome Stylesheets).
- LESS.
- Stylus.
9. What is a media query in CSS, and why is it used?
Answer:
A media query allows CSS to be applied based on the characteristics of the device, such as screen width, height, or orientation. It’s used to create responsive designs that adjust the layout according to the device’s size. Example:
css@media (max-width: 768px) {
body {
font-size: 14px;
}
}
10. What is Flexbox, and how does it work?
Answer:
Flexbox (Flexible Box Layout) is a CSS layout model that makes it easier to design a flexible and responsive layout structure. It aligns items in a container and distributes space dynamically. Properties like justify-content, align-items, and flex-wrap are used to control the layout. Example:
css.container {
display: flex;
justify-content: space-between;
align-items: center;
}
This will evenly distribute the child elements of the .container and align them in the center vertically.