As a web developer, understanding CSS is very essential. CSS (Cascading Style Sheets) is the language used to style and format the layout of web pages. In this blog, we'll explore some common CSS interview questions and their answers to help you ace your next interview. These questions not only test your knowledge but also assess how well you can apply CSS in real-world situations.
1. What is the difference between class and id selectors in CSS?
Class: A class selector targets elements that share the same class attribute. Multiple elements can have the same class, and a class can be used more than once in the CSS.
.example { color: blue; }
id: An ID selector is unique and targets only one element with that specific ID. It can only be used once per page.
#example { color: red; }
2. What is the box model in CSS?
The CSS box model describes the rectangular boxes generated for elements on a web page. Each box consists of four areas:
Content: The actual content of the element.
Padding: Clears an area around the content (inside the border).
Border: A border surrounding the padding.
Margin: Clears an area outside the border, creating space between elements.
3. Explain the difference between inline, block, and inline-block elements.
inline: The element does not start on a new line and only takes up as much width as necessary.
block: The element starts on a new line and takes up the full width of its container.
inline-block: Combines both behaviors: the element is inline but also respects width and height properties.
4. What is the difference between em, rem, and px units in CSS?
px: A fixed-size unit, relative to the resolution of the display.
em: A relative unit that depends on the font size of the element itself or its parent.
rem: A relative unit, but it depends on the root element’s font size, making it more predictable than em.
5. What are CSS pseudo-classes and pseudo-elements?
Pseudo-classes: Used to define the special state of an element. For example:
- :hover: Applied when the user hovers over an element.
- :focus: Applied when an element gains focus. %}
Pseudo-elements: Used to style specific parts of an element. For example:
- ::before: Inserts content before an element.
- ::after: Inserts content after an element.
6. What are the different types of CSS positioning?
static: Default positioning, elements are positioned according to the normal document flow.
relative: Elements are positioned relative to their normal position.
absolute: Positioned relative to the nearest positioned ancestor (not static).
fixed: Positioned relative to the viewport, meaning it stays in place even when the page is scrolled.
sticky: Acts like relative until it reaches a defined scroll position, then it behaves like fixed.
8. What is Flexbox and how does it work?
Flexbox is a layout model that allows for the easy arrangement of elements within a container. It enables you to align items horizontally or vertically with ease.
Key properties include:
display: flex on the container.
justify-content to align items horizontally.
align-items to align items vertically.
flex on items to control their growth and shrinkage within the container.
9. What are media queries and how do they work?
Media queries allow you to apply different styles to elements based on the characteristics of the device (e.g., screen width, height, orientation, print). Example:
@media (max-width: 768px) {
body { background-color: lightblue; }
}
This will change the background color of the body element on devices with a screen width of 768px or less
11. How can you create a responsive design using CSS?
- Use flexible grids or Flexbox for layout.
- Apply relative units like em, rem, % instead of fixed units like px.
- Utilize media queries to adjust styles based on different screen sizes.
- Ensure that images are responsive using max-width: 100% to prevent overflow.
12. What is the z-index property and how does it work?
The z-index property controls the stacking order of elements. Elements with a higher z-index are stacked in front of elements with a lower z-index. It only works on positioned elements (those with position: relative, absolute, fixed, or sticky).
Top comments (1)
I'd be ashamed to ask those questions in an interview, to be honest. Those are things you might ask to novices of a CSS bootcamp.
Try asking "how do you organize you CSS when building a medium to large web application?"