Which CSS property is used to clip an element to a basic shape like a circle or ellipse?
- border-radius
- clip-path
- element-clip
- shape-clip
The CSS property used to clip an element to a basic shape like a circle or ellipse is clip-path. This property allows you to define a clipping path that restricts the visible area of an element to the specified shape. It's commonly used for creating non-rectangular shapes. border-radius is used to round the corners of elements, not for clipping.
How can you reverse the order of flex items?
- Apply the reverse-items: true; property.
- Change the z-index property.
- It's not possible to reverse the order of flex items.
- Use the order property with a negative value.
To reverse the order of flex items, you can use the CSS order property with a negative value. This property allows you to control the visual order of the flex items without changing their actual HTML order.
How can you specify a fallback font if the primary font fails to load?
- Add the "secondary" attribute to the "font" property
- Define a secondary font using the "secondary-font" property
- Use the "fallback-font" property
- Utilize the "font-family" property with multiple font options
To specify a fallback font in case the primary font fails to load, you can use the "font-family" property with multiple font options. You list the preferred font first and then provide alternatives separated by commas. If the primary font is unavailable, the browser will attempt to use the next font in the list until it finds a suitable option or defaults to a system font.
What is the role of the src attribute inside the @font-face rule?
- Defines the font color
- Sets the font style
- Specifies the font size
- Specifies the font's source file location
Inside the @font-face rule, the "src" attribute is used to specify the font file's source location. This attribute tells the browser where to find and load the font file, allowing you to use custom fonts in your web design. It typically points to the location of a font file using a URL or local file path.
When an element's property is set to initial, it will use the ________.
- Current value
- Default value
- Inherited value
- Parent element's value
Setting an element's property to 'initial' means it will use the default value for that property as defined by the CSS specification. This effectively resets the property to its default state.
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.
What is the difference between the em and rem units when setting font size in CSS?
- em and rem are identical; there's no difference between them.
- em is a fixed unit equivalent to 16px, while rem is relative to the parent element.
- em is a unit of measurement for page width, while rem is for font size.
- em is relative to the font-size of the element itself, while rem is relative to the font-size of the root element (html).
The em unit is relative to the font-size of the element itself, while the rem unit is relative to the font-size of the root element (html). This means that em units can compound if used within nested elements, whereas rem units remain consistent throughout. Understanding this difference is crucial for responsive design.