1. What is CSS?

CSS stands for Cascading Style Sheets. It is a stylesheet language used for describing the presentation of a document written in HTML or XML.

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

Inline: Use the style attribute on elements.
Internal/Embedded: Use the <style> tag in the <head> section.
External: Use the <link> tag to link to a separate .css file.

3. What is the CSS Box Model?

The Box Model is the foundation of CSS layout. Every element is represented as a rectangular box consisting of:

Content: The text/image itself.
Padding: Space around the content (inside the border).
Border: Edge surrounding the padding.
Margin: Space outside the border (spacing between elements).

4. What is the difference between `padding` and `margin`?

Padding: Controls the internal space between an element's content and its border.
Margin: Controls the external space between an element's border and other elements.

5. What are CSS Selectors?

Selectors are patterns used to select the elements you want to style (e.g., element selector p, class selector .btn, id selector #nav).

6. What is "Specificity" in CSS?

Specificity determines which CSS rule is applied when multiple rules target the same element. The order of importance is:

Inline styles (highest)
IDs
Classes, attributes, pseudo-classes
Elements, pseudo-elements (lowest)

7. What is the `!important` rule for?

It overrides all other declarations, including inline styles. It should be used sparingly as it makes debugging difficult.

8. What are the different units of measurement in CSS?

Absolute: px, cm, in, pt.
Relative: em, rem, %, vh, vw, vmin, vmax, ch.

9. What is the difference between `em` and `rem`?

em: Relative to the font-size of the element's parent.
rem: Relative to the font-size of the root element (usually html).

10. What is `flexbox`?

Flexbox (Flexible Box Layout) is a 1D layout model designed for distributing space and aligning items within a container along a single axis (row or column).

11. What is `CSS Grid`?

Grid is a 2D layout model used for creating complex, pixel-perfect layouts with rows and columns.

12. What is the difference between `display: block` and `display: inline`?

block: Element starts on a new line and takes up full width.
inline: Element stays on the same line and only takes up necessary width.

13. What is the `box-sizing` property?

It defines how the total width and height of an element are calculated:

content-box (default): Width/height only include content.
border-box: Width/height include content, padding, and border.

14. What are CSS Media Queries?

They allow you to apply styles based on the device's characteristics, such as screen width, orientation, and resolution. They are key to Responsive Web Design.

15. What are Pseudo-classes?

They define a special state of an element (e.g., :hover, :active, :focus, :first-child, :nth-child).

16. What are Pseudo-elements?

They allow you to style a specific part of an element (e.g., ::before, ::after, ::first-letter, ::first-line).

17. What is the purpose of `z-index`?

It controls the vertical stacking order of positioned elements (position must be absolute, relative, fixed, or sticky).

18. What are the different CSS `position` values?

static: (Default) Normal document flow.
relative: Positioned relative to its normal position.
absolute: Positioned relative to its nearest positioned ancestor.
fixed: Positioned relative to the viewport.
sticky: Alternates between relative and fixed based on scroll position.

19. What is CSS "Cascading"?

The process of combining multiple stylesheets and resolving conflicts between rules targeting the same element based on source order, specificity, and importance.

20. What are CSS Variables (Custom Properties)?

They allow you to store values and reuse them throughout your stylesheet using the --variable-name syntax and var() function.

21. What is the `float` property?

It pushes an element to the left or right of its container, allowing text and other elements to wrap around it.

22. What is "Clearing a Float"?

Using the clear property (usually clear: both) to ensure that following elements are not affected by floated elements above them.

23. What is the difference between `opacity: 0` and `visibility: hidden`?

opacity: 0: Element is completely transparent but still interactive (can be clicked).
visibility: hidden: Element is hidden and not interactive, but still takes up space.

24. What is CSS "Inheritance"?

The process by which certain properties (like color, font-family) are passed from parent elements to their children.

25. What is the purpose of the `calc()` function?

It allows you to perform calculations (e.g., calc(100% - 20px)) directly in your CSS.

26. What is "Reset CSS" or "Normalize CSS"?

Files used to reduce browser inconsistencies in default styling, providing a clean slate for your styles.

27. What is a CSS Preprocessor?

A tool (like Sass, Less, Stylus) that extends CSS with features like variables, nesting, and mixins, which are then compiled into standard CSS.

28. What is the `transition` property?

It allows you to change property values smoothly over a given duration (e.g., changing button color on hover).

29. What is the `animation` property?

It allows you to create complex animations by defining keyframes (@keyframes) and specifying how properties should change over time.

30. What is the difference between `transform` and `translate`?

transform: A property used to apply 2D/3D transformations to an element (rotate, scale, skew, translate).
translate(): A function used within transform to move an element from its current position.

31. What are CSS Sprites?

A technique of combining multiple small images into a single large image file to reduce the number of HTTP requests.

32. What is the purpose of the `content` property?

Used with ::before and ::after pseudo-elements to insert generated content into an element.

33. What is "Responsive Design" vs "Adaptive Design"?

Responsive: A single layout that fluidly adjusts to any screen size.
Adaptive: Different layouts specifically designed for specific screen sizes (breakpoints).

34. What is the `overflow` property?

Specifies what should happen if content overflows an element's box (visible, hidden, scroll, auto).

35. What is "Mobile First" design?

A design strategy where you start by designing for the smallest screens first and then use media queries to add complexity for larger screens.

36. What is the purpose of `object-fit`?

Specifies how an <img> or <video> should be resized to fit its container (fill, contain, cover, none, scale-down).

37. What is the difference between `min-width` and `max-width`?

min-width: Sets the minimum width an element must be.
max-width: Sets the maximum width an element can be.

38. What is the `pointer-events` property?

It allows you to control how elements respond to mouse and touch events (e.g., pointer-events: none makes an element "ghost-like" to clicks).

39. What is a "CSS Framework"?

A library (like Tailwind, Bootstrap, Foundation) that provides pre-written CSS classes and components to speed up development.

40. What is the `user-select` property?

Controls whether the user can select text within an element.

41. What is the `filter` property?

Applies graphical effects like blur, brightness, contrast, and grayscale to an element.

42. What is the purpose of the `vh` and `vw` units?

vh: Viewport height (1vh = 1% of viewport height).
vw: Viewport width (1vw = 1% of viewport width).

43. What is the `will-change` property?

Hints to the browser that an element's property is likely to change, allowing it to perform optimizations ahead of time.

44. What is the difference between `border` and `outline`?

border: Part of the Box Model; takes up space.
outline: Drawn outside the border; does not take up space.

45. What is the `aspect-ratio` property?

Allows you to define a preferred aspect ratio for an element's box (e.g., aspect-ratio: 16 / 9).

46. What is CSS "Nesting"?

A feature (now natively supported in modern browsers) that allows you to write CSS rules inside other rules, improving readability.

47. What is the `gap` property?

Used in Flexbox and Grid to define the spacing between rows and columns (replacing the need for margins between items).

48. What is the `clip-path` property?

Allows you to create complex shapes by clipping an element to a specific path (circle, polygon, etc.).

49. What is "Dark Mode" in CSS?

Using the prefers-color-scheme: dark media query to apply a different set of styles (colors, backgrounds) for users who prefer dark themes.

50. What is the purpose of `mix-blend-mode`?

It defines how an element's content should blend with the content of the element's parent and the element's background.

CSS Interview Questions

Table of Contents

What is CSS?

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

What is the CSS Box Model?

What is the difference between <code>padding</code> and <code>margin</code>?

What are CSS Selectors?

What is "Specificity" in CSS?

What is the <code>!important</code> rule for?

What are the different units of measurement in CSS?

What is the difference between <code>em</code> and <code>rem</code>?

What is <code>flexbox</code>?

What is <code>CSS Grid</code>?

What is the difference between <code>display: block</code> and <code>display: inline</code>?

What is the <code>box-sizing</code> property?

What are CSS Media Queries?

What are Pseudo-classes?

What are Pseudo-elements?

What is the purpose of <code>z-index</code>?

What are the different CSS <code>position</code> values?

What is CSS "Cascading"?

What are CSS Variables (Custom Properties)?

What is the <code>float</code> property?

What is "Clearing a Float"?

What is the difference between <code>opacity: 0</code> and <code>visibility: hidden</code>?

What is CSS "Inheritance"?

What is the purpose of the <code>calc()</code> function?

What is "Reset CSS" or "Normalize CSS"?

What is a CSS Preprocessor?

What is the <code>transition</code> property?

What is the <code>animation</code> property?

What is the difference between <code>transform</code> and <code>translate</code>?

What are CSS Sprites?

What is the purpose of the <code>content</code> property?

What is "Responsive Design" vs "Adaptive Design"?

What is the <code>overflow</code> property?

What is "Mobile First" design?

What is the purpose of <code>object-fit</code>?

What is the difference between <code>min-width</code> and <code>max-width</code>?

What is the <code>pointer-events</code> property?

What is a "CSS Framework"?

What is the <code>user-select</code> property?

What is the <code>filter</code> property?

What is the purpose of the <code>vh</code> and <code>vw</code> units?

What is the <code>will-change</code> property?

What is the difference between <code>border</code> and <code>outline</code>?

What is the <code>aspect-ratio</code> property?

What is CSS "Nesting"?

What is the <code>gap</code> property?

What is the <code>clip-path</code> property?

What is "Dark Mode" in CSS?

What is the purpose of <code>mix-blend-mode</code>?