Question 1

What is CSS and what does it stand for?

Accepted Answer

CSS stands for Cascading Style Sheets. It is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS controls the layout, colors, fonts, spacing, and overall visual appearance of web pages. It enables separation of content (HTML) from presentation (CSS), making it easier to maintain and update the look of a website.

Question 2

What are the three ways to apply CSS to an HTML document?

Accepted Answer

1) Inline CSS: using the style attribute directly on an HTML element (

). 2) Internal CSS: using a

Question 3

Explain the concept of the CSS cascade and specificity.

Accepted Answer

The cascade is the algorithm that determines which styles are applied to an element when multiple declarations conflict. It considers importance (user-agent, user, author), specificity (inline > ID > class > element), and source order (later rules override earlier ones). Specificity is calculated as a four-part value: (inline, ID, class, element). The higher the specificity, the more weight it has.

Question 4

What is the difference between class and ID selectors in CSS?

Accepted Answer

IDs (#id) are unique identifiers for a single element and have higher specificity than classes. Classes (.class) can be applied to multiple elements and are more reusable. IDs should be used for unique page elements (like header, footer) while classes are used for styling groups of elements. Also, IDs can be used as JavaScript hooks, but classes are preferred for styling.

Question 5

What are CSS pseudo-classes and give some examples.

Accepted Answer

Pseudo-classes are keywords added to selectors that specify a special state of the selected element(s). They are written with a colon (e.g., :hover). Examples: :hover (mouse over), :focus (element focused), :active (clicked), :visited (visited links), :nth-child(), :first-child, :last-child, :not(), :checked (for inputs).

Question 6

Explain the CSS box model and its components.

Accepted Answer

The CSS box model describes the rectangular boxes generated for elements. It consists of: content (actual text/images), padding (space between content and border), border (surrounds padding), and margin (space outside border). Total width = width + padding-left + padding-right + border-left + border-right. Box-sizing property (content-box vs border-box) changes how width/height is calculated.

Question 7

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

Accepted Answer

display: none removes the element from the document flow entirely—it takes up no space and is not rendered. visibility: hidden hides the element visually but it still occupies its original space in the layout, affecting the positioning of other elements. Both hide the element, but display: none is often used for toggling visibility without affecting layout.

Question 8

Explain the position property and its possible values.

Accepted Answer

The position property defines how an element is positioned in the document. Values: static (default, normal flow), relative (positioned relative to its normal position), absolute (removed from normal flow, positioned relative to nearest positioned ancestor), fixed (positioned relative to viewport, stays during scroll), sticky (hybrid of relative and fixed, sticks when scrolling past a threshold).

Question 9

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

Accepted Answer

block elements take the full width available and start on a new line (e.g.,

,

). inline elements only take as much width as necessary and do not start new lines (e.g., , ). inline-block elements are like inline but they can have width/height, margins, and padding applied, and they behave like a block inside an inline context.

Question 10

What is the CSS float property and how does it work?

Accepted Answer

float allows an element to be placed to the left or right of its container, allowing text and inline elements to wrap around it. It was originally used for text wrapping around images but later used for layout. However, floats can cause parent collapse; clearing (clear: both) or using overflow: hidden on parent are common fixes. Modern layout uses flexbox/grid instead.

Question 11

Explain flexbox and its main properties.

Accepted Answer

Flexbox (Flexible Box Layout) is a one-dimensional layout model for arranging items in rows or columns. Key properties on container: display:flex, flex-direction, flex-wrap, justify-content (main-axis alignment), align-items (cross-axis alignment), align-content. On items: flex-grow, flex-shrink, flex-basis, align-self. It simplifies centering, distributing space, and responsive design.

Question 12

What is CSS Grid Layout and how does it differ from flexbox?

Accepted Answer

CSS Grid is a two-dimensional layout system, designed for creating complex grid-based layouts with rows and columns. It allows placing items into explicit grid cells. Flexbox is one-dimensional (row or column) and is ideal for arranging items in a line. Grid excels at overall page layout, while flexbox is better for UI components and item alignment. They can be used together.

Question 13

Explain the box-sizing property and its values.

Accepted Answer

box-sizing defines how the width and height of an element are calculated. content-box (default): width/height apply only to the content, padding and border are added on top. border-box: width/height include content, padding, and border, making it easier to size elements consistently. Many developers set * { box-sizing: border-box; } to simplify layout calculations.

Question 14

What are CSS media queries and how are they used?

Accepted Answer

Media queries are a feature of CSS that enable styles to be applied based on device characteristics like screen width, height, orientation, resolution. They are essential for responsive design. Syntax: @media (max-width: 768px) { ... } which applies styles when the viewport width is 768px or less. They allow different layouts for desktop, tablet, and mobile.

Question 15

Explain the concept of CSS preprocessors and list a few popular ones.

Accepted Answer

CSS preprocessors extend CSS with programming features like variables, nesting, mixins, inheritance, and functions. They compile to standard CSS. Popular ones: Sass (SCSS), Less, Stylus. They improve maintainability, reduce repetition, and enable modular CSS architecture.

Question 16

What is the difference between Sass and SCSS?

Accepted Answer

Sass (Syntactically Awesome Style Sheets) has two syntaxes: Sass (indented syntax, no braces) and SCSS (Sassy CSS, uses braces and semicolons like regular CSS). SCSS is more popular because it's a superset of CSS, so any valid CSS is also valid SCSS. Sass is older and uses indentation. Both compile to CSS.

Question 17

What are CSS custom properties (variables) and how do you use them?

Accepted Answer

CSS custom properties, often called CSS variables, are entities defined by authors to store specific values for reuse. They are declared with -- prefix (e.g., --primary-color: #333;). They are accessed using var() function (e.g., color: var(--primary-color);). They are scoped to the element they are declared on and inherit down the DOM. They allow dynamic theming and easier maintenance.

Question 18

Explain CSS transitions and animations.

Accepted Answer

Transitions allow smooth changes of property values over a specified duration (e.g., transition: background 0.3s ease;). They are triggered by state changes like hover. Animations are more complex; they use @keyframes to define a sequence of styles, and are applied using animation property. Animations can loop, have delays, and can be controlled with JavaScript.

Question 19

What is the difference between 'em' and 'rem' units?

Accepted Answer

Both are relative units. 'em' is relative to the font-size of the parent element (or the current element if used for font-size itself). 'rem' is relative to the font-size of the root element (<html>), which is usually 16px by default. 'rem' provides more predictable sizing because it's not affected by nesting. Use 'rem' for global sizing and 'em' for component-relative sizing.

Question 20

What are CSS pseudo-elements and give examples.

Accepted Answer

Pseudo-elements allow styling of specific parts of an element. They are written with double colons (::). Examples: ::before (inserts content before the element), ::after (inserts content after), ::first-line (first line of text), ::first-letter (first letter), ::selection (user selection). They are often used for decorative effects and icons.

Question 21

Explain the z-index property and stacking context.

Accepted Answer

z-index determines the stack order of positioned elements (relative, absolute, fixed, sticky) along the z-axis (front-to-back). Higher z-index values appear in front. It only works on positioned elements. The stacking context is a group of elements with the same parent that stack together. Creating a stacking context (e.g., with position: relative and z-index) isolates the stacking order.

Question 22

What is the difference between 'relative', 'absolute', and 'fixed' positioning?

Accepted Answer

relative: positioned relative to its normal position; leaves space in the flow. absolute: removed from normal flow, positioned relative to nearest positioned ancestor (or <body> if none). fixed: removed from normal flow, positioned relative to the viewport, stays during scroll. sticky: hybrid—behaves like relative until it reaches a threshold, then becomes fixed.

Question 23

How do you center a div both horizontally and vertically?

Accepted Answer

Multiple ways: 1) Flexbox: display:flex; justify-content:center; align-items:center; on parent. 2) Grid: display:grid; place-items:center; 3) Absolute + transform: position:absolute; top:50%; left:50%; transform:translate(-50%,-50%). 4) Table-cell: display:table-cell; vertical-align:middle; text-align:center; (older). Flexbox and Grid are the modern, preferred methods.

Question 24

Explain the 'clearfix' and why it's used.

Accepted Answer

The clearfix is a technique to force a container to clear floats and contain its floated children. Without it, the container may collapse to zero height. Common clearfix: .clearfix::after { content: ''; display: table; clear: both; }. With modern CSS, using overflow: hidden or display: flow-root on the container can also achieve this. Flexbox and Grid have made floats less common.

Question 25

What are CSS counters and how do they work?

Accepted Answer

CSS counters are variables maintained by CSS that can be incremented and used for automatic numbering of elements like lists, headings, or sections. They use counter-reset to initialize, counter-increment to increase, and content with counter() to display. Example: ol { counter-reset: section; } li { counter-increment: section; } li::before { content: 'Section ' counter(section) ': '; }

Question 26

What is the difference between 'link' and '@import' for including CSS?

Accepted Answer

is an HTML tag used to include external stylesheets. It loads in parallel and is the preferred method. @import is a CSS rule used to import another stylesheet from within a CSS file (e.g., @import url('styles.css');). It can cause render blocking if used in

Question 27

Explain the concept of CSS specificity and how to calculate it.

Accepted Answer

Specificity is a weight assigned to selectors to determine which styles take precedence. It's calculated as a four-part comma-separated value: (inline style, ID count, class/pseudo-class/attribute count, element/pseudo-element count). Example: 'ul#nav li.active' has (0,1,1,2). Inline styles win, then IDs, then classes, then elements. The highest specificity wins.

Question 28

What are CSS combinators and list them.

Accepted Answer

Combinators are used to define relationships between selectors. They include: descendant selector (space) - selects children at any depth; child selector (>) - selects direct children; adjacent sibling selector (+) - selects the immediately following sibling; general sibling selector (~) - selects all following siblings. They are powerful for targeting specific elements in the DOM hierarchy.

Question 29

Explain 'object-fit' and 'object-position' properties.

Accepted Answer

These properties control how replaced elements (like or

Question 30

What is the difference between 'transition' and 'animation'?

Accepted Answer

Transitions are simpler—they allow smooth changes from one property value to another over a duration when triggered (e.g., hover). They require a state change. Animations are more powerful—they use @keyframes to define multiple keyframes and can run automatically, loop, and have more control (delay, iteration, direction). Transitions are for simple effects; animations for complex sequences.

Question 31

Explain the 'will-change' property and when to use it.

Accepted Answer

will-change is a performance hint that tells the browser which properties of an element are likely to change, allowing the browser to optimize ahead of time (e.g., creating layers). Example: will-change: transform, opacity. Use it sparingly and only for elements that animate frequently to avoid memory overhead. Overusing can degrade performance.

Question 32

What are CSS filters and give examples.

Accepted Answer

CSS filters are graphical effects applied to elements. They include: blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia(). They are used with the filter property, e.g., filter: blur(5px) grayscale(0.5). They are useful for image editing, hover effects, and enhancing UI.

Question 33

What is the 'aspect-ratio' property in CSS?

Accepted Answer

The aspect-ratio property sets a preferred aspect ratio for a box, which is used in calculating auto sizes. It is useful for maintaining consistent proportions, e.g., for images or videos. Example: aspect-ratio: 16/9;. It works with width/height set to auto, making it a modern alternative to the padding-top hack.

Question 34

Explain the 'container queries' feature in CSS.

Accepted Answer

Container queries are a new feature that allow styling of elements based on the size of their container, rather than the viewport. This enables more modular and responsive components. Syntax: @container (min-width: 400px) { ... }. They are supported in modern browsers and are a game-changer for component-based design.

Question 35

What is the difference between 'unset', 'initial', and 'revert'?

Accepted Answer

These are CSS global values. initial sets a property to its default value as defined by the CSS specification. revert reverts a property to the value it would have had if the current style rule didn't exist (i.e., browser default or inherited). unset acts as inherit if the property is inheritable, else initial. They are useful for resetting styles.

Question 36

How do you create a responsive grid layout using CSS Grid?

Accepted Answer

Use repeat() and minmax() for flexible columns: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); This creates as many columns as fit, with each at least 250px and growing equally. Combine with grid-gap for spacing. This creates a responsive grid without media queries.

Question 37

Explain CSS 'cascade layers' and their purpose.

Accepted Answer

Cascade layers (@layer) allow authors to control the order of styles within the cascade. They help manage conflicts between different sources (like third-party libraries and custom styles). Layers are ordered; styles in later layers override earlier ones. Example: @layer base, components; @layer components { ... }. This provides more control over specificity wars.

Question 38

What are 'CSS subgrid' and its benefits?

Accepted Answer

Subgrid is a feature of CSS Grid that allows a grid item to inherit the grid tracks of its parent grid. It enables alignment of nested items to the parent grid, simplifying complex layouts. Example: display: grid; grid-template-columns: subgrid;. It's useful for card layouts, form alignment, and consistent grids.

Question 39

Explain the 'accent-color' property in CSS.

Accepted Answer

accent-color is used to style form controls like checkboxes, radio buttons, range sliders, and progress bars. It sets the accent color for these elements, providing a quick way to theme UI controls without re-styling them from scratch. Example: accent-color: #6C63FF;.

Question 40

What is the 'clip-path' property and how is it used?

Accepted Answer

clip-path creates a clipping region that masks an element—only the parts inside the region are visible. It can use basic shapes (circle, ellipse, polygon) or SVG paths. Useful for creating non-rectangular shapes, image cropping, and creative design effects. Example: clip-path: polygon(50% 0%, 0% 100%, 100% 100%);.

Question 41

Explain the 'scroll-behavior' property.

Accepted Answer

scroll-behavior: smooth enables smooth scrolling when navigating to anchors within a page. It makes the browser scroll smoothly instead of jumping instantly. It can be applied to the html element for global smooth scrolling, or to scrollable containers. Example: html { scroll-behavior: smooth; }.

Question 42

What are CSS math functions like calc(), clamp(), min(), max()?

Accepted Answer

calc() allows arithmetic expressions (e.g., width: calc(100% - 20px);). min() and max() choose the smallest/largest among values (e.g., width: min(800px, 100%);). clamp() restricts a value between a minimum and maximum (e.g., font-size: clamp(1rem, 2vw, 3rem);). They are useful for creating responsive and fluid designs.

Question 43

What is the 'contain' property and its values?

Accepted Answer

contain property improves performance by isolating elements from the rest of the DOM, limiting layout and paint operations. Values: none, layout, style, paint, size, and combinations (e.g., contain: layout paint;). It tells the browser that the element and its children are independent, reducing reflows.

Question 44

Explain the difference between 'visibility: collapse' and 'visibility: hidden'.

Accepted Answer

visibility: collapse is specifically for table rows and columns. It removes the row/column but does not affect the table's overall width/height as it does with hidden (which still occupies space). For non-table elements, collapse behaves the same as hidden. It's a specialized value for table layouts.

Question 45

What are 'CSS custom properties (variables) and how are they different from preprocessor variables?

Accepted Answer

CSS custom properties are native to the browser and are dynamic—they can be changed at runtime via JavaScript and are cascading (inherit). Preprocessor variables (Sass, Less) are compile-time and static; they are replaced with values during compilation. CSS variables are more flexible for theming and dynamic updates.

Question 46

Explain the 'isolation' property in CSS.

Accepted Answer

The isolation property creates a new stacking context, which is useful to prevent an element from interfering with the blending of its children with the background. It's used with mix-blend-mode to isolate blending effects. Example: isolation: isolate;.

Question 47

What are the different values of 'display' property and their use cases?

Accepted Answer

Common values: block (block-level), inline (inline-level), inline-block (inline but can have block properties), flex (flex container), grid (grid container), table (like <table>), none (removes element). Also: list-item, run-in, and newer values like flow-root (creates block formatting context). Each is used for specific layout requirements.

Question 48

Explain the concept of 'block formatting context' (BFC).

Accepted Answer

A BFC is a region where block boxes are laid out. It affects floating, clearing, and margins. Elements with overflow: hidden, display: flow-root, display: flex, display: grid, etc., create a BFC. It prevents margin collapse, contains floats, and isolates layout. Understanding BFC is key to solving many layout issues.

Question 49

What is the 'user-select' property and its values?

Accepted Answer

user-select controls whether text can be selected. Values: auto, none (prevents selection), text (allows), all (select all when clicked). It's useful for preventing accidental text selection on UI elements (like buttons, drag handles). Example: user-select: none;.

Question 50

Explain the 'pointer-events' property and its use cases.

Accepted Answer

pointer-events specifies under what circumstances an element can be the target of mouse/touch events. Values: auto (default), none (element doesn't respond to events, passes through), visiblePainted, etc. Common use: making a clickable overlay that lets clicks pass to underlying elements, or disabling interactions.

Question 51

What are the future trends in CSS?

Accepted Answer

Future CSS trends include: container queries (already landing), cascade layers, subgrid, scoped styles, more advanced selectors, custom properties for theming, color functions (like color-mix), enhanced viewport units (svh, lvh, dvh), and better accessibility features. CSS is becoming more powerful and developer-friendly, reducing reliance on JavaScript for styling.

CSS Interview Q&A