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.
What effect does the animation-timing-function value of steps(4, end) have on an animation?
- It creates a bouncing effect during the animation.
- It creates a smooth, continuous animation.
- It divides the animation into 4 equal steps, ending smoothly.
- It makes the animation jump to its final state after 4 steps.
The "steps(4, end)" timing function divides the animation into 4 equal steps, and it ends smoothly. It means that the animation progresses in 4 distinct steps, and at the end of each step, it smoothly transitions to the next one.
In the BEM methodology, how is a modifier typically represented in a class name?
- Using a double underscore
- Using camelCase
- Using hyphens
- Using underscores
In the BEM (Block Element Modifier) methodology, a modifier is typically represented in a class name using underscores. This helps maintain a clear and consistent naming convention in your CSS classes. For example, if you have a block element called "button," a modifier for its size could be represented as "button__size_large."
You're creating a magazine-style layout with text flowing into multiple columns. As the viewport width increases, you want to add more columns while ensuring that each column does not exceed 250px in width. Which CSS properties would you adjust?
- column-count and column-width.
- max-width and min-width.
- grid-template-columns and grid-template-rows.
- overflow-x and overflow-y.
To achieve this, you should adjust the column-count and column-width CSS properties. column-count controls the number of columns, and column-width ensures that each column does not exceed a specified width (in this case, 250px).
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.
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.