How can you set a fallback font in case the primary font fails to load?

  • Use the font-alt property.
  • Use the font-fallback property.
  • Use the font-family property with multiple font names in a comma-separated list.
  • Use the font-stack property.
To set a fallback font in case the primary font fails to load, you can use the font-family property and specify multiple font names in a comma-separated list. The browser will use the first font in the list that it can find and load. This ensures that even if the primary font is unavailable, the text will still be displayed using an alternative font.

How would you provide a fallback value when using a CSS custom property?

  • --custom-property: fallback-value, var(--fallback);
  • --custom-property: fallback-value;
  • --custom-property: var(--fallback, fallback-value);
  • --custom-property: var(fallback-value, --fallback);
To provide a fallback value for a CSS custom property, you can use the var() function. The first argument of var() is the custom property, and the second argument is the fallback value. If the custom property is not defined, the browser will use the fallback value. For example, --custom-property: var(--fallback, fallback-value); sets --custom-property to the value of --fallback if it exists, or "fallback-value" if --fallback is not defined.

You're developing a slide-in sidebar menu. What CSS property would be most efficient to animate for smooth performance?

  • margin
  • padding
  • transform
  • width
When developing a slide-in sidebar menu or any animation, using the transform property is the most efficient choice for smooth performance. This is because the transform property can be hardware-accelerated by the browser, leading to faster and smoother animations. Using properties like margin, padding, or width for animations can cause reflows and repaints, which can be less performant.

How can you target an input element in CSS based on its validation state?

  • input:disabled { }
  • input:invalid { }
  • input:required { }
  • input:valid { }
To target an input element in CSS based on its validation state, you can use the :invalid pseudo-class. This selector matches input elements that have failed validation, such as a required field left blank or an email input with an invalid format. For example, input:invalid { border: 2px solid red; } can be used to style invalid input elements.

What property is commonly used to control the speed curve of the transition effect?

  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
The property commonly used to control the speed curve of a transition effect in CSS is transition-timing-function. This property allows you to specify how the intermediate property values are calculated over the duration of the transition, giving you control over the timing and pace of the transition.

You want to design a heartbeat animation where a heart icon grows and shrinks continuously. How would you ensure the animation runs smoothly in both directions?

  • rotate transformation with CSS transitions
  • scale transformation with CSS animations
  • skew transformation with CSS animations
  • translate transformation with CSS keyframes
To create a smooth heartbeat animation that makes an icon grow and shrink, you should use the scale transformation with CSS animations. This allows you to scale an element up and down smoothly, ensuring it runs seamlessly in both directions.

The CSS pseudo-class :not() allows you to target elements that ________ a specific criteria.

  • Contradict
  • Fail
  • Match
  • Meet
The CSS pseudo-class :not() is used to select elements that do not match a specific criteria. It is used to exclude elements that would typically be selected by a CSS selector. For example, :not(.classname) selects all elements that do not have the specified class.

What does the CSS rule "ul > li" specifically target?

  • All li elements within a ul element.
  • All li elements within an ul class.
  • All ul and li elements.
  • Only the direct child li elements of a ul element.
The CSS rule "ul > li" specifically targets only the direct child li elements of a ul element. It will not target li elements that are nested further within the hierarchy of the HTML structure.

The CSS rule "ul + ul" will target an unordered list that ________.

  • Contains anchor elements.
  • Follows an ordered list.
  • Immediately follows another unordered list.
  • Is nested within a table.
The CSS rule "ul + ul" is a sibling combinator that targets an unordered list that immediately follows another unordered list in the HTML structure. This is used to style a specific occurrence of an unordered list in relation to another.

How would you ensure that an element remains in the normal document flow, even if its siblings are floated?

  • Add a margin property to the element.
  • Apply the clear property with a value other than none.
  • Set the display property to inline-block.
  • Use the position property with the value absolute.
To ensure that an element remains in the normal document flow and doesn't overlap floated siblings, you should use the clear property with a value other than none. This property specifies which side of an element other floating elements are not allowed.