Skip to main content

CSS interview questions with their theoretical answers


1. What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation (layout, colors, fonts, etc.) of a document written in HTML or XML.

2. What is the box model in CSS?

The box model represents the structure of an HTML element, consisting of four areas:

  • Content: The actual content of the element (text, images, etc.).
  • Padding: The space between the content and the border.
  • Border: The area surrounding the padding.
  • Margin: The space outside the border, separating the element from other elements.

3. What is the difference between relative, absolute, fixed, and sticky positioning in CSS?

  • Relative: Positions an element relative to its normal position.
  • Absolute: Positions an element relative to its nearest positioned (non-static) ancestor.
  • Fixed: Positions an element relative to the viewport, and it does not move when the page is scrolled.
  • Sticky: A hybrid of relative and fixed positioning; the element toggles between relative and fixed based on the scroll position.

4. What are pseudo-classes and pseudo-elements in CSS?

  • Pseudo-classes: Keywords added to selectors that specify a special state of the selected element (e.g., :hover, :focus, :nth-child).
  • Pseudo-elements: Used to style specific parts of an element (e.g., ::before, ::after, ::first-letter).

5. What is the difference between inline, block, and inline-block elements?

  • Inline: Elements that do not start on a new line and only take up as much width as necessary (e.g., <span>, <a>).
  • Block: Elements that start on a new line and take up the full width available (e.g., <div>, <p>).
  • Inline-block: Combines the characteristics of both inline and block elements. It allows the element to flow like inline elements but maintains block-level properties such as padding and width.

6. What is the difference between padding and margin?

  • Padding: The space between the content of an element and its border.
  • Margin: The space outside the border, separating the element from neighboring elements.

7. What is specificity in CSS?

Specificity determines which CSS rule is applied when multiple rules target the same element. It is calculated based on:

  • Inline styles (highest priority).
  • IDs (next highest).
  • Classes, attributes, and pseudo-classes.
  • Elements and pseudo-elements (lowest priority).

8. What is the z-index in CSS?

The z-index property controls the stacking order of positioned elements. Elements with higher z-index values appear above those with lower values. It only works on elements with a position other than static.

9. Explain Flexbox in CSS.

Flexbox is a layout model that allows items in a container to be aligned and distributed along a single axis (either row or column). It provides powerful features for responsive design and layout management. Important properties include:

  • display: flex;
  • justify-content, align-items, flex-direction, flex-wrap, etc.

10. What is CSS Grid?

CSS Grid is a 2D layout system that allows you to create complex layouts with rows and columns. It provides control over both the horizontal and vertical alignments. Some key properties include:

  • display: grid;
  • grid-template-columns, grid-template-rows, grid-gap, grid-area, etc.

11. What are media queries in CSS?

Media queries are used to apply different styles for different devices or screen sizes. They allow you to create responsive designs that adapt to various viewport widths, heights, and orientations. Example:

css

@media (max-width: 768px) { 
  body {                    
    font-size: 14px;        
  }                         
}

12. What is the difference between em, rem, px, and % in CSS?

  • px: A fixed unit representing pixels.
  • em: A relative unit based on the font size of the parent element.
  • rem: A relative unit based on the root element's font size (usually the <html> element).
  • %: A percentage-based unit relative to its parent element.

13. What is a CSS preprocessor?

A CSS preprocessor is a scripting language that extends CSS by adding features like variables, nested rules, functions, and loops. Popular preprocessors include Sass, Less, and Stylus. These need to be compiled into regular CSS for browsers to understand.

14. What is the display property in CSS, and what are some common values?

The display property controls how an element is rendered on the web page. Common values include:

  • block
  • inline
  • inline-block
  • flex
  • grid
  • none (hides the element).

15. What are vendor prefixes in CSS?

Vendor prefixes are used to ensure CSS properties work consistently across different browsers that may implement experimental features. Examples include:

  • webkit- (for Chrome, Safari)
  • moz- (for Firefox)
  • ms- (for Internet Explorer)
  • o- (for Opera)

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

  • visibility: hidden;: The element is hidden but still takes up space in the layout.
  • display: none;: The element is completely removed from the layout and takes up no space.

17. What is the cascade in CSS?

The cascade refers to the way CSS rules are applied to HTML elements when there are multiple conflicting rules. The order of applying rules depends on three factors:

  • Source order: Later rules override earlier ones.
  • Specificity: More specific selectors take precedence over less specific ones.
  • Importance: !important overrides normal rules.

18. What are keyframe animations in CSS?

Keyframe animations allow you to change the style of an element at multiple points during an animation sequence. The @keyframes rule defines these changes, and the animation property applies them to an element. Example:

css

@keyframes slide {    
  from { left: 0; }   
  to { left: 100px; } 
}

19. What is a CSS reset?

A CSS reset is a set of predefined rules that override the default browser styles to ensure consistent rendering across different browsers. Popular CSS resets include Normalize.css and Eric Meyer's Reset.

20. What is the difference between opacity and rgba() for transparency?

  • opacity: Applies to the entire element, including its children, making everything within the element transparent.
  • rgba(): Defines the transparency of a specific background or color, without affecting the transparency of child elements
Location: 330 Gap Road, Parkesbourne NSW 2580, Australia