What is the primary purpose of the float property in CSS?

  • To apply text styles such as font size and color.
  • To create flexible grid layouts.
  • To make text italic.
  • To position an element to the left or right, allowing content to flow around it.
The primary purpose of the float property in CSS is to position an element to the left or right within its containing element. This allows other content to flow around it, which is commonly used for creating multi-column layouts or wrapping text around images.

While building a flip card animation, you notice the back of the card is visible during the rotation. Which CSS property can help hide the back of the card until it's facing the viewer?

  • backface-visibility: hidden;
  • display: none;
  • opacity: 0;
  • visibility: hidden;
To hide the back of a card during a flip card animation, you can use the backface-visibility property with the value hidden. This property ensures that the back face of the card is not visible until it's facing the viewer, which is essential for creating realistic flip animations. Options like visibility: hidden;, display: none;, or opacity: 0; would make the entire element disappear, which is not the desired effect for a flip card animation.

The CSS property ________ can be used to control the amount of space after each paragraph.

  • line-height
  • margin-bottom
  • padding-bottom
  • text-indent
The CSS property margin-bottom is used to control the amount of space after each paragraph. It determines the space between the bottom of the paragraph and the next element on the page.

Which CSS pseudo-class would allow you to target only the last list item in an unordered list?

  • :last-child
  • :last-item
  • :nth-last-child
  • :only-child
To target the last list item in an unordered list, you should use the :last-child pseudo-class. This will select the last child element of its parent, which in this case is the last list item in the unordered list.

How would you style only the first list item of an unordered list in CSS?

  • ul li:first-child
  • ul li:nth-child(1)
  • ul:first-child li
  • ul:first-of-type li
To style only the first list item of an unordered list in CSS, you should use the ul li:first-child selector. This targets the first li element within a ul element. It's important to note that :first-child targets the first child of its parent, not the first of its type.

Which CSS property is used to clip an element to a basic shape like a circle or ellipse?

  • border-radius
  • clip-path
  • element-clip
  • shape-clip
The CSS property used to clip an element to a basic shape like a circle or ellipse is clip-path. This property allows you to define a clipping path that restricts the visible area of an element to the specified shape. It's commonly used for creating non-rectangular shapes. border-radius is used to round the corners of elements, not for clipping.

How can you reverse the order of flex items?

  • Apply the reverse-items: true; property.
  • Change the z-index property.
  • It's not possible to reverse the order of flex items.
  • Use the order property with a negative value.
To reverse the order of flex items, you can use the CSS order property with a negative value. This property allows you to control the visual order of the flex items without changing their actual HTML order.

How can you specify a fallback font if the primary font fails to load?

  • Add the "secondary" attribute to the "font" property
  • Define a secondary font using the "secondary-font" property
  • Use the "fallback-font" property
  • Utilize the "font-family" property with multiple font options
To specify a fallback font in case the primary font fails to load, you can use the "font-family" property with multiple font options. You list the preferred font first and then provide alternatives separated by commas. If the primary font is unavailable, the browser will attempt to use the next font in the list until it finds a suitable option or defaults to a system font.

What is the role of the src attribute inside the @font-face rule?

  • Defines the font color
  • Sets the font style
  • Specifies the font size
  • Specifies the font's source file location
Inside the @font-face rule, the "src" attribute is used to specify the font file's source location. This attribute tells the browser where to find and load the font file, allowing you to use custom fonts in your web design. It typically points to the location of a font file using a URL or local file path.

How do you specify the duration of a transition effect in CSS?

  • duration
  • time-duration
  • transition-duration
  • transition-time
To specify the duration of a transition effect in CSS, you use the transition-duration property. This property defines the amount of time it takes for the transition to complete. You can specify the duration using units like seconds (s) or milliseconds (ms). For example, transition-duration: 0.5s; sets the transition duration to half a second.