You want to overlay a button on top of an image. The button should be at the bottom right corner of the image. How would you position the button using CSS?
- Position it absolutely and use "bottom: 0; right: 0;"
- Position it absolutely and use "top: 0; left: 0;"
- Position it relatively and use "bottom: 0; right: 0;"
- Position it relatively and use "top: 0; left: 0;"
To overlay a button on the bottom right corner of an image, you should position it absolutely and use "bottom: 0; right: 0;" to place it at the specified location relative to its nearest positioned ancestor or the viewport.
To make an animation pause and resume on hover, one could combine the animation-play-state property with the :hover ______.
- animation
- element
- hover
- selector
To make an animation pause and resume on hover, you can combine the animation-play-state property with the :hover pseudo-class on the element you want to affect. By setting animation-play-state: paused; on hover, you can pause the animation, and by setting it to running, you can resume it.
If a custom web font isn't supported or doesn't load, the browser will default to a ________ font.
- cursive
- monospace
- sans-serif
- serif
When a custom web font isn't supported or doesn't load, the browser will default to a "sans-serif" font. This is a fallback font that is widely available on most systems and ensures that text remains readable even when the custom font is unavailable.
You're working on a website where you want a circular profile picture, but the original image is square. How would you achieve this effect using CSS?
- border-radius: 50%;
- clip-path: circle(50%);
- mask-image: url(circle-mask.png);
- transform: rotate(45deg);
To create a circular profile picture from a square image, you can use the border-radius property and set it to 50%. This will round the corners of the square image and make it appear as a circle.
Which CSS property specifies whether an animation should play in reverse on alternate cycles?
- animation-alternate
- animation-direction
- animation-play-state
- animation-reverse
The animation-direction property in CSS is used to specify whether an animation should play in reverse on alternate cycles. When set to alternate, the animation runs forwards, then in reverse, and so on, creating a back-and-forth animation effect. This property is valuable for creating visually interesting and dynamic animations.
If you want to blend the background images of an element, which property would you use?
- background-blend-mode
- background-image-blend-mode
- background-mix-blend-mode
- image-blend
To blend the background images of an element in CSS, you should use the background-blend-mode property. This property allows you to control how the background images blend with each other and with the element's background color. It offers various blending modes to achieve different visual effects.
Which combinator in CSS is used to select elements that are siblings and share the same parent?
- ! (Siblings selector)
- + (Adjacent sibling combinator)
- > (Child combinator)
- ~ (General sibling combinator)
The "~" (tilde) combinator in CSS is used to select elements that are siblings and share the same parent. It selects all siblings that match the specified selector.
What is the main advantage of using a modular CSS approach?
- It allows for inlining all styles, reducing HTTP requests.
- It enforces the use of global styles for a consistent look and feel.
- It prioritizes complex selector chaining for fine-grained control.
- It simplifies CSS development by encouraging a component-based structure and reusable code.
The main advantage of using a modular CSS approach is that it simplifies CSS development by encouraging a component-based structure and the creation of reusable code. This approach makes it easier to manage and maintain styles, improves code reusability, and reduces the chances of CSS conflicts and errors.
What does the 'box-sizing' property with a value of 'border-box' do?
- It adds extra space to the content box.
- It applies a shadow border around the element.
- It changes the background color to black.
- It makes the element's content box include padding and border.
The 'box-sizing' property with a value of 'border-box' makes the element's content box include the padding and border, ensuring that the specified width or height of the element includes everything within it, making layout and sizing more predictable and intuitive.
What is the main advantage of using SCSS over plain CSS?
- Smaller file size
- Improved browser compatibility
- Better performance
- Advanced features like variables and nesting
The primary advantage of using SCSS over plain CSS is its advanced features, such as variables, nesting, and mixins. These features make the code more maintainable, reduce redundancy, and improve readability, which can significantly enhance the development process.