The ________ filter in CSS is used to adjust the brightness of an element.

  • blur
  • brightness
  • contrast
  • sepia
The brightness filter in CSS is used to adjust the brightness of an element. It allows you to control how bright or dark an element appears, with values less than 1 making it darker, and values greater than 1 making it brighter.

Which property-value combination will make text both italicized and bold?

  • font-bold: true; font-italic: true;
  • font-type: bold-italic;
  • font-weight: bold; font-style: italic;
  • text-decoration: underline; font-style: italic;
To make text both italicized and bold, you should use the CSS properties font-weight: bold; to make it bold and font-style: italic; to make it italic. This combination creates text that is both thicker and slanted, resulting in bold and italicized text.

Which CSS property is used to change the text case, such as making text all uppercase?

  • font-style
  • letter-spacing
  • text-case
  • text-transform
The CSS property used to change the text case, such as making text all uppercase, is text-transform. It allows you to control the capitalization of text, including options like uppercase, lowercase, and capitalize. This is especially useful for headings and other text elements where you want to change the case style.

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.

Which extension is used for SCSS files?

  • .css
  • .scss
  • .html
  • .js
SCSS (Sassy CSS) files have the ".scss" extension. This extension is used to indicate that the file contains SCSS syntax, which is a more CSS-like syntax with additional features provided by SASS.

The pseudo-class :nth-of-type(2) in CSS targets the ________ of its type.

  • any element
  • first element
  • last element
  • second element
The pseudo-class :nth-of-type(2) in CSS targets the second element of its type. It allows you to select and style the second occurrence of an element type within its parent container. This is useful for creating specific styles for the second element, such as the second paragraph or the second list item.

What does the text-transform property do in CSS?

  • Adjusts the text's spacing
  • Alters the text's font size
  • Changes the text's color
  • Transforms the text into uppercase
The text-transform property in CSS is used to control the capitalization of text. Setting it to "uppercase" transforms the text to all uppercase letters, while "lowercase" makes it all lowercase.

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.

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.

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.