How can you specify that an animation should run in reverse order?

  • animation-direction: alternate;
  • animation-play-state: reverse;
  • animation-repeat: reverse;
  • animation-reverse: true;
To make an animation run in reverse order, you should use the animation-direction property and set it to alternate. This will cause the animation to play in the reverse direction after each iteration, creating a back-and-forth effect.

In a CSS keyframe animation, what does the 0% or from keyframe represent?

  • The starting point of the animation.
  • The midpoint of the animation.
  • The end point of the animation.
  • The animation duration.
In a CSS keyframe animation, the "0%" or "from" keyframe represents the starting point of the animation. It defines the initial state of the animated element. You can set CSS properties and values for this keyframe to specify how the element should look at the beginning of the animation.

If two conflicting styles affect an element, how does the browser decide which one to apply?

  • The style declared in the first stylesheet loaded takes precedence.
  • The style declared in the last stylesheet loaded takes precedence.
  • The style with the highest specificity is applied.
  • The style with the lowest specificity is applied.
When two conflicting styles affect an element, the browser prioritizes the style declared in the last stylesheet loaded. This is known as the "cascading" nature of CSS, where later declarations override earlier ones. Specificity comes into play only if the conflicting styles are in the same stylesheet.

You have a style rule with a class selector that is not being applied, even though another rule with three type selectors is applied to the same element. What could be the reason based on specificity?

  • Class selectors have higher specificity than type selectors.
  • Specificity is not a factor in CSS rule application.
  • The order of the rules in the stylesheet determines the application.
  • Type selectors have higher specificity than class selectors.
In CSS, class selectors have higher specificity than type selectors. Therefore, if a class selector rule is not being applied, but a rule with three type selectors is, it's likely because the class selector rule has a lower specificity.

When specifying the width of an element in CSS, what does the unit vw stand for?

  • Variable Width
  • Viewport Width
  • Virtual Width
  • Visual Width
'vw' stands for Viewport Width in CSS. It is a relative unit that represents a percentage of the width of the viewport, making it useful for creating responsive designs that adapt to different screen sizes.

You're building a website's header and you want it to stay at the top of the viewport when users scroll. Which positioning property would you use?

  • Absolute
  • Fixed
  • Relative
  • Static
To keep the header at the top of the viewport when users scroll, you should use the "position: fixed" property. This makes the element's position relative to the browser window, ensuring it stays in place while the page content scrolls beneath it.

The ::after pseudo-element in CSS is typically used to ________.

  • create inline comments in CSS
  • insert content after the selected element
  • select the first child element
  • style the element before the selected element
The ::after pseudo-element in CSS is used to insert content after the selected element. It is commonly used for adding decorative elements or additional content after an existing element. By using the ::after pseudo-element and specifying the content property, you can dynamically generate and place content after an element without modifying the HTML structure.

Which property allows you to control the size of tracks in a grid layout?

  • grid-row: auto;
  • grid-template-columns;
  • grid-template-rows;
  • grid-track: size;
The property that allows you to control the size of tracks (rows and columns) in a grid layout is 'grid-template-columns' for columns and 'grid-template-rows' for rows. These properties let you define the size of the grid tracks using various units like pixels, percentages, or 'fr' units.

What does the CSS property "font-display" control?

  • How much space a font file occupies on the server
  • How quickly a font is loaded and rendered on a web page
  • The color and style of text
  • The size of text
The "font-display" property in CSS controls how web fonts are displayed during loading. It's used to manage the flash of unstyled text (FOUT) or invisible text, making it an essential property for optimizing web font performance. Setting it to "swap" tells the browser to use a system font until the custom font is available, reducing FOUT.

How would you make an animation run indefinitely in CSS?

  • Set animation-iteration to infinite.
  • Set the animation-delay property to a very large value.
  • Use animation-loop property and set it to true.
  • Use the animation-duration property and set it to infinite.
To make an animation run indefinitely in CSS, you should use the animation-duration property and set it to infinite. This property specifies the time it takes for one cycle of the animation, and when set to infinite, it ensures that the animation continues to run indefinitely.