Top CSS Interview Questions and Answers

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including SVG, XUL). It controls the visual aspects of web pages and other XML-based documents, specifying things like colors, fonts, layout, and responsiveness.

Origins of CSS

CSS originated from SGML (Standard Generalized Markup Language), a meta-markup language used to define other markup languages like HTML. CSS evolved as a way to separate the presentation of web pages from their content.

CSS Versions

  • CSS1
  • CSS2
  • CSS2.1
  • CSS3
  • CSS4 (still under development)

Integrating CSS into Web Pages

Three main methods exist for integrating CSS into HTML:

  1. Inline Styles: Styles are applied directly within HTML elements (using the style attribute). This is generally not recommended for larger projects due to poor maintainability.
  2. Embedded Styles: Styles are placed within the <style> tag in the HTML <head> section. This is best for styling only a single page.
  3. External Stylesheets: Styles are defined in separate .css files, linked to HTML documents using the <link> tag. This approach is preferred for large projects, promoting code organization and reusability.

Advantages of Using CSS

  • Reduced bandwidth usage (efficient code).
  • Site-wide consistency (apply styles across multiple pages).
  • Easy page reformatting (adjust layout without changing content).
  • Improved accessibility for users with disabilities.
  • Separation of content and presentation (clean, maintainable code).

Limitations of CSS

  • Limited selector ordering capabilities.
  • Challenges in vertical layout control.
  • Lack of direct support for expressions or calculations.
  • No built-in mechanism for column layout (though solutions exist).
  • Pseudo-classes are not dynamically controlled.
  • Precise text styling can be difficult.

Popular CSS Frameworks

CSS frameworks provide pre-built styles and components to accelerate web development:

  • Bootstrap
  • Foundation
  • Semantic UI
  • Tailwind CSS
  • Many others

Background and Color Properties

background and color are separate properties despite their seeming interconnectedness:

  • The background property is complex and handles multiple background features (image, color, position, etc.). Keeping it separate from color improves readability.
  • The color property is inherited, while background is not.

Embedded Style Sheets

Embedded stylesheets are defined within the <style> tag in the HTML document's <head> section. This is suitable for single-page styling but less efficient for large sites.

Advantages of Embedded Style Sheets

  • Improved code organization.
  • No external file downloads needed.
  • Suitable for single-page styles.

CSS Selectors

Selectors are patterns that target specific HTML elements to which styles are applied. Common types of selectors include:

  • Element selectors (e.g., p)
  • ID selectors (e.g., #myElement)
  • Class selectors (e.g., .myClass)
  • Universal selectors (e.g., *)
  • Combined selectors

CSS Style Components

  • Selector: Specifies which elements are targeted.
  • Property: Specifies the style attribute (e.g., color, font-size).
  • Value: Assigns a value to the property (e.g., red, 16px).

CSS Opacity

The opacity property controls the transparency of an element. A value of 1 is fully opaque, and 0 is fully transparent.

Universal Selector

The universal selector (*) selects all elements in the document.

Selecting Paragraph Elements

The selector p selects all paragraph elements. More specific selectors can be used to target particular paragraphs (e.g., using classes or IDs).

Percentage Units (%) in CSS

Percentage units represent values relative to another value (e.g., the width of a parent element).

Background Color Property

The background-color property sets the background color of an element.

Background Image Repetition

The background-repeat property controls how a background image is repeated (repeat, repeat-x, repeat-y, no-repeat).

Background Image Position

The background-position property sets the starting position of a background image.

Background Image Attachment

The background-attachment property specifies whether a background image scrolls with the page content or remains fixed (fixed or scroll).

Rulesets in CSS

A ruleset consists of a selector and a declaration block. The selector targets HTML elements, and the declaration block defines the styles to be applied.

Class vs. ID Selectors

Class Selectors (.className) ID Selectors (#idName)
Can be applied to multiple elements. Should only be applied to a single, unique element.

Advantages of External Stylesheets

  • Improved code reusability (styles can be used on multiple pages).
  • Easier maintenance (change styles in one place).
  • Better organization (separation of content and presentation).

Inline, Embedded, and External Stylesheets

These are different ways to include CSS in an HTML document:

  1. Inline Styles (within HTML tags): Least efficient; not reusable.
  2. Embedded Styles (within <style> tag): Suitable for single-page styling.
  3. External Stylesheets (linked using <link> tag): Most efficient and reusable; ideal for large websites.

Responsive Web Design (RWD)

RWD is an approach to designing websites that adapt to different screen sizes and devices.

CSS Sprites

CSS sprites combine multiple images into a single image, reducing HTTP requests and improving page load times.

Logical vs. Physical Tags in HTML

Logical tags (e.g., <article>, <aside>) describe the content's meaning. Physical tags (e.g., <center>, <font>) specify the appearance; these are generally less preferred now.

CSS Box Model

The CSS box model describes how elements are rendered visually. It consists of content, padding, border, and margin.

CSS Float Property

The float property moves an element to the left or right, allowing text to wrap around it.

Restoring Default CSS Values

Use the initial keyword to reset a CSS property to its default value as specified by the CSS specification.

z-index Property

The z-index property specifies the stacking order of overlapping positioned elements.

visibility: hidden vs. display: none

visibility: hidden display: none
Hides the element but retains its space in the layout. Hides the element and removes it from the layout flow.

W3C (World Wide Web Consortium)

The W3C is an international community that develops standards for the World Wide Web.

Tweening

Tweening is the process of creating intermediate frames between keyframes in an animation, creating smooth transitions.

CSS2 vs. CSS3

CSS3 is modular, with features supported individually by browsers. CSS3 also added new selectors and capabilities not available in CSS2.