CSS Interview Questions and Answers

1. What are the different ways to apply CSS to a web page?

Inline CSS, Internal CSS, and External CSS.

2. What is the CSS box model?

The box model includes the content, padding, border, and margin of an element.

3. Explain the difference between class and id selectors.

Class can be used multiple times on a page, while id is unique and used only once.

4. What is Flexbox?

Flexbox is a CSS layout model that allows responsive design by adjusting the size and position of items inside a container.

5. What is the difference between absolute, relative, fixed, and static positioning?

Static is the default.
Relative positions relative to its normal position.
Absolute is positioned relative to the nearest positioned ancestor.
Fixed is positioned relative to the viewport.

6. What are pseudo-classes and pseudo-elements?

Pseudo-classes define the special state of an element (:hover, :focus), while pseudo-elements style specific parts of an element (::before, ::after).

7. How do you center a div vertically and horizontally?

Using Flexbox:

display: flex; justify-content: center; align-items: center; or using Grid:

Using Grid:

display: grid; place-items: center;

8. What is the difference between margin and padding?

Margin is the space outside an element’s border, while padding is the space inside an element’s border.

9. Explain CSS specificity.

Specificity determines which CSS rule is applied by the browser when multiple rules match the same element. It’s calculated based on the number of ID selectors, class selectors, and element selectors.

10. What are CSS preprocessors?

CSS preprocessors like SASS and LESS extend CSS with variables, nesting, and other features.

11. Explain the z-index property.

z-index controls the stacking order of elements. Higher values are on top.

12. What is a CSS grid layout?

CSS Grid Layout is a two-dimensional layout system for the web that allows you to design web pages using a grid-based layout.

13. What are media queries?

Media queries are used to apply different styles for different media types/devices based on conditions like screen width, height, and orientation.

14. How do you create a responsive design in CSS?

Use flexible grid layouts, flexible images, and media queries to adjust the layout based on the screen size.

15. What is the difference between class selectors and ID selectors?

Class selector can be applied for multiple elements (.classname) but ID selector can only be applied to one element per page (#idname).

16. What is the use of the z-index property?

The z-index property is used to specify the stack order of elements in which elements with a higher z-index appear in front of elements with a lower z-index.

17. What is the difference between em and rem units?

em: Relative to the font-size of the element’s nearest parent.

rem: Relative to the font-size of the root element.

18. What is specificity in CSS?

When multiple rules target the same element, Specificity determines which CSS rule is applied by the browsers. It is calculated based on the type of selectors.

19. Explain the display property

The display property defines the type of rendering box used for an element with common values, such as:

block
inline
inline-block
none

20. What are CSS transitions?

CSS transitions perform changes smoothly over a specified duration, rather than happening instantly.

21. What is the float property used for in CSS?

The float property is used to align elements to the left or right of a container. It allows text and inline elements to wrap around it.

22. How do CSS Grid and Flexbox differ?

Grid is a two-dimensional layout system with rows and columns whereas Flexbox is a one-dimensional layout system which contains either row or column.

23. What is the position: sticky property?

Position: sticky allows an element to behave like a relative until a certain scroll position is reached.

24. What is the calc() function in CSS?

The calc() function is used to perform calculations to set CSS property values, like width, height, or margin.

25. What is the difference between visibility: hidden and display: none?

visibility: hidden: The visibility of the element is hidden but it remains in the DOM.
display: none: The element is removed from the DOM, and its space is collapsed.

26. What are vendor prefixes in CSS?
Before a CSS property becomes fully supported, vendor prefixes are used to ensure compatibility with different browsers.

27. How do you create a responsive design using CSS?
Responsive designs can be achieved using:

Fluid grid layouts

Media queries

Flexible images

Flexbox or CSS Grid layouts

28. What is a float clearing technique?

Float clearfix technique is used to prevent parent containers from collapsing when they contain floated elements.

css Copy code .clearfix::after { content: “”; display: table; clear: both; }

29. What is the difference between inline and block elements?

Inline elements: Take as much as width and do not start on a new line. Block elements: Start on a new line and take up the full width.

30. What is the overflow property used for in CSS?

The overflow property controls the actions if content overflows an element’s box. The Values included are visible, hidden, scroll, and auto.

31. What is the :nth-child() selector in CSS?

Within a parent element, the :nth-child() selector selects elements based on their order. Example: li:nth-child(2) selects the second list item.

32. Explain CSS variables.

CSS variables, defined using –varname to reuse values throughout a stylesheet. Example:

:root { –main-color: #3498db; } .button { color: var(–main-color); }

33. What is the difference between border-box and content-box?

border-box: The width and height include padding and border.

content-box: The width and height apply only to the content area.

34. What is the inherit value in CSS?

The inherit value forces an element to inherit the value of a property from its parent element. It is useful for maintaining consistent styles across nested elements.

35. What is the @import rule in CSS?

The @import rule is used to import one CSS file into another. It helps to organize stylesheets by dividing them into separate files. Example:

@import url(‘styles.css’);

36. What is opacity in CSS?

The opacity property controls the transparency of an element.

0 – completely transparent 1 – completely opaque. Example: div { opacity: 0.5; }

36. What is the object-fit property?

The object-fit property is used to define how an image or video should be resized to fit its container. Example:

img { object-fit: cover; }

38. What is the box-shadow property in CSS?

The box-shadow property is used to add a shadow around an element. Example:

div { box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); }

39. How do you center an element horizontally and vertically using Flexbox?

To center an element both horizontally and vertically with Flexbox, you can use:

.container { display: flex; justify-content: center; /* Horizontal centering */ align-items: center; /* Vertical centering */ height: 100vh; }

40. What is the difference between min-width, max-width, min-height, and max-height?

min-width/min-height: Sets the minimum width/height an element can be resized to.

max-width/max-height: Sets the maximum width/height an element can grow to.

Request more information

CSS Interview Questions and Answers