|
Question: What is the CSS specificity hierarchy, and how does it determine which styles are applied?
|
Answer: The CSS specificity hierarchy determines which styles take precedence when multiple conflicting styles are
applied to the same element. It follows following hierarchy:
inline styles (style attribute) have the highest specificity, followed by ID selectors, class selectors, and element selectors.
Specificity is calculated based on the number of ID selectors, class selectors, and element selectors.
Inline styles override all other styles, while more specific selectors override less specific ones.
|
|
Question: How do you create a gradient background in CSS?
|
Answer: Gradients in CSS can be created using the linear-gradient() or radial-gradient() functions within the background property.
For example:
.gradient-bg {
background: linear-gradient(to right, #ff0000, #0000ff);
}
|
|
Question: What is the purpose of the CSS overflow property, and how can it be used?
|
Answer: The overflow property in CSS controls how content that overflows its container is handled.
It can be set to:
• visible (default, content overflows the container)
• hidden (overflowing content is clipped)
• scroll (scrollbars are added)
• auto (scrollbars are added only when necessary).
|
|
Question: Can you explain the concept of the CSS Flexbox layout and its advantages?
|
Answer: The Flexbox is a layout model in CSS that provides a more efficient way to layout,
align, and distribute space among items in a container, even when their size is unknown or dynamic.
It offers a simpler and more predictable way to achieve complex layouts compared to traditional CSS layout
methods like floats and positioning.
|
|
Question: What is the purpose of the CSS box-shadow property, and how is it used?
|
Answer: TThe box-shadow property in CSS adds a shadow effect to an element's box.
It accepts values for horizontal and vertical offsets, blur radius, spread radius, and color. For example:
.box-with-shadow {
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}
|
|
Question: What is the purpose of the CSS transition property, and how is it used?
|
Answer: The transition property in CSS allows you to create smooth transitions between different
property values over a specified duration.
It is commonly used to animate changes in properties like color, background, opacity, etc. For example:
.button {
transition: background 0.3s ease-in-out;
}
|