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.
The CSS @keyframes rule lets you create ________ over a set duration.
- animations
- transforms
- transitions
- variables
The @keyframes rule in CSS is used to create animations over a set duration. You define specific animation steps within the @keyframes rule, and then you can apply this animation to elements using the animation property. It allows you to control how an element changes over time.
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.
When using the "font-display" property, the value ________ ensures the text remains invisible until the font is loaded.
- block
- fallback
- invisible
- swap
In web development, the "font-display" property is used to control how fonts are displayed. The value swap tells the browser to render text with system fonts until the custom font is loaded, making the text remain invisible until the custom font is ready.