You've noticed that your web fonts are causing a delay in page rendering. Which property can you adjust to control how these fonts are displayed during the load process?

  • font-display
  • font-family
  • font-rendering
  • font-weight
To control how web fonts are displayed during the load process, you can adjust the font-display property in CSS. This property allows you to specify how the browser should handle font loading and rendering, with options like auto, swap, block, fallback, and optional. It helps you optimize the user experience when web fonts are slow to load or unavailable.

The value calc() in CSS allows you to perform ________.

  • Animation effects
  • Conditional statements
  • Mathematical operations on numeric values
  • Text manipulation
The value calc() in CSS allows you to perform mathematical operations on numeric values. It is a powerful feature that enables you to calculate values for various CSS properties, making it useful for responsive design and layout.

The cubic-bezier function for animation-timing-function takes in ______ arguments to define the curve.

  • 1
  • 2
  • 3
  • 4
The cubic-bezier function in CSS, used for defining custom timing functions for animations, takes in three arguments. These three arguments represent the control points of the cubic Bezier curve, allowing precise control over the animation's progress.

In a React application, you are tasked with styling a button that changes its background color based on a prop passed to it. Which CSS-in-JS library would be ideal for this?

  • Styled-components
  • Bootstrap
  • Tailwind CSS
  • SCSS
Styled-components is a popular CSS-in-JS library for React. It allows you to define component styles directly in your JavaScript code and can easily style components based on props, making it ideal for dynamic styling based on prop values.

Which CSS property allows you to set a graphical element to be used as a mask against an element?

  • element-mask
  • mask-clip
  • mask-image
  • mask-layer
The CSS property that allows you to set a graphical element to be used as a mask against another element is mask-image. This property lets you specify an image or SVG as a mask, which defines the transparency of an element based on the mask's alpha channel. It's often used for creating complex visual effects and overlays.

The default value of the flex-direction property in Flexbox is ________.

  • Column
  • Column-reverse
  • Row
  • Row-reverse
The default value of the flex-direction property in Flexbox is row. This means that flex items are laid out in a row, horizontally. If you want them to stack vertically, you need to set flex-direction to column.

Which SASS/SCSS feature allows you to pass values when including a mixin?

  • @include
  • @mixin
  • @pass
  • @values
To pass values when including a mixin in SASS/SCSS, you use the @include directive followed by the mixin name. The correct syntax is @include myMixin();. This allows you to apply the styles defined in the mixin and pass any necessary values as arguments inside the parentheses.

The "line-height" property can be set using units like px, em, and ________.

  • %
  • mm
  • rem
  • vh
The "line-height" property in CSS can be set using various units. While "px" and "em" are commonly used, it can also be set using a percentage ("%"). This percentage value is relative to the font size of the element, making it a versatile option for controlling line height.

You are designing a webpage for a vintage-themed site and want to use a cursive style for headings. Which CSS property-value combination will you use?

  • font-family: cursive;
  • font-style: cursive;
  • text-decoration: cursive;
  • text-transform: uppercase;
To achieve a cursive style for text in CSS, you should use the font-family property with the value set to 'cursive'. This will apply a cursive font family to the selected text, which is suitable for vintage-themed designs.

The default value of animation-timing-function is ______.

  • ease
  • infinite
  • linear
  • none
The default value for animation-timing-function is ease. This timing function provides a smooth and gradual acceleration at the beginning and a deceleration at the end of the animation, creating a more natural and visually appealing effect.

Which pseudo-element allows you to insert content at the end of an element's content?

  • ::after
  • ::before
  • ::first-line
  • ::last-child
The ::after pseudo-element allows you to insert content at the end of an element's content. This is often used for adding decorative elements, icons, or additional information after an element's main content. For example, p::after { content: " (End of Paragraph)"; } would insert "(End of Paragraph)" after each

element.

What does the flex-direction property control in a flex container?

  • It controls the direction in which flex items are laid out.
  • It determines the color of the flex items.
  • It sets the border thickness of the flex items.
  • It sets the font size of the flex items.
The flex-direction property in a flex container determines the direction in which flex items are laid out. It can be set to control whether the items are arranged in rows or columns, and the direction in which they flow.