CSS Encyclopedia - 250+ Essential Questions & Answers for Web Developers

Cascading Style Sheets (CSS) is the cornerstone styling language of modern web development. It empowers developers and designers to create visually appealing, responsive, and accessible websites by separating structure from presentation.

This comprehensive set of questions covers key CSS concepts, techniques, and best practices from fundamentals and selectors to layout systems, responsive design, and advanced features to help readers build adaptable and engaging web experiences.

What is CSS? Why do we use it?
What is the history of CSS?
What is the syntax of CSS?
What are the different types of CSS?
What are CSS selectors?
List some commonly used CSS selectors.
What is the difference between class and ID selectors in CSS?
How do you add comments in CSS?
What is the Box Model in CSS?
What is the difference between margin and padding?
What is the difference between px, em, %, and rem units in CSS?
How do you apply multiple classes to an element in CSS?
What is the default position of an HTML element?
What is the z-index in CSS?
What are pseudo-classes in CSS?
What are pseudo-elements in CSS?
What is the difference between relative, absolute, and fixed positioning?
What is display: none; vs visibility: hidden;?
How do you center a div horizontally using CSS?
What is the difference between block and inline elements in CSS?
What is overflow in CSS?
What is the difference between min-width, max-width, and width?
What is the use of important in CSS?
What is specificity in CSS?
How do you link an external CSS file to HTML?
What are the different ways to insert CSS into a webpage?
What is the difference between em and rem units?
Explain the CSS box-sizing property.
What are combinators in CSS?
What is specificity hierarchy in CSS?
How does the cascade work in CSS?
What is the difference between visibility: hidden and display: none?
What is a pseudo-class? Give examples.
What is the difference between position: static, relative, absolute, and fixed?
How can you clear floats in CSS?
Explain the difference between rem and % units in CSS.
What is the difference between max-width and min- width?
How do you make a website responsive using CSS?
What is the z-index property and how does it work?
What is the opacity property in CSS?
What are attribute selectors?
How can you create a CSS dropdown menu?
What is the difference between inline, block, and inline-block display values?
What is the use of the calc() function in CSS?
What is the difference between em and px?
What are pseudo-elements? Give examples.
What is the difference between relative and absolute positioning?
How do you apply styles only to specific screen sizes?
What is specificity in CSS and why is it important?
How does the cascade work in CSS?
What is the difference between fixed and sticky positioning?
Explain the flexbox layout model.
How do you center an item vertically and horizontally using Flexbox?
What is the difference between relative and absolute positioning within flex containers?
What is the difference between visibility: collapse and visibility: hidden?
What are CSS Grid Layouts?
How does the inherit keyword work in CSS?
What is the difference between em, rem, and % for font sizing?
How do you make an image responsive in CSS?
What is the difference between min-height and height?
Explain how to use media queries to target devices with different pixel densities.
What is the purpose of pointer-events in CSS?
What is the use of object-fit property?
What are the different CSS positioning schemes?
How can you optimize CSS for better performance?
Explain the difference between max-content, min-content, and auto in CSS sizing.
What is the difference between em and % in margin and padding?
How can you create a CSS-only tooltip?
What is the difference between rem and vh units?
What is the flex-grow property?
How do you hide content visually but keep it accessible for screen readers?
What are the differences between inline, block, and inline- block elements?
Explain the order property in Flexbox.
How do you implement a sticky footer using CSS?
What is the use of white-space property in CSS?
What is the difference between absolute and fixed positioning?
How does CSS specificity affect which styles are applied?
How can you make a website mobile-friendly using CSS?
What are the advantages of using CSS preprocessors like SASS or LESS?
Explain the difference between visibility: hidden and opacity: 0.
How can you vertically center a block element using CSS?
What are media queries and how do they work?
What is the difference between em and ex units?
How do you create a responsive navigation bar using CSS?
What is the CSS calc() function used for?
What is the use of the overflow property?
How do you implement a CSS grid layout?
What is the difference between min-width and max-width?
What is the box-shadow property?
How can you implement CSS transitions?
What is the difference between position: relative and position: static?
What is the difference between px, %, vw, and vh units?
What is the visibility property and its possible values?
How does the CSS float property work?
How can you clear floats?
What is the difference between rem and em units?
How do you use the CSS z-index property?
What is the difference between opacity and visibility?
How can you implement CSS animations?
What is the difference between pseudo-class and pseudo-element?
What is the CSS contain property and why is it used?
How do you implement CSS custom properties (variables)?
Explain the difference between position: sticky and position: fixed.
What is the difference between the auto and inherit values in CSS?
How do you use the CSS clamp() function?
What are CSS logical properties?
How can you implement dark mode using CSS?
What is the difference between initial, inherit, and unset?
How does will-change improve performance?
What is the CSS aspect-ratio property?
What is the difference between grid-auto-flow: row and grid-auto-flow: column?
Explain the difference between min(), max(), and clamp() CSS functions.
What is the scroll-snap property?
How do you create a CSS variable fallback?
What is the difference between display: none and visibility: hidden?
How can you make text truncation with ellipsis using CSS?
What are CSS scrollbars styling properties?
How can you prevent margin collapsing?
What is the difference between inline and inline-block?
What is the CSS filter property used for?
What is the use of the content-visibility property?
How does the CSS mix-blend-mode property work?
What are pseudo-elements in CSS and give examples?
How can you style form elements consistently across browsers?
Explain the difference between inline, block, inline-block, flex, and grid display types.
What is the difference between min-content, max-content, and fit-content?
How do CSS counters work?
What is the purpose of the CSS all property?
How do you implement responsive typography in CSS?
What is the CSS object-fit property?
How does the CSS gap property work in Flexbox and Grid?
How do you implement sticky footers with CSS?
What is the difference between auto-fill and auto-fit in CSS Grid?
How do you create a CSS-only tooltip?
What is the contain-intrinsic-size property?
How do you make a circle using CSS?
What is the difference between transform: translate() and position: relative; top/left?
How do you hide content visually but keep it accessible for screen readers?
How does the object-position property work?
What is the caret-color property?
How do you create multi-column layouts with CSS?
What is the difference between background-size: cover and background-size: contain?
What are the benefits of using CSS Grid over Flexbox?
How does the CSS scroll-behavior property work?
What is the CSS pointer-events property?
How can you make images responsive?
What is the CSS resize property?
How do you implement CSS grid areas?
What is the difference between filter: blur() and backdrop-filter?
How do you optimize CSS for better performance?
What are CSS rounded corners and how do you create them?
What is the border-image property in CSS?
How do you set multiple backgrounds on a single element in CSS?
What are different ways to specify colors in CSS?
What are CSS color keywords? Give examples.
How do you create CSS gradients?
What are box shadows and text shadows in CSS? How do you apply them?
What are common CSS text effects?
What are web fonts and how do you use them in CSS?
What are CSS 2D transforms? Give examples.
What are CSS 3D transforms?
How do CSS transitions work?
What are CSS animations?
How do you create CSS tooltips?
How do you style images using CSS?
How do you center an image in CSS?
What CSS filters can be applied to images?
What are CSS image shapes?
What is the CSS object-fit property?
What does the object-position property do?
What is CSS masking?
How do you style buttons in CSS?
How is pagination styled using CSS?
How do you create multiple columns in CSS?
What is the CSS user interface module?
What are CSS variables and how do you use them?
What is the CSS @property rule?
What is the CSS box-sizing property?
What are media queries in CSS?
Give examples of CSS media queries.
How do you change the cursor style in CSS?
What does the resize property do in CSS?
What is the difference between visibility: hidden and display: none?
How do you make a responsive layout using media queries?
What is the difference between position: absolute and fixed?
What does clip-path do in CSS?
What is the difference between rem and em units?
What is the z-index property in CSS?
How do you make a div draggable in CSS?
How do you apply a hover effect to an image?
What does overflow: hidden do in CSS?
How do you apply different styles for print and screen using CSS?
What is the will-change property used for?
What is the default value of box-sizing?
What is the use of line-height in CSS?
How do you vertically center text inside a div?
What is a keyframe in CSS animation?
Can you animate background gradients in CSS?
What is the opacity property used for?
How do you hide scrollbars while keeping scroll functionality?
What is Flexbox in CSS?
How do you enable Flexbox on an element?
What are the two main components of Flexbox?
What is the default direction of flex items?
How do you change the direction of flex items?
What does justify-content do in Flexbox?
What does align-items do in Flexbox?
What is the difference between align-items and align- content?
How do you make flex items wrap to the next line?
What is flex-flow in CSS?
What is the use of flex-grow?
What is flex-shrink in Flexbox?
What is the flex-basis property?
What is the shorthand flex property?
How do you center an element using Flexbox?
How do you align one item differently from the others?
What happens if the total width of items exceeds the container in Flexbox?
What does order do in Flexbox?
How is Flexbox useful for responsive design?
Can Flexbox and Media Queries be used together?
What is CSS Grid?
How do you enable Grid layout on an element?
What are the main components of CSS Grid?
How do you define columns and rows in a grid?
What is the fr unit in CSS Grid?
How do you create a gap between grid cells?
What is repeat() in CSS Grid?
How do you make a grid responsive?
How do you place a grid item in a specific cell?
How do you make a grid item span multiple columns or rows?
What is the difference between auto and fr in Grid?
What does grid-auto-rows and grid-auto-columns do?
How do you align content in the grid?
What is the difference between justify-items and justify- content?
What is the default value of grid-auto-flow?
How do you change the direction of item placement in a grid?
Can CSS Grid and Flexbox be used together?
What is the use of place-items in Grid?
How do you create a named grid area?
What is the benefit of CSS Grid over older layout techniques?
What is Responsive Web Design (RWD)?
Why is responsive design important?
What is the role of CSS in responsive design?
What is a viewport in RWD?
What meta tag is essential for responsive design?
What does width=device-width mean in the viewport tag?
What is a responsive grid view?
How do you create a simple responsive grid using CSS Grid?
What are media queries in CSS?
Basic syntax of a media query?
Difference between max-width and min-width in media queries?
What is a mobile-first approach?
How can images be made responsive?
How to make background images responsive?
What is the <picture> element used for in RWD?
How to make embedded videos responsive?
What are responsive frameworks?
What is Bootstrap used for?
What’s a responsive template?
Name a few popular RWD frameworks.
What is vw and vh in CSS?
What is clamp() in CSS and how is it used responsively?
What is object-fit: cover and how is it useful?
What’s the purpose of container classes in responsive layouts?
What does auto-fit do in grid layouts?
How do you hide elements in certain screen sizes?
How do flex-wrap and media queries work together?
How does Tailwind CSS handle responsiveness?
Can you use Flexbox and Grid together in RWD?
What is a media feature in CSS?
What’s the difference between fluid and fixed layouts?
What’s a breakpoint in responsive design?
How can you test responsiveness without devices?
What are some accessibility considerations in RWD?
What are some best practices for responsive design?

Q) 1. What is CSS? Why do we use it?

CSS (Cascading Style Sheets) is a stylesheet language used to style and control the layout of HTML elements on web pages. It defines visual aspects such as colors, fonts, spacing, alignment, positioning, and animations. CSS helps separate the content (HTML) from its presentation, making it easier to manage and maintain the design without altering the HTML structure.

Using CSS improves efficiency by allowing a single stylesheet to style multiple pages, enhancing consistency and saving development time.

Q) 2. What is the history of CSS?

CSS was created by Håkon Wium Lie in 1996 to address the need for a robust styling language separate from HTML. Its evolution includes:

CSS1 (1996): Introduced basic formatting features such as colors, fonts, and simple layouts.
CSS2 (1998): Added advanced features like positioning, media types for responsive design, and the z-index property for layering.
CSS3 (2011): Modularized the specification and introduced powerful features including animations, transitions, flexbox layouts, and more.
CSS4: Still evolving, focusing on enhanced selectors and scoping mechanisms to refine targeting and application of styles.

Q) 3. What is the syntax of CSS?

CSS rules consist of a selector followed by a declaration block:

selector {
  property: value;
}

Example:

h1 {
  color: blue;
  font-size: 20px;
}

This applies styles to all `<h1>` elements.

Q) 4. What are the different types of CSS?

Inline CSS: Applied directly within an HTML tag using the `style` attribute.
Internal CSS: Defined within a `<style>` tag inside the HTML document’s `<head>`.
External CSS: Written in separate `.css` files linked to the HTML document via a `<link>` tag, enabling site-wide styling consistency.

Q) 5. What are CSS selectors?

Selectors specify which HTML elements to style. Example:

p {
  color: red;
}

This styles all `<p>` elements with red text.

Q) 6. List some commonly used CSS selectors.

Universal selector (`*`): Targets all elements.
Element selector (`h1`): Selects all `<h1>` elements.
Class selector (`.box`): Targets elements with class=”box”.
ID selector (`#main`): Targets the element with id=”main”.
Grouping selector (`h1, h2, p`): Applies styles to all specified elements.
Descendant selector (`div p`): Selects `<p>` inside `<div>`.

Q) 7. What is the difference between class and ID selectors in CSS?

Class selectors (`.classname`) can be used on multiple elements.
ID selectors (`#idname`) must be unique to a single element per page.

Example:

.box { color: green; } /* class */
#header { color: blue; } /* ID */

Q) 8. How do you add comments in CSS?

CSS comments are enclosed within `/*` and `*/` and are ignored by browsers.

/* This is a comment */

Q) 9. What is the Box Model in CSS?

The Box Model describes the rectangular boxes generated for elements, consisting of:

Content: The inner content area (text, images).
Padding: Space between content and border.
Border: Surrounds padding and content.
Margin: Space outside the border, separating elements.

Q) 10. What is the difference between margin and padding?

Margin creates outer space around the element.
Padding creates inner space between content and the element’s border.

Example:

div {
  margin: 20px;
  padding: 10px;
}

Q) 11. What is the difference between px, em, %, and rem units in CSS?

px (pixels): Fixed size unit representing a specific number of screen pixels.
em: Relative to the font-size of the parent element; scales with its parent’s size.
rem: Relative to the root (usually the `<html>`) font-size; consistent across the document.
% (percentage): Relative to the size of the parent element, often used for width, height, and font size.

Q) 12. How do you apply multiple classes to an element in CSS?

Multiple CSS classes can be applied by listing them space-separated in the `class` attribute of an element:

<div class="box shadow"></div>

CSS:

.box { background: red; }
.shadow { box-shadow: 2px 2px 5px gray; }

Both `.box` and `.shadow` styles apply to the element.

Q) 13. What is the default position of an HTML element?

The default CSS position value for HTML elements is:

position: static;

Meaning elements are positioned in the normal flow of the document.

Q) 14. What is the z-index in CSS?

The `z-index` property controls the stacking order of overlapping elements, where elements with higher `z-index` values appear above those with lower ones. It only works on positioned elements (`relative`, `absolute`, `fixed`, or `sticky`):

div {
  position: absolute;
  z-index: 10;
}

Q) 15. What are pseudo-classes in CSS?

Pseudo-classes define special states of elements such as user interaction:

a:hover {
  color: red;
}
input:focus {
  border: 2px solid green;
}

These styles apply when the element is hovered over or focused.

Q) 16. What are pseudo-elements in CSS?

Pseudo-elements target specific parts inside an element for styling:

p::first-line {
  color: blue;
}
p::before {
  content: "→ ";
}

These target the first line of a paragraph or insert content before it.

Q) 17. What is the difference between relative, absolute, and fixed positioning?

relative: Element is positioned relative to its original spot but still occupies space.
absolute: Positioned relative to the nearest positioned ancestor; taken out of normal flow.
fixed: Positioned relative to the viewport; stays fixed when scrolling.

Q) 18. What is display: none; vs visibility: hidden;?

`display: none;`: Removes the element from the document layout; it occupies no space.
`visibility: hidden;`: Makes the element invisible but it still takes up space.

Q) 19. How do you center a div horizontally using CSS?

To center a block element like a `div` horizontally:

div {
  margin: 0 auto;
  width: 200px;
}

This sets automatic left and right margins, centering the element within its container.

Q) 20. What is the difference between block and inline elements in CSS?

Block elements (e.g., `<div>`, `<p>`) take the full width available and start on a new line.
Inline elements (e.g., `<span>`, `<a>`) take up only as much width as their content and flow within text lines.

Q) 21. What is overflow in CSS?

The `overflow` property controls the handling of content that exceeds its container’s size. Values include:

`visible` (default): Content overflows visibly.
`hidden`: Overflowing content is clipped and not visible.
`scroll`: Adds scrollbars regardless of overflow.
`auto`: Scrollbars appear only if needed.

Q) 22. What is the difference between min-width, max-width, and width?

`width`: Sets an exact width for an element.
`min-width`: Sets the minimum width an element can shrink to.
`max-width`: Sets the maximum width an element can grow to.

Q) 23. What is the use of important in CSS?

The `!important` annotation forces a CSS rule to override other conflicting rules regardless of specificity:

p {
  color: red !important;
}

Q) 24. What is specificity in CSS?

Specificity determines which CSS rule applies when multiple rules target the same element. The hierarchy from highest to lowest priority is:

Inline styles
ID selectors
Classes, attributes, and pseudo-classes
Element selectors and pseudo-elements

Q) 25. How do you link an external CSS file to HTML?

You link an external CSS file to an HTML document using the `<link>` tag inside the `<head>`:

<link rel="stylesheet" href="styles.css">

Q) 26. What are the different ways to insert CSS into a webpage?

Inline CSS: Using the `style` attribute within HTML elements.
Internal CSS: Using `<style>` tags inside the HTML `<head>`.
External CSS: Linking an external stylesheet using `<link>`.

Q) 27. What is the difference between em and rem units?

`em`: Relative to the font-size of the parent element and changes with inheritance.
`rem`: Relative to the root (`<html>`) font-size, consistent across the document irrespective of nesting.

Q) 28. Explain the CSS box-sizing property.

Controls how an element’s width and height are calculated:

`content-box` (default): Width and height apply only to content; padding and border add beyond this.
`border-box`: Width and height include content, padding, and border, making sizing easier to manage.

Example:

div {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
}

Q) 29. What are combinators in CSS?

Combinators define the relationship between selectors:

Descendant (`space`): Selects any nested descendant.
Child (`>`): Selects direct children only.
Adjacent sibling (`+`): Selects the immediately following sibling.
General sibling (`~`): Selects all siblings following the element.

Example:

div > p { color: red; }

Q) 30. What is specificity hierarchy in CSS?

From highest to lowest:

Inline styles
IDs (`#id`)
Classes, attributes, pseudo-classes (`.class`, `[type=”text”]`, `:hover`)
Elements and pseudo-elements (`div`, `::before`)

Q) 31. How does the cascade work in CSS?

When multiple CSS rules apply to the same element, the browser uses the cascade to decide which rule takes precedence. It considers:

Specificity of selectors (higher specificity wins)
Source order (later rules override earlier ones if specificity is equal)
Importance (`!important` rules override others)

Q) 32. What is the difference between visibility: hidden and display: none?

`visibility: hidden`: The element is invisible but still occupies space in the layout.
`display: none`: The element is removed from the layout flow and does not take up any space.

Q) 33. What is a pseudo-class? Give examples.

A pseudo-class represents a special state of an element, often based on user interaction or position:

`:hover` (when mouse hovers over an element)
`:focus` (when an element is focused)
`:nth-child(n)` (selects the nth child element)

Example:

a:hover {
color: blue;
}

Q) 34. What is the difference between position: static, relative, absolute, and fixed?

`static` (default): Elements follow normal document flow.
`relative`: Element is positioned relative to its normal position.
`absolute`: Positioned relative to the nearest positioned ancestor and removed from normal flow.
`fixed`: Positioned relative to the viewport and does not move when scrolling.

Q) 35. How can you clear floats in CSS?

The clearfix method is used to clear floated elements so that a container properly wraps them:

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Q) 36. Explain the difference between rem and % units in CSS.

`rem`: Relative to the root element font-size; consistent across the document.
`%`: Relative to the size (usually width or height) of the parent element.

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

`max-width`: The maximum width an element can grow to.
`min-width`: The minimum width an element can shrink to.

Q) 38. How do you make a website responsive using CSS?

Using flexible grid layouts, fluid images, and media queries that apply different styles at various screen sizes:

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Q) 39. What is the z-index property and how does it work?

The `z-index` controls the stacking order of overlapping elements. Only works on positioned elements (`relative`, `absolute`, `fixed`). Elements with higher `z-index` values appear on top.

Q) 40. What is the opacity property in CSS?

Controls the transparency level of an element. Values range from 0 (fully transparent) to 1 (fully opaque).

Example:

div {
  opacity: 0.5;
}

Q) 41. What are attribute selectors?

These selectors target HTML elements based on their attributes or attribute values. Examples:

input[type="text"] { border: 1px solid black; }
a[target="_blank"] { color: red; }

They allow styling elements with specific attributes.

Q) 42. How can you create a CSS dropdown menu?

Using the `:hover` pseudo-class, submenus can be hidden by default and shown when the parent is hovered:

nav ul ul {
  display: none;
}
nav ul li:hover > ul {
  display: block;
}

Q) 43. What is the difference between inline, block, and inline-block display values?

`inline`: Elements flow with text; width and height are ignored.
`block`: Elements take the full width and start on a new line.
`inline-block`: Flows inline like text but respects width and height properties.

Q) 44. What is the use of the calc() function in CSS?

Allows dynamic mathematical calculations for CSS values, combining different units:

width: calc(100% - 50px);

This helps create flexible layouts.

Q) 45. What is the difference between em and px?

`px`: Fixed size unit representing pixels.
`em`: Relative unit based on the font-size of the parent element.

Q) 46. What are pseudo-elements? Give examples.

Pseudo-elements target and style specific parts of elements:

`::before`: Inserts generated content before the element.
`::after`: Inserts generated content after the element.

Example:

p::before {
  content: "Note: ";
}

Q) 47. What is the difference between relative and absolute positioning?

`relative`: Moves the element relative to its normal position without removing it from the document flow.
`absolute`: Positions the element relative to the nearest positioned ancestor and removes it from normal flow.

Q) 48. How do you apply styles only to specific screen sizes?

Media queries restrict styles to certain viewport sizes:

@media (max-width: 768px) {
  body { background-color: yellow; }
}

Q) 49. What is specificity in CSS and why is it important?

Specificity is the weight a CSS selector carries, determining which style rules override others when multiple rules match an element. It is crucial for predictable styling and avoiding conflicts.

Q) 50. How does the cascade work in CSS?

The cascade resolves conflicts by applying rules according to:

Importance (`!important` rules)
Specificity of selectors
Source order, where later rules override earlier ones if other factors are equal.

Q) 51. What is the difference between fixed and sticky positioning?

fixed: The element is positioned relative to the viewport and remains fixed in place during scrolling.
sticky: The element acts like `relative` until a specified scroll position is reached, then it switches to `fixed` and stays visible.

Q) 52. Explain the flexbox layout model.

Flexbox is a one-dimensional CSS layout module for arranging items efficiently in a row or column:

`display: flex;` activates flex layout.
`flex-direction`: sets direction (`row`, `column`).
`justify-content`: aligns items along the main axis.
`align-items`: aligns items along the cross axis.
`flex-wrap`: controls wrapping of items onto multiple lines.

Q) 53. How do you center an item vertically and horizontally using Flexbox?

.container {
  display: flex;
  justify-content: center; /* centers horizontally */
  align-items: center; /* centers vertically */
  height: 200px;
}

This centers child elements within a flex container both vertically and horizontally.

Q) 54. What is the difference between relative and absolute positioning within flex containers?

`relative`: Moves the element relative to its normal position inside the flex container without removing it from flow.
`absolute`: Removes the element from the flow and positions it relative to the nearest positioned ancestor.

Q) 55. What is the difference between visibility: collapse and visibility: hidden?

`visibility: hidden`: Element is invisible but still occupies space.
`visibility: collapse`: Mainly for table elements; hides the element and removes its space, similar to `display: none`.

Q) 56. What are CSS Grid Layouts?

CSS Grid is a two-dimensional layout system controlling rows and columns:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

This creates a 3-column grid with equal-width columns and gaps between items.

Q) 57. How does the inherit keyword work in CSS?

The `inherit` keyword makes an element take the computed value of a CSS property from its parent:

p {
  color: inherit;
}

This ensures consistent styling by inheriting property values.

Q) 58. What is the difference between em, rem, and % for font sizing?

`em`: Relative to the font size of the parent element.
`rem`: Relative to the root (`<html>`) font size.
`%`: Relative to the parent element’s font size.

Q) 59. How do you make an image responsive in CSS?

Setting:

img {
  max-width: 100%;
  height: auto;
}

ensures images scale down to fit their containers while maintaining aspect ratio.

Q) 60. What is the difference between min-height and height?

`height`: Sets a fixed height.
`min-height`: Sets the minimum height; the element may expand taller if content requires.

Q) 61. Explain how to use media queries to target devices with different pixel densities.

Use media queries with `resolution` or `device-pixel-ratio` to target high-resolution screens (e.g., Retina displays):

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* styles for high-res devices */
}

This applies styles specifically to devices with higher pixel densities.

Q) 62. What is the purpose of pointer-events in CSS?

Controls whether an element can receive mouse and pointer events:

button {
  pointer-events: none; /* disables mouse clicks */
}

This disables interaction with the element, making it “transparent” to pointer events.

Q) 63. What is the use of object-fit property?

Defines how replaced content like images or videos fit inside their container:

`fill`: Stretch to fill container (may distort).
`contain`: Scale to fit while preserving aspect ratio.
`cover`: Scale to cover container, cropping if necessary.
`none`: No resizing.
`scale-down`: Smaller of `none` or `contain`.

Q) 64. What are the different CSS positioning schemes?

`static`: Default positioning, normal flow.
`relative`: Positioned relative to its normal position.
`absolute`: Positioned relative to nearest positioned ancestor.
`fixed`: Positioned relative to viewport, does not scroll.
`sticky`: Toggles between relative and fixed based on scroll position.

Q) 65. How can you optimize CSS for better performance?

Minify CSS files by removing whitespaces and comments.
Combine multiple CSS files into one to reduce HTTP requests.
Use efficient selectors to minimize computation.
Avoid deep or overly specific selectors.
Use browser caching and content delivery networks (CDNs) for faster delivery.

Q) 66. Explain the difference between max-content, min-content, and auto in CSS sizing.

`max-content`: Size based on the largest content without wrapping.
`min-content`: Size based on the smallest content, forcing wrapping if needed.
`auto`: Browser calculates size based on content and other layout constraints.

Q) 67. What is the difference between em and % in margin and padding?

`em`: Relative to the font size of the element itself.
`%`: Relative to the width of the containing block for horizontal margins/padding (and height for vertical padding in some cases).

Q) 68. How can you create a CSS-only tooltip?

Using pseudo-elements and `:hover`:

.tooltip {
  position: relative;
}
.tooltip:hover::after {
  content: "Tooltip text";
  position: absolute;
  background: black;
  color: white;
  padding: 5px;
  border-radius: 4px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

Shows tooltip text on hover without JavaScript.

Q) 69. What is the difference between rem and vh units?

`rem`: Relative to the root font size (usually `<html>` font-size).
`vh`: Relative to 1% of the viewport height (useful for full-height layouts).

Q) 70. What is the flex-grow property?

Specifies how much a flex item will grow relative to other flex items inside a flex container. Default is 0 (no growth). Higher values cause the item to take more available space.

Q) 71. How do you hide content visually but keep it accessible for screen readers?

Use the `.visually-hidden` class to hide content visually while keeping it readable by screen readers:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

This technique ensures accessibility without displaying the content on screen.

Q) 72. What are the differences between inline, block, and inline- block elements?

Inline: Flows with text; width and height properties are ignored.
Block: Takes full width available and starts on a new line.
Inline-block: Behaves like inline elements but accepts width and height.

Q) 73. Explain the order property in Flexbox.

The `order` property changes the visual order of flex items without changing the HTML source order. Items with lower `order` values appear first.

Q) 74. How do you implement a sticky footer using CSS?

Using Flexbox:

body, html {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}
.footer {
  height: 50px;
}

This sets the footer at the bottom while allowing content to grow and fill space.

Q) 75. What is the use of white-space property in CSS?

Controls how whitespace inside an element is handled, including options like `normal`, `nowrap`, `pre`, and `pre-wrap`, affecting line breaks and spaces.

Q) 76. What is the difference between absolute and fixed positioning?

Absolute: Positioned relative to the nearest positioned ancestor and removed from normal flow.
Fixed: Positioned relative to the viewport and remains fixed during scrolling.

Q) 77. How does CSS specificity affect which styles are applied?

Styles with higher specificity override others. The hierarchy is:

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

Q) 78. How can you make a website mobile-friendly using CSS?

Implement responsive design via media queries, flexible grid layouts, fluid images, and touch-friendly controls for better usability on mobile devices.

Q) 79. What are the advantages of using CSS preprocessors like SASS or LESS?

They introduce powerful features such as variables, nesting, mixins, functions, and modular code organization, enabling easier maintenance and more efficient styling.

Q) 80. Explain the difference between visibility: hidden and opacity: 0.

`visibility: hidden`: Element is hidden and does not respond to interactions but still occupies space.
`opacity: 0`: Element is fully transparent but remains visible to screen readers and interactive.

Q) 81. How can you vertically center a block element using CSS?

One common way to vertically (and horizontally) center a block element is using Flexbox:

.container {
  display: flex;
  align-items: center; /* vertical center */
  justify-content: center; /* horizontal center */
  height: 200px;
}

Q) 82. What are media queries and how do they work?

Media queries allow different CSS styles to apply based on device characteristics such as screen width or resolution:

@media (max-width: 600px) {
  body { background: lightgray; }
}

This applies styles only when the viewport width is 600px or less.

Q) 83. What is the difference between em and ex units?

`em`: Relative to the font size of the current element.
`ex`: Relative to the x-height (height of the lowercase “x”) of the current font.

Q) 84. How do you create a responsive navigation bar using CSS?

Using Flexbox or CSS Grid for layout combined with media queries to adjust styles on smaller screens, and toggle menus for usability on mobile devices.

Q) 85. What is the CSS calc() function used for?

Performs dynamic calculations for CSS values, blending units:

width: calc(100% - 50px);

Q) 86. What is the use of the overflow property?

Controls how content behaves when exceeding the container’s bounds:

`visible`: Content overflows visibly (default).
`hidden`: Overflow is clipped.
`scroll`: Scrollbars are always shown.
`auto`: Scrollbars appear only if needed.

Q) 87. How do you implement a CSS grid layout?

Use `display: grid` and define rows and columns:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

Q) 88. What is the difference between min-width and max-width?

`min-width`: Sets the minimum width an element can have.
`max-width`: Sets the maximum width an element can have.

Q) 89. What is the box-shadow property?

Adds shadow effects around an element’s box:

box-shadow: 2px 2px 5px rgba(0,0,0,0.3);

Q) 90. How can you implement CSS transitions?

Smoothly animate CSS property changes using the `transition` property:

button {
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: blue;
}

Q) 91. What is the difference between position: relative and position: static?

`static`: The default position; elements follow normal document flow without any offset.
`relative`: Positions the element relative to its normal position; it can be offset using top, left, right, or bottom properties without affecting other elements.

Q) 92. What is the difference between px, %, vw, and vh units?

`px`: Fixed size in pixels.
`%`: Relative to the size of the parent element.
`vw`: 1% of the viewport’s width.
`vh`: 1% of the viewport’s height.

Q) 93. What is the visibility property and its possible values?

Controls whether an element is visible and how it occupies space:

`visible` (default): Displayed normally.
`hidden`: Element is invisible but still takes up space.
`collapse`: Primarily used for table rows/columns, hides element and removes space.

Q) 94. How does the CSS float property work?

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

Q) 95. How can you clear floats?

Use the clearfix method:

.clearfix::after {
content: "";
display: table;
clear: both;
}

Or set `overflow: auto` or `hidden` on the container to clear floats.

Q) 96. What is the difference between rem and em units?

`em`: Relative to the font size of the parent element.
`rem`: Relative to the font size of the root element (`<html>`).

Q) 97. How do you use the CSS z-index property?

Controls the stacking order of overlapping positioned elements. Higher values appear on top.

Q) 98. What is the difference between opacity and visibility?

`opacity`: Changes transparency but element remains visible to events and occupies space.
`visibility`: Hides element; with `hidden` it still occupies space but is non-interactive.

Q) 99. How can you implement CSS animations?

Use `@keyframes` to define animations and the `animation` property to apply them:

@keyframes slide {
  from { left: 0; }
  to { left: 100px; }
}
div {
  animation: slide 2s infinite;
}

Q) 100. What is the difference between pseudo-class and pseudo-element?

Pseudo-class targets special states of elements, e.g., `:hover`, `:focus`.
Pseudo-element targets and styles parts of an element or creates virtual elements, e.g., `::before`, `::after`.

Q) 101. What is the CSS contain property and why is it used?

The `contain` property enables browser optimizations by limiting the scope of an element’s rendering, layout, style, or size changes, improving performance:

.container {
  contain: layout style;
}

This tells the browser to treat the element as isolated in layout and styling calculations.

Q) 102. How do you implement CSS custom properties (variables)?

CSS variables are defined with a `–` prefix and accessed with `var()`:

:root {
  --main-color: #3498db;
}
p {
  color: var(--main-color);
}

This allows reusable and easily changeable property values.

Q) 103. Explain the difference between position: sticky and position: fixed.

`sticky`: Acts like `relative` until a scroll threshold is reached, then behaves like `fixed`.
`fixed`: Always positioned relative to the viewport, unaffected by scrolling.

Q) 104. What is the difference between the auto and inherit values in CSS?

`auto`: The browser computes the value automatically (default behavior).
`inherit`: The element explicitly takes the computed value of the property from its parent.

Q) 105. How do you use the CSS clamp() function?

`clamp()` restricts a value within a defined minimum, preferred, and maximum range:

font-size: clamp(1rem, 2vw, 2rem);

Ensures responsive sizing that adapts within limits.

Q) 106. What are CSS logical properties?

Logical properties replace physical CSS properties with ones that adapt based on writing mode and text direction, e.g., `margin-inline-start`, `padding-block-end`, making layouts more adaptable internationally.

Q) 107. How can you implement dark mode using CSS?

Using the `prefers-color-scheme` media query:

@media (prefers-color-scheme: dark) {
  body {
     background: black;
     color: white;
  }
}

Automatically applies dark mode styles on supported devices/systems.

Q) 108. What is the difference between initial, inherit, and unset?

`initial`: Resets property to the CSS initial (default) value.
`inherit`: Takes the computed value from the parent.
`unset`: Acts like `inherit` if the property is inheritable; otherwise behaves like `initial`.

Q) 109. How does will-change improve performance?

The `will-change` property informs the browser about properties likely to change soon, allowing it to optimize rendering and improve performance.

Q) 110. What is the CSS aspect-ratio property?

Defines the proportional relationship between an element’s width and height:

img {
  aspect-ratio: 16 / 9;
}

Ensures the element maintains a consistent aspect ratio regardless of size changes.

Q) 111. What is the difference between grid-auto-flow: row and grid-auto-flow: column?

Controls the flow direction of automatically placed grid items:

`row` (default): Places items by rows, filling each row before moving to the next.
`column`: Places items by columns, filling each column before moving to the next.

Q) 112. Explain the difference between min(), max(), and clamp() CSS functions.

`min()`: Returns the smallest value among its arguments.
`max()`: Returns the largest value among its arguments.
`clamp()`: Restricts a value between a defined minimum and maximum, with a preferred value in between.

Q) 113. What is the scroll-snap property?

Controls scroll snapping behavior to snap elements into place during scrolling:

.container {
  scroll-snap-type: x mandatory;
}
.item {
  scroll-snap-align: start;
}

This ensures smooth, snapped scrolling to child elements.

Q) 114. How do you create a CSS variable fallback?

CSS variable fallbacks provide a default if the variable is not defined:

color: var(--main-color, blue);

If `–main-color` is undefined, `blue` is used.

Q) 115. What is the difference between display: none and visibility: hidden?

`display: none`: Element is completely removed from the layout; it takes no space.
`visibility: hidden`: Element is invisible but still occupies space.

Q) 116. How can you make text truncation with ellipsis using CSS?

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

This truncates overflowed text with an ellipsis on a single line.

Q) 117. What are CSS scrollbars styling properties?

Using WebKit pseudo-elements, these enable styling of scrollbars:

`::-webkit-scrollbar`: Entire scrollbar.
`::-webkit-scrollbar-thumb`: Scrollbar draggable thumb.
`::-webkit-scrollbar-track`: Scrollbar track/background.

Q) 118. How can you prevent margin collapsing?

Add padding or border to the container.
Use `overflow: hidden`.
Use CSS layouts like flexbox or grid, which do not collapse margins.

Q) 119. What is the difference between inline and inline-block?

`inline`: Elements flow with text; width and height are ignored.
`inline-block`: Elements flow inline but respect width and height.

Q) 120. What is the CSS filter property used for?

Applies graphical effects to elements like images:

img {
  filter: grayscale(100%);
}

Other effects include blur, brightness, contrast, and more.

Q) 121. What is the use of the content-visibility property?

`content-visibility` allows browsers to skip rendering content that is off-screen, significantly improving rendering performance:

.container {
  content-visibility: auto;
}

It delays rendering until the content is about to be visible.

Q) 122. How does the CSS mix-blend-mode property work?

Controls how an element’s content blends with the underlying content or background, using blend modes like `multiply`, `screen`, `overlay`, etc.:

.element {
  mix-blend-mode: multiply;
}

This creates visual effects by mixing colors of overlapping elements.

Q) 123. What are pseudo-elements in CSS and give examples?

Pseudo-elements create virtual elements to style parts of an element:

`::before`: Inserts content before the element’s content.
`::after`: Inserts content after the element’s content.

Example:

p::before {
  content: "Note: ";
}

Q) 124. How can you style form elements consistently across browsers?

Achieved by using CSS resets to neutralize default styles, vendor prefixes for compatibility, and applying custom styles carefully to override browser defaults.

Q) 125. Explain the difference between inline, block, inline-block, flex, and grid display types.

`inline`: Flows with text, no block box created.
`block`: Element takes full width, starts on a new line.
`inline-block`: Flows inline but respects box model (width, height).
`flex`: Creates a flex container for flexible, one-dimensional layouts.
`grid`: Creates a two-dimensional grid container for rows and columns.

Q) 126. What is the difference between min-content, max-content, and fit-content?

`min-content`: Smallest size that fits the content without overflow.
`max-content`: Largest size that fits content without wrapping.
`fit-content`: Clamps size between a defined minimum and maximum.

Q) 127. How do CSS counters work?

Counters allow custom numbering using `counter-reset`, `counter-increment`, and displaying numbers with `content`:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

Q) 128. What is the purpose of the CSS all property?

Resets all CSS properties on an element at once to `initial`, `inherit`, or `unset`:

element {
  all: unset;
}

Useful for removing all inherited or applied styles easily.

Q) 129. How do you implement responsive typography in CSS?

Use relative units like `em`, `rem`, viewport units (`vw`, `vh`), and functions like `clamp()` combined with media queries to scale text responsively.

Q) 130. What is the CSS object-fit property?

Defines how replaced content like images or videos fit their container:

`fill`: Stretches to fill container, may distort.
`contain`: Scales to fit inside container, preserving aspect ratio.
`cover`: Scales to cover container, cropping if needed.
`none`: No resizing.
`scale-down`: Smaller of `none` or `contain`.

Q) 131. How does the CSS gap property work in Flexbox and Grid?

The `gap` property adds uniform spacing between flex or grid items without needing extra margins on children:

.container {
  display: flex; /* or grid */
  gap: 10px;
}

This creates consistent gaps without collapsing or complicated margin handling.

Q) 132. How do you implement sticky footers with CSS?

Using flexbox on the body or wrapper:

body, .wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.footer {
  margin-top: auto;
  height: 50px;
}

This pushes the footer to the bottom even if content is short.

Q) 133. What is the difference between auto-fill and auto-fit in CSS Grid?

`auto-fill`: Fills the grid container with as many columns as possible, including empty tracks.
`auto-fit`: Similar to auto-fill but collapses empty tracks, allowing existing columns to stretch.

Q) 134. How do you create a CSS-only tooltip?

Use pseudo-elements with opacity and visibility for hover effect:

.tooltip {
  position: relative;
}
.tooltip:hover::after {
  content: "Tooltip text";
  position: absolute;
  opacity: 1;
  visibility: visible;
  background: black;
  color: white;
  padding: 5px;
  border-radius: 4px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.tooltip::after {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

Q) 135. What is the contain-intrinsic-size property?

Defines the intrinsic size for elements with `content-visibility: auto` to reserve layout space before rendering:

.element {
  contain-intrinsic-size: 300px 200px;
}

Q) 136. How do you make a circle using CSS?

Set equal width and height with `border-radius: 50%`:

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
}

Q) 137. What is the difference between transform: translate() and position: relative; top/left?

`transform: translate()`: Moves the element visually without affecting document flow or layout.
`position: relative; top/left`: Moves the element relative to its normal position and affects layout space.

Q) 138. How do you hide content visually but keep it accessible for screen readers?

Use a utility class:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Q) 139. How does the object-position property work?

Specifies the alignment of replaced content like images within their container when using `object-fit`:

img {
  object-fit: cover;
  object-position: center top;
}

Q) 140. What is the caret-color property?

Sets the color of the text input cursor (caret):

input {
  caret-color: red;
}

Q) 141. How do you create multi-column layouts with CSS?

Use properties like `column-count`, `column-gap`, and `column-rule` to create multi-column text layouts:

.container {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid #ccc;
}

This splits content into multiple columns with gaps and optional dividing rules.

Q) 142. What is the difference between background-size: cover and background-size: contain?

`cover`: Scales background image to cover the entire container, cropping parts if necessary.
`contain`: Scales image to fit entirely inside container, possibly leaving empty space.

Q) 143. What are the benefits of using CSS Grid over Flexbox?

CSS Grid is a two-dimensional layout system (rows and columns), suited for complex layouts, whereas Flexbox is one-dimensional (row or column), better for simpler, linear layouts.

Q) 144. How does the CSS scroll-behavior property work?

Controls scrolling behavior for smooth user experience when using anchor links or programmatic scrolling:

html {
  scroll-behavior: smooth;
}

Q) 145. What is the CSS pointer-events property?

Controls if an element can receive pointer events like clicks or hovers. For example:

.element {
  pointer-events: none; /* disables pointer interaction */
}

Q) 146. How can you make images responsive?

Use max-width and height auto to ensure images scale properly within their containers:

img {
  max-width: 100%;
  height: auto;
}

Q) 147. What is the CSS resize property?

Allows or prevents elements (like textareas) from being resizable by the user:

textarea {
  resize: both; /* allows resizing horizontally and vertically */
}

Q) 148. How do you implement CSS grid areas?

Define named grid areas and assign elements to those areas:

.container {
  display: grid;
  grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";
  grid-gap: 10px;
}
.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.footer {
  grid-area: footer;
}

Q) 149. What is the difference between filter: blur() and backdrop-filter?

`filter: blur()`: Applies blur to the element’s content itself.
`backdrop-filter`: Applies filter effects (like blur) to the area behind the element.

Q) 150. How do you optimize CSS for better performance?

Minify CSS files.
Include only necessary styles.
Avoid complicated or overly specific selectors.
Use shorthand CSS properties.
Utilize CSS variables for consistency and simplicity.
Limit costly properties like `box-shadow` and `filter`.
Use `will-change` sparingly to hint browser optimizations without performance penalties.

Q) 151. What are CSS rounded corners and how do you create them?

Rounded corners are created using the `border-radius` property, which defines the radius of the element’s corners:

div {
  border-radius: 10px;
}

This rounds each corner with a 10px radius.

Q) 152. What is the border-image property in CSS?

The `border-image` property uses an image as an element’s border instead of solid colors or border styles:

div {
  border: 10px solid transparent;
  border-image: url(border.png) 30 stretch;
}

Q) 153. How do you set multiple backgrounds on a single element in CSS?

Specify multiple backgrounds by separating values with commas:

div {
  background-image: url(image1.png), url(image2.png);
  background-position: left top, right bottom;
  background-repeat: no-repeat, no-repeat;
}

Each background image can have its own position and repeat settings.

Q) 154. What are different ways to specify colors in CSS?

Colors can be written using:

Named keywords (e.g., `red`)
Hexadecimal values (e.g., `#ff0000`)
RGB values (e.g., `rgb(255,0,0)`)
RGBA (with alpha transparency) (e.g., `rgba(255,0,0,0.5)`)
HSL (Hue, Saturation, Lightness) (e.g., `hsl(0, 100%, 50%)`)
HSLA (HSL + alpha) (e.g., `hsla(0, 100%, 50%, 0.5)`)

Q) 155. What are CSS color keywords? Give examples.

Predefined color names recognized by CSS, such as `red`, `blue`, `green`, `black`, `white`, `orange`, `yellow`.

Q) 156. How do you create CSS gradients?

Gradients are created using `linear-gradient()` or `radial-gradient()` functions:

div {
  background: linear-gradient(to right, red, yellow);
}

Q) 157. What are box shadows and text shadows in CSS? How do you apply them?

`box-shadow`: Adds shadow around an element’s box.
`text-shadow`: Adds shadow to text content.

Examples:

div {
  box-shadow: 2px 2px 5px gray;
}
p {
  text-shadow: 1px 1px 2px black;
}

Q) 158. What are common CSS text effects?

Include:

`text-shadow`
`text-transform` (uppercase, lowercase)
`letter-spacing` and `word-spacing`
`text-decoration` (underline, line-through)
`text-indent`

Q) 159. What are web fonts and how do you use them in CSS?

Web fonts are custom fonts loaded on the web via `@font-face` or external services like Google Fonts:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
  font-family: 'Roboto', sans-serif;
}

Q) 160. What are CSS 2D transforms? Give examples.

Move, rotate, scale, or skew elements in 2D:

div {
  transform: rotate(45deg) scale(1.2);
}

Q) 161. What are CSS 3D transforms?

3D transforms allow elements to be manipulated in three-dimensional space using functions like `rotateX()`, `rotateY()`, `translateZ()`, combined with `perspective` to control depth:

div {
  transform: rotateX(45deg) translateZ(100px);
  perspective: 500px;
}

Q) 162. How do CSS transitions work?

Transitions allow smooth animation between property changes over a set duration:

button {
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: blue;
}

Q) 163. What are CSS animations?

Animations use `@keyframes` to define stages of animation and the `animation` shorthand to apply:

@keyframes slide {
  from { left: 0; }
  to { left: 100px; }
}
div {
  animation: slide 2s infinite alternate;
}

Q) 164. How do you create CSS tooltips?

Using `::after` or `::before` pseudo-elements with visibility and opacity toggled on hover for tooltip text:

.tooltip:hover::after {
  content: "Tooltip text";
  position: absolute;
  background: black;
  color: white;
  padding: 5px;
  border-radius: 3px;
}

Q) 165. How do you style images using CSS?

Image styling can use properties like `border`, `border-radius`, `box-shadow`, `opacity`, and `filter` for visual effects.

Q) 166. How do you center an image in CSS?

Using block display and margin auto:

img {
  display: block;
  margin: auto;
}

Or using flexbox:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Q) 167. What CSS filters can be applied to images?

Common CSS filters include `blur()`, `brightness()`, `contrast()`, `grayscale()`, `invert()`, `opacity()`, `sepia()`, and `drop-shadow()`:

img {
filter: grayscale(100%);
}

Q) 168. What are CSS image shapes?

Define how text wraps around images using `shape-outside` and define visible parts using `clip-path`:

img {
float: left;
shape-outside: circle(50%);
clip-path: circle(50%);
}

Q) 169. What is the CSS object-fit property?

Defines how an image or video fits inside its container:

`fill`: stretches to fill container, may distort.
`contain`: fits fully inside container, keeping aspect ratio.
`cover`: fills container, cropping if needed.
`none`: no resizing.
`scale-down`: scales down if larger than container.

Example:

img {
  object-fit: cover;
}

Q) 170. What does the object-position property do?

Sets the alignment of the replaced content inside its container when using `object-fit`:

img {
  object-position: center top;
}

Q) 171. What is CSS masking?

Masking hides parts of an element based on an image or gradient, controlling element visibility:

div {
  mask-image: url(mask.png);
}

Areas covered by the mask image are shown; others are hidden.

Q) 172. How do you style buttons in CSS?

Buttons can be styled with:

`background-color`
`border`
`padding`
`font-size`
`border-radius`
`box-shadow`
Hover and active state effects

Example:

button {
  background-color: #06c;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  color: white;
  cursor: pointer;
}
button:hover {
  background-color: #005bb5;
}

Q) 173. How is pagination styled using CSS?

Pagination styles include creating visually distinct links or buttons with hover, active states, proper spacing, and alignment for easy navigation in multi-page content.

Q) 174. How do you create multiple columns in CSS?

Using properties like `column-count`, `column-gap`, and optionally `column-width`:

div {
  column-count: 3;
  column-gap: 20px;
}

This distributes content into multiple columns with gaps.

Q) 175. What is the CSS user interface module?

Incorporates properties controlling user interaction and appearance, such as:

`cursor`
`outline`
`resize`
`box-sizing`

Q) 176. What are CSS variables and how do you use them?
Custom properties allow reusing values and improving maintainability:

:root {
  --main-color: #06c;
}
p {
  color: var(--main-color);
}

Q) 177. What is the CSS @property rule?

Registers custom properties with type syntax, inheritance, and initial value to enable smooth transitions:

@property --my-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #000;
}

Q) 178. What is the CSS box-sizing property?

Defines box model calculation:

`content-box` (default): width/height apply only to content.
`border-box`: width/height include padding and border.

Example:

* {
  box-sizing: border-box;
}

Q) 179. What are media queries in CSS?

Allows conditional CSS rules depending on device features:

@media (max-width: 600px) {
  body {
   background-color: lightgray;
  }
}

Q) 180. Give examples of CSS media queries.

– Max width devices:

@media (max-width: 768px) { /* styles */ }

– High-resolution screens:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* styles */ }

– Orientation-based:

@media (orientation: landscape) { /* styles */ }

Q) 181. How do you change the cursor style in CSS?

Use the `cursor` property to change the mouse pointer appearance:

button {
cursor: pointer;
}

Common values include `pointer`, `default`, `text`, `move`, etc.

Q) 182. What does the resize property do in CSS?

Allows users to resize elements like `<textarea>`:

textarea {
  resize: both; /* allows horizontal and vertical resizing */
}

Other values: `none`, `horizontal`, `vertical`.

Q) 183. What is the difference between visibility: hidden and display: none?

`visibility: hidden`: Element is invisible but still occupies space.
`display: none`: Element is removed from the layout and takes no space.

Q) 184. How do you make a responsive layout using media queries?

Use `@media` rules to modify layout based on screen width:

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

Q) 185. What is the difference between position: absolute and fixed?

`absolute`: Positioned relative to nearest ancestor with `position` other than static.
`fixed`: Positioned relative to the viewport; stays fixed on scroll.

Q) 186. What does clip-path do in CSS?

Defines a clipping region to show only part of an element:

img {
clip-path: circle(50%);
}

This clips the image to a circle shape.

Q) 187. What is the difference between rem and em units?

`em`: Relative to font size of the parent element.
`rem`: Relative to font size of the root `<html>` element.

Q) 188. What is the z-index property in CSS?

Controls stacking order of overlapping elements; higher values are on top.

Q) 189. How do you make a div draggable in CSS?

CSS cannot make elements draggable alone; JavaScript is needed. CSS can style cursor:

div {
cursor: move;
}

Q) 190. How do you apply a hover effect to an image?

Use `:hover` to style images on mouse hover:

img:hover {
filter: brightness(80%);
transform: scale(1.05);
}

Q) 191. What does overflow: hidden do in CSS?

`overflow: hidden` clips and hides any content that exceeds the element’s box, preventing scrollbars from appearing and hiding overflowed content.

Q) 192. How do you apply different styles for print and screen using CSS?

Use media-specific `@media` queries to target print or screen devices:

@media print {
  body {
    background: white;
  }
}

This applies the styles only when printing.

Q) 193. What is the will-change property used for?

`will-change` hints the browser about which CSS properties will change soon, allowing optimizations to improve rendering performance for animations or transitions.

Q) 194. What is the default value of box-sizing?

The default is `content-box`, where width and height include only the content size, excluding padding and border.

Q) 195. What is the use of line-height in CSS?

`line-height` sets the vertical spacing between lines of text, enhancing readability and vertical alignment.

Q) 196. How do you vertically center text inside a div?

Using Flexbox:

div {
  display: flex;
  align-items: center; /* vertical center */
  justify-content: center; /* horizontal center */
}

Q) 197. What is a keyframe in CSS animation?

`@keyframes` defines the intermediate steps or frames of a CSS animation, specifying styles and positions at different times.

Q) 198. Can you animate background gradients in CSS?

Yes, by animating properties like `background-position` or overlaying multiple gradients, combined with `@keyframes`.

Q) 199. What is the opacity property used for?

Controls element transparency from 0 (fully transparent) to 1 (fully opaque).

Q) 200. How do you hide scrollbars while keeping scroll functionality?

Hide scrollbars but keep scrolling enabled with:

div {
  overflow: scroll;
  scrollbar-width: none; /* Firefox */
}
div::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

Q) 201. What is Flexbox in CSS?

Flexbox (Flexible Box Layout) is a CSS layout model for arranging items in a container efficiently, even when their sizes are dynamic or unknown. It provides alignment, distribution, and space management along a single axis.

Q) 202. How do you enable Flexbox on an element?

Set the container’s display:

.container {
  display: flex; /* or inline-flex */
}

This activates Flexbox for direct children.

Q) 203. What are the two main components of Flexbox?

Flex Container: The parent element with `display: flex`.
Flex Items: Direct child elements inside the flex container.

Q) 204. What is the default direction of flex items?

`row` — items are laid out horizontally from left to right.

Q) 205. How do you change the direction of flex items?

Use `flex-direction` property to change layout axis:

.container {
  flex-direction: column; /* vertical layout */
}

Values: `row`, `row-reverse`, `column`, `column-reverse`.

Q) 206. What does justify-content do in Flexbox?

Aligns flex items horizontally along the main axis with values like:

`flex-start`
`flex-end`
`center`
`space-between`
`space-around`
`space-evenly`

Q) 207. What does align-items do in Flexbox?

Aligns flex items vertically along the cross axis:

`stretch` (default)
`flex-start`
`flex-end`
`center`
`baseline`

Q) 208. What is the difference between align-items and align- content?

`align-items`: Aligns individual items within a single line on cross-axis.
`align-content`: Aligns multiple lines when items wrap; controls spacing between lines.

Q) 209. How do you make flex items wrap to the next line?

Use `flex-wrap: wrap` to allow items to flow onto multiple lines:

.container {
  flex-wrap: wrap;
}

Q) 210. What is flex-flow in CSS?

A shorthand for `flex-direction` and `flex-wrap` combined:

.container {
  flex-flow: row wrap;
}

Q) 211. What is the use of flex-grow?

`flex-grow` specifies how much a flex item should grow relative to other items when there is extra space:

.item {
  flex-grow: 1;
}

An item with `flex-grow: 1` will take available extra space proportionally.

Q) 212. What is flex-shrink in Flexbox?

`flex-shrink` controls how much a flex item shrinks when space is insufficient:

.item {
  flex-shrink: 1;
}

Higher values cause the item to shrink more relative to others.

Q) 213. What is the flex-basis property?

Sets the initial main size of a flex item before distributing free space:

.item {
  flex-basis: 200px;
}

It acts like a base size before growing or shrinking.

Q) 214. What is the shorthand flex property?

Combines `flex-grow`, `flex-shrink`, and `flex-basis` in one declaration:

.item {
  flex: 1 0 100px;
}

Here: grow = 1, shrink = 0, basis = 100px.

Q) 215. How do you center an element using Flexbox?

Center flex items horizontally and vertically:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Q) 216. How do you align one item differently from the others?

Use `align-self` on a specific flex item to override container alignment:

.item {
  align-self: flex-start;
}

Q) 217. What happens if the total width of items exceeds the container in Flexbox?

Items overflow unless:

`flex-wrap: wrap` is used to wrap items
or `flex-shrink` reduces item sizes to fit.

Q) 218. What does order do in Flexbox?

Changes the visual display order of flex items without altering HTML structure:

.item {
  order: 2;
}

Items with lower order values appear first.

Q) 219. How is Flexbox useful for responsive design?

Flexbox adapts layouts by growing, shrinking, and wrapping items, enabling flexible designs suitable for various screen sizes.

Q) 220. Can Flexbox and Media Queries be used together?

Media queries can adjust flex properties depending on screen size:

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Q) 221. What is CSS Grid?

CSS Grid is a two-dimensional layout system that allows precise control of layouts by positioning elements into rows and columns, suitable for complex web designs.

Q) 222. How do you enable Grid layout on an element?

Set the container to use grid layout:

.container {
  display: grid;
}

Q) 223. What are the main components of CSS Grid?

Grid Container: The element with `display: grid`.
Grid Items: Direct child elements inside the grid container.

Q) 224. How do you define columns and rows in a grid?

Use `grid-template-columns` and `grid-template-rows` to set track sizes:

.container {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 100px 100px;
}

Q) 225. What is the fr unit in CSS Grid?

The `fr` unit represents a fraction of available space. Example:

grid-template-columns: 1fr 2fr;

The second column takes twice the space of the first.

Q) 226. How do you create a gap between grid cells?

Use `gap`, `row-gap`, or `column-gap` to add spacing between grid tracks:

.container {
  gap: 10px;
}

Q) 227. What is repeat() in CSS Grid?

Simplifies repeating patterns of columns or rows:

grid-template-columns: repeat(3, 1fr); /* 3 equal columns */

Q) 228. How do you make a grid responsive?

Use flexible units like `fr` and functions like `minmax()` combined with media queries:

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Q) 229. How do you place a grid item in a specific cell?

Control the position using `grid-column` and `grid-row`:

.item {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

Q) 230. How do you make a grid item span multiple columns or rows?

Use `span` keyword in grid placement:

.item {
  grid-column: 1 / span 2; /* spans 2 columns */
}

Q) 231. What is the difference between auto and fr in Grid?

`auto`: Size is based on the content’s intrinsic size.
`fr`: Represents a fraction of the available free space, distributing space proportionally.

Q) 232. What does grid-auto-rows and grid-auto-columns do?

These properties set the size for implicitly created rows or columns that are added beyond defined grid tracks:

.container {
  grid-auto-rows: 100px;
}

Q) 233. How do you align content in the grid?

Use:

`justify-items`: Aligns items horizontally within their cells.
`align-items`: Aligns items vertically within their cells.
`justify-content`: Aligns the whole grid horizontally inside the container.
`align-content`: Aligns the whole grid vertically inside the container.

Example:

.container {
  justify-items: center;
  align-items: center;
}

Q) 234. What is the difference between justify-items and justify- content?

`justify-items`: Controls alignment of items inside their individual grid cells.
`justify-content`: Controls alignment of the entire grid structure inside the container.

Q) 235. What is the default value of grid-auto-flow?

Defaults to `row` — grid items fill each row before creating a new row.

Q) 236. How do you change the direction of item placement in a grid?

Use:

grid-auto-flow: column;

to fill columns first before adding new columns.

Q) 237. Can CSS Grid and Flexbox be used together?

Yes. Use CSS Grid for overall page or section layout (rows and columns), and Flexbox for managing alignment and distribution of items inside grid cells.

Q) 238. What is the use of place-items in Grid?

Shorthand for setting both `align-items` and `justify-items`:

.container {
  place-items: center;
}

Q) 239. How do you create a named grid area?

Define named areas in `grid-template-areas` and assign grid items with `grid-area`:

.container {
  display: grid;
  grid-template-areas:
  "header header"
  "sidebar content";
}
.header {
  grid-area: header;
}

Q) 240. What is the benefit of CSS Grid over older layout techniques?

CSS Grid enables simpler, two-dimensional layouts with less code, improved alignment capabilities, and removes the need for floats, clearfix hacks, or complex positioning.

Q) 241. What is Responsive Web Design (RWD)?

Responsive Web Design is an approach ensuring web content adapts smoothly to various screen sizes, devices, and orientations for optimal user experience.

Q) 242. Why is responsive design important?

It improves usability and accessibility across all devices, enhances SEO ranking, and eliminates the need to maintain multiple website versions.

Q) 243. What is the role of CSS in responsive design?

CSS manages layout, visibility, and adaptability using media queries, flexible grids, and fluid images to create responsive interfaces.

Q) 244. What is a viewport in RWD?

The viewport is the visible portion of a web page on a device’s screen, controlled via the `<meta>` tag for scaling and dimension.

Q) 245. What meta tag is essential for responsive design?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This sets the viewport width to the device’s width and initializes zoom level.

Q) 246. What does width=device-width mean in the viewport tag?

It instructs the browser to set the page width equal to the device screen width for correct scaling and layout.

Q) 247. What is a responsive grid view?

A layout system with columns that automatically adapt to screen size—commonly using 12-column grids, like in frameworks such as Bootstrap.

Q) 248. How do you create a simple responsive grid using CSS Grid?

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

This creates flexible columns that fit the container width and wrap responsively.

Q) 249. What are media queries in CSS?

Media queries apply CSS conditionally based on device features like width, height, resolution, or orientation.

Q) 250. Basic syntax of a media query?

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

This CSS applies when the viewport width is 768px or less, typically for mobile devices.

Q) 251. Difference between max-width and min-width in media queries?

`max-width`: Targets screen sizes up to and including a specified width.
`min-width`: Targets screen sizes starting from a specified width and larger.

Q) 252. What is a mobile-first approach?

Start styling for small screens first, then use `min-width` media queries to progressively enhance the design for larger screens.

Q) 253. How can images be made responsive?

Use:

img {
  max-width: 100%;
  height: auto;
}

This ensures images scale down to fit containers while maintaining aspect ratio.

Q) 254. How to make background images responsive?

Use:

background-size: cover;
background-position: center;

To cover the container fully while keeping the image centered.

Q) 255. What is the <picture> element used for in RWD?

Serves different versions of an image based on screen size or resolution for better performance and clarity.

Q) 256. How to make embedded videos responsive?

Wrap the `<iframe>` in a container with padding to maintain aspect ratio:

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
}
.video-container iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

Q) 257. What are responsive frameworks?

CSS frameworks providing pre-built responsive components and grid systems, such as Bootstrap, Foundation, and Tailwind CSS.

Q) 258. What is Bootstrap used for?

Bootstrap is a popular, mobile-first front-end framework that helps design responsive websites and applications rapidly.

Q) 259. What’s a responsive template?

Pre-built HTML/CSS templates designed to adapt automatically to various device sizes and orientations.

Q) 260. Name a few popular RWD frameworks.

Bootstrap
Foundation
Tailwind CSS
Bulma
Materialize

Q) 261. What is vw and vh in CSS?

`vw`: 1% of the viewport’s width.
`vh`: 1% of the viewport’s height.

These units help create elements that scale dynamically with the screen size.

Q) 262. What is clamp() in CSS and how is it used responsively?

`clamp()` allows setting a flexible value constrained by minimum and maximum limits:

font-size: clamp(1rem, 2vw, 2rem);

This makes font size responsive but bounded for readability.

Q) 263. What is object-fit: cover and how is it useful?

`object-fit: cover` makes an image or video fill its container while preserving aspect ratio, cropping overflow if needed.

Q) 264. What’s the purpose of container classes in responsive layouts?

Containers center page content and add horizontal padding at different breakpoints, controlling max width for readability and aesthetics (e.g., Bootstrap containers).

Q) 265. What does auto-fit do in grid layouts?

`auto-fit` automatically fills the container with as many columns as will fit, stretching existing columns when space allows.

Q) 266. How do you hide elements in certain screen sizes?

Use media queries with display properties:

@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }
}

Q) 267. How do flex-wrap and media queries work together?

Combine `flex-wrap: wrap` with media queries to rearrange layouts and wrap flex items on smaller screens.

Q) 268. How does Tailwind CSS handle responsiveness?

Tailwind uses utility classes with responsive prefixes like `md:`, `lg:` to apply styles at specific breakpoints:

<div class="p-4 md:p-8"></div>

Q) 269. Can you use Flexbox and Grid together in RWD?

Use CSS Grid for overall layout structure and Flexbox inside grid cells for flexible alignment of items.

Q) 270. What is a media feature in CSS?

A media feature is a condition inside a media query, e.g., `max-width`, `orientation`, or `aspect-ratio`, that determines when styles apply.

Q) 271. What’s the difference between fluid and fixed layouts?

Fluid layouts use percentage-based widths that scale and adapt to different screen sizes.
Fixed layouts use fixed pixel widths that do not adjust, often causing horizontal scrolling on smaller screens.

Q) 272. What’s a breakpoint in responsive design?

A breakpoint is a screen width threshold (e.g., 768px, 1024px) where the layout or styles change to accommodate different device sizes.

Q) 273. How can you test responsiveness without devices?

Use browser developer tools like Chrome DevTools’ responsive mode to simulate various screen sizes and device resolutions for testing.

Q) 274. What are some accessibility considerations in RWD?

Use readable font sizes.
Maintain sufficient color contrast for visibility.
Ensure tap targets (buttons, links) are large enough for touch.
Use semantic HTML elements to structure content meaningfully.

Q) 275. What are some best practices for responsive design?

Employ a mobile-first CSS approach.
Avoid fixed pixel widths; prefer flexible units.
Test on real devices alongside emulators.
Optimize images for different screen sizes.
Use semantic HTML structure for clarity and SEO.

CSS Encyclopedia – 250+ Essential Questions & Answers for Web Developers

Comments

Leave a Reply Cancel reply