Which of the following properties, when animated, would cause a "repaint" but not "reflow" in most browsers?
- color
- margin
- position
- width
When animated, changing the color property of an element typically causes a "repaint" (updating the pixels on the screen) but not a "reflow" (changing the layout of elements on the page). This is because changing the color doesn't affect the size or position of the element, but it does require repainting.
When using a mixin, you apply it to your styles with the ________ directive.
- @apply
- @extend
- @mixin
- @use
Mixins in SCSS are applied to your styles using the @include directive. This allows you to include the styles defined in the mixin within your CSS rules.
Which CSS property is used to vertically align inline elements or inline-block elements?
- margin
- padding
- text-align
- vertical-align
The CSS property used to vertically align inline elements or inline-block elements is vertical-align. It allows you to control how the element aligns in relation to the surrounding content or other inline elements. It's commonly used for aligning elements such as images and text within a line of text.
In a list where you want to style only list items that are not the first child, you'd use the pseudo-class ________.
- :first-item
- :last-child
- :not(:first-child)
- :not-first
To style list items that are not the first child, you can use the pseudo-class ":not(:first-child)." This allows you to target and style all list items except the first one in a list.
How can you underline text using CSS?
- font-decoration: underline;
- font-style: underline;
- text-decoration: underline;
- text-style: underline;
To underline text in CSS, you should use the text-decoration property and set it to "underline." This CSS rule adds a line beneath the text.
Which property in CSS is used to control how inherited values and set values are used by an element and its child elements?
- color
- display
- inherited
- position
The property used to control how inherited values and set values are used by an element and its child elements is the inherited property. It allows for the explicit declaration of whether a property should be inherited by child elements. This is particularly useful for managing the cascading nature of CSS.
The space between the content of an element and its border is determined by the ________ property.
- Border
- Margin
- Outline
- Padding
The space between the content of an element and its border is determined by the "padding" property in CSS. Padding provides the spacing between the content and the border of an element, allowing you to control the inner spacing.
To ensure that fonts are loaded from the same origin, you can use the ________ HTTP header.
- Access-Control-Allow-Origin
- Cache-Control
- Content-Disposition
- User-Agent
To ensure that fonts are loaded from the same origin, you can use the Access-Control-Allow-Origin HTTP header. This header specifies which origins are permitted to access a resource, which is useful for preventing cross-origin resource sharing issues.
You're creating a fluid typography system where the font size should never go below 16px, never exceed 32px, and scale smoothly between these values based on the viewport width. Which CSS function will help you achieve this?
- calc(16px + 3vw + 1vh - 32px)
- clamp(16px, (3vw + 1vh), 32px)
- fluid-size(16px, 32px)
- font-size: 16px; min-font-size: 32px; vw-font-scale: 3vw; vh-font-scale: 1vh;
To create a fluid typography system with specified limits and smooth scaling based on viewport width, you should use the clamp() function. The correct option is clamp(16px, (3vw + 1vh), 32px), which ensures the font size stays between 16px and 32px while smoothly scaling with viewport width changes.
You're working on a layout where you need to ensure that the width of a button remains constant, regardless of its padding and border. Which CSS property and value would you use?
- width: 100%
- width: auto
- width: max-content
- width: min-content
To make the width of the button remain constant, regardless of its padding and border, you would use width: min-content. This value ensures that the button's width is only as wide as its content, ignoring padding and border.