CSS Interview Questions
1. What is CSS?
Answer:
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of an HTML
document, including layout, colors, fonts, and animations.
2. What are the different ways to include CSS in HTML?
Answer:
Inline CSS: Using the style attribute inside HTML tags.
Internal CSS: Using the <style> tag within the <head> section.
External CSS: Linking an external .css file using the <link> tag.
3. What is the box model in CSS?
Answer:
The CSS box model consists of:
Content
Padding
Border
Margin
It defines the spacing and layout of elements.
4. What is the difference between margin and padding?
Answer:
margin: Space outside an element, between elements.
padding: Space inside an element, between content and border.
5. What is the difference between display: none and visibility: hidden?
Answer:
display: none: Removes the element from the document flow (it takes no space).
visibility: hidden: Hides the element but retains its space in the document flow.
6. What is the purpose of z-index in CSS?
Answer:
z-index controls the stacking order of elements. A higher z-index value brings an element to the
front.
7. What is the difference between inline and block elements?
Answer:
inline: Takes only the space required by the content (e.g., <span>).
block: Takes the full width of its container (e.g., <div>).
8. What is a CSS selector?
Answer:
A CSS selector is used to target HTML elements for styling. Examples include:
Simple Selector
Combinator Selector
Pseudo-class Selector
Pseudo-element Selector
Attribute Selector
9. What is the difference between em and rem units?
Answer:
em: Relative to the font size of the parent element.
rem: Relative to the font size of the root (<html>) element.
10. What is the purpose of flexbox in CSS?
Answer:
Flexbox is a layout model used to create flexible and responsive layouts. It aligns and distributes
space among items in a container.
11. What is the difference between position: absolute and position: relative?
Answer:
relative: Positions the element relative to its normal position.
absolute: Positions the element relative to its nearest positioned ancestor.
12. What is the purpose of media queries in CSS?
Answer:
Media queries are used to apply styles based on device characteristics, such as screen width, height,
or orientation. They are essential for responsive design.
13. What is the difference between transition and animation in CSS?
Answer:
transition: Used for simple animations between two states (e.g., hover effects).
animation: Used for complex animations with multiple keyframes.
14. What is the purpose of pseudo-classes in CSS?
Answer:
Pseudo-classes are used to define special states of an element, e.g., :hover, :focus, :nth-child().
15. What is the difference between float and flexbox?
Answer:
float: Used for wrapping text around images or creating simple layouts.
flexbox: Used for creating complex, responsive layouts with better control over alignment and
spacing.
16. What is the purpose of grid in CSS?
Answer:
CSS Grid is a layout system used to create two-dimensional grid-based layouts. It provides precise
control over rows and columns.
17. What is the difference between vh and vw units?
Answer:
vh: 1% of the viewport height.
vw: 1% of the viewport width.
18. What is the purpose of box-sizing: border-box?
Answer:
box-sizing: border-box includes padding and border in the element's total width and height, making
layout calculations easier.
19. What is the difference between inherit and initial in CSS?
Answer:
inherit: Inherits the value from the parent element.
initial: Sets the property to its default value.
20. What is the purpose of @import in CSS?
Answer:
@import is used to include external CSS files within another CSS file.
Example: @import url("styles.css");
