Which of the following is NOT a unit for font-size in CSS?

  • cm
  • em
  • ex
  • px
In CSS, font-size can be specified in various units, including em, ex, px, and cm. However, 'cm' is not a common unit for font-size. It's typically used for specifying dimensions of other elements, like margins or padding.

The ::first-letter pseudo-element in CSS targets the ________ of a block-level element.

  • First character
  • First letter
  • First line
  • First word
The ::first-letter pseudo-element in CSS is used to target the first letter of a block-level element, such as a paragraph or a heading. It's commonly used for styling the initial letter of a text block, for decorative or typographic purposes.

If you want an animation to play forwards first, then reverse on alternate cycles, which value of animation-direction would you use?

  • alternate
  • alternate-reverse
  • normal
  • reverse
To make an animation play forwards first and then reverse on alternate cycles, you would use the animation-direction property with the value alternate-reverse. This value causes the animation to run normally on odd iterations (forwards) and in reverse on even iterations.

You're creating a button hover effect where the button scales up gradually. Which combination of CSS properties would you primarily use?

  • transform: scale(1.2);
    transition: transform 0.3s ease-in-out;
  • transition: scale(1.2) 0.3s ease-in-out;
    transform: scale(1.2);
  • scale(1.2);
    transition: transform 0.3s ease-in-out;
  • transform: scale(1.2);
    animation: scaleUp 0.3s ease-in-out;
To create a button hover effect where the button scales up gradually, you would primarily use the combination of CSS properties: transform: scale(1.2); for scaling the button and transition: transform 0.3s ease-in-out; to specify the transition duration, easing function, and the property to be transitioned (in this case, "transform"). This combination smoothly scales up the button on hover.

You're trying to vertically center a single item inside a container using Flexbox. Which properties would you set on the container to achieve this?

  • align-items: center and flex-direction: center
  • align-items: center and justify-content: center
  • flex-direction: center and flex-wrap: center
  • justify-content: center and align-content: center
To vertically center a single item inside a container using Flexbox, you would set the align-items property to "center" to vertically align the item within the container, and you would set justify-content to "center" to horizontally center the item within the container.

In Styled Components, styles are written inside the ________.

  • CSS files
  • HTML files
  • JSX files
  • JavaScript files
In Styled Components, a popular library for styling React components, styles are written inside JavaScript code using tagged template literals (usually within JSX files). This approach allows developers to encapsulate styles within the components themselves.

Using media queries, you can apply styles conditionally based on the ______ of the device or browser window.

  • color
  • sound
  • temperature
  • width
Media queries in CSS allow you to conditionally apply styles based on the width (or dimensions) of the device or browser window. By specifying different rules for various screen sizes, you can create responsive designs that adapt to different viewing environments.

With PostCSS, developers can write plugins to create custom ________ for their projects.

  • Compilers
  • Frameworks
  • Templates
  • Transformations
PostCSS is a versatile tool that allows developers to create custom transformations or plugins for their projects. These transformations can be used to modify or extend the functionality of CSS, making it a powerful and flexible tool for developers.

The @font-face rule allows web designers to use fonts that are not ________ on the user's machine.

  • available
  • compatible
  • installed
  • recognized
The @font-face rule in CSS allows web designers to use fonts that are not installed on the user's machine. This is useful for ensuring consistent typography across different devices.

The CSS unit vh represents a percentage of the ________.

  • Font Size
  • Height
  • Viewport
  • Width
The CSS unit 'vh' represents a percentage of the viewport's height. This means that 1vh is equal to 1% of the height of the viewport in which the web page is displayed. It's a relative unit often used for responsive design.

Which CSS property allows you to control the speed curve of an animation?

  • animation-ease
  • animation-speed-curve
  • animation-timing-function
  • animation-transition
The animation-timing-function property is used to control the speed curve of an animation. It allows you to specify how the animation progresses through time, giving you control over the easing and acceleration of the animation.

To apply an ease-in-out timing function to a transition, you'd set transition-timing-function to ________.

  • ease-in
  • ease-in-out
  • ease-out
  • linear
In CSS transitions, the transition-timing-function property controls the timing function for the transition. The ease-in-out option creates a smooth transition that starts slowly, accelerates in the middle, and slows down at the end. This is a common choice for animations that feel natural and pleasing to the eye.