Scribd
Upload
2 views

CSS Interview Questions

The document provides a comprehensive list of common CSS interview questions along with their answers, covering topics such as CSS definitions, inclusion methods, the box model, and layout techniques. Key concepts discussed include the differences between margin and padding, display properties, z-index, flexbox, media queries, and CSS Grid. It serves as a useful resource for individuals preparing for CSS-related job interviews.

Uploaded by

chandrahass singh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

CSS Interview Questions

The document provides a comprehensive list of common CSS interview questions along with their answers, covering topics such as CSS definitions, inclusion methods, the box model, and layout techniques. Key concepts discussed include the differences between margin and padding, display properties, z-index, flexbox, media queries, and CSS Grid. It serves as a useful resource for individuals preparing for CSS-related job interviews.

Uploaded by

chandrahass singh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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");

You might also like