### Advanced CSS Questions

11. What is the di erence between `display: inline`, `display: block`, and `display: inline-block`?
- Answer: `display: inline` makes an element behave like an inline element, `display: block`
makes it a block-level element, and `display: inline-block` allows it to ow inline while retaining
block properties.

12. Explain the concept of CSS speci city.

- Answer: Speci city determines which CSS rule applies if multiple rules match the same
element. It's calculated based on the types of selectors used (inline styles, IDs, classes,
elements).

13. What is the purpose of `z-index` in CSS?

- Answer: `z-index` controls the stacking order of elements on the z-axis (depth). Higher values
are stacked above lower values.

14. How can you implement a CSS transition e ect?

- Answer: By using the `transition` property: `transition: all 0.3s ease;`

15. What are CSS variables and how do you use them?
- Answer: CSS variables (custom properties) are de ned with `--` and accessed using the `var()`
function. Example: `--main-color: #333;`, `color: var(--main-color);`

16. Explain the di erence between `absolute`, `relative`, ` xed`, and `sticky` positioning in CSS.
- Answer: `absolute` positions relative to the nearest positioned ancestor, `relative` positions
relative to itself, ` xed` positions relative to the viewport, and `sticky` toggles between relative and
xed based on scroll position.

17. How can you create a CSS animation?

- Answer: By using `@keyframes` to de ne the animation and `animation` properties to apply it:
`@keyframes mymove { from { top: 0; } to { top: 100px; } }`, `div { animation: mymove 2s in nite; }`

18. What is the ` ex` property in CSS and how is it used?

- Answer: The ` ex` property is shorthand for ` ex-grow`, ` ex-shrink`, and ` ex-basis`, used in
Flexbox layouts to de ne how elements grow and shrink: ` ex: 1 1 auto;`

19. What is the `calc()` function in CSS?

- Answer: `calc()` allows you to perform calculations to determine CSS property values: `width:
calc(100% - 50px);`

20. How can you create a gradient background in CSS?

- Answer: By using the `background: linear-gradient();` or `background: radial-gradient();`
properties: `background: linear-gradient(to right, red, yellow);`

These questions cover a broad range of CSS topics and can be useful for testing or improving
knowledge in CSS.
fi
fl
fi
ff
ff
fl
fi
fi
fi
fi
ff
fl
fi
fi
fl
fl
fl
fl
fi