How does the opacity property differ from setting the alpha value in rgba for background colors in CSS?
- Opacity affects the element and its children, while rgba affects only the background color.
- Opacity and rgba are interchangeable and have the same effect.
- Opacity has no effect on background colors, only on text.
- Opacity only works for text elements, while rgba is for background colors.
The opacity property applies to the entire element and its content, affecting both text and background. The alpha value in rgba specifically controls the transparency of the background color.
In CSS Grid, which property defines the number of columns in the grid layout?
- column-count
- columns
- grid-columns
- grid-template-columns
The grid-template-columns property is used to define the number of columns in a CSS Grid layout. It specifies the size and track listing of columns in the grid.
The CSS property ________ can be used to create custom text outlines that enhance readability for users with low vision.
- font-outline:
- text-outline:
- text-shadow:
- text-stroke:
The correct CSS property for creating custom text outlines is text-outline. It is particularly useful for improving readability for users with low vision by adding a visible border around the text. The text-stroke property is not valid in CSS, and text-shadow is used for adding shadows, not outlines. font-outline is also not a valid CSS property.
What is the main difference between position: fixed; and position: sticky; in CSS?
- position: fixed; is affected by scrolling and becomes sticky.
- position: fixed; positions an element relative to the viewport, even during scrolling.
- position: sticky; becomes fixed after a certain scroll point.
- position: sticky; is not affected by scrolling and remains fixed.
position: fixed; keeps an element fixed relative to the viewport, while position: sticky; becomes fixed based on scroll position.
How would you apply a border only to the top side of an element?
- border-top:
- border: top
- border: top-side
- top-border:
To apply a border only to the top side of an element in CSS, use the border-top property followed by the desired border style, width, and color.
When using SVGs in CSS, how can you change the color of the SVG on hover?
- Background color
- Fill color
- Outline color
- Stroke color
In CSS, when working with SVGs, the :hover pseudo-class can be used to change the fill color of the SVG on hover. This is achieved by targeting the fill property and specifying the desired color. It's a common technique for enhancing user interactivity with SVG elements.
The ________ CSS property is essential for defining the external source of a custom font.
- font-family
- font-source
- font-url
- font-import
The correct option is 'c) font-url'. This property is used to specify the external source of a custom font by providing the URL of the font file. It is commonly used in the @font-face rule.
How does the animation-fill-mode property affect the state of the animated element before and after the animation?
- The animated element doesn't retain any styles before or after the animation.
- The animated element retains final styles before the animation and initial styles after.
- The animated element retains its initial styles before the animation and final styles after.
- The animated element skips initial styles and retains final styles after the animation.
The animation-fill-mode property defines how the styles of the element are calculated before and after the animation. Setting it to forwards makes the element retain the final styles, while backwards retains the initial styles.
CSS Houdini's ________ API is instrumental in creating complex animations that react to user input.
- Animation
- Input
- Layout
- Paint
The Animation Worklet in CSS Houdini is crucial for creating complex animations that react to user input. It enables developers to create highly interactive and dynamic animations using a more performant approach.
What is the concept of "clearfix" in CSS and why is it important?
- A technique to prevent container collapse caused by floated elements
- Adding extra margin to clear floats
- Applying a clear property to fix layout issues caused by floats
- Using overflow property to clear floats
The "clearfix" technique is crucial for preventing the collapse of a container caused by floated elements. It typically involves clearing the floats within the container to ensure proper layout and avoid unexpected issues.