In SASS/SCSS, how do you define a mixin?

  • #mixin myMixin() { }
  • &mixin myMixin() { }
  • @mixin myMixin() { }
  • def mixin myMixin():
In SASS/SCSS, a mixin is defined using the @mixin directive followed by the mixin name and parentheses. The correct syntax is @mixin myMixin() { ... }. Mixins are used to encapsulate reusable sets of styles and can take parameters inside the parentheses if needed.

When using float, what happens to the element's position in the normal document flow?

  • It becomes a flex item.
  • It becomes a grid item.
  • It remains in the normal document flow.
  • It's removed from the document flow.
When you apply the CSS float property to an element, it is removed from the normal document flow. This means that other elements may flow around it as if it doesn't occupy space.

In the CSS box model, the ________ area is the space where content, like text or images, is displayed.

  • Border
  • Content
  • Margin
  • Padding
In the CSS box model, the "content" area is the space where content, such as text or images, is displayed. This is the innermost part of an element's layout and is surrounded by padding, border, and margin.

You have an element with a complicated graphical background, and you want certain parts of the foreground content to reveal or hide portions of this background. Which CSS technique would be most appropriate to achieve this?

  • background-clip: text;
  • opacity: 0.5;
  • visibility: hidden;
  • z-index: -1;
To reveal or hide portions of the background based on the foreground content, you can use background-clip: text;. This property allows the background to show through the text or other foreground elements, creating an interesting visual effect.

Which CSS property adjusts the space between lines of text?

  • line-height
  • line-spacing
  • text-spacing
  • word-spacing
The CSS property that adjusts the space between lines of text is "line-height." It is used to control the vertical space between lines, making text more readable and aesthetically pleasing. A larger value increases the line spacing, while a smaller value decreases it.

What does the 'padding' property in CSS affect?

  • Element's background color
  • Element's border
  • Space inside an element
  • Space outside an element
The 'padding' property in CSS affects the space inside an element. It determines the spacing between the element's content and its border, creating internal space.

Which property is used to span multiple rows or columns in a grid layout?

  • grid-area
  • grid-column-count
  • grid-row-count
  • grid-row-span
The grid-area property is used to span multiple rows and columns in a grid layout. By defining the starting and ending grid lines within this property, you can control how many rows and columns your grid item spans.

You want to overlay a button on top of an image. The button should be at the bottom right corner of the image. How would you position the button using CSS?

  • Position it absolutely and use "bottom: 0; right: 0;"
  • Position it absolutely and use "top: 0; left: 0;"
  • Position it relatively and use "bottom: 0; right: 0;"
  • Position it relatively and use "top: 0; left: 0;"
To overlay a button on the bottom right corner of an image, you should position it absolutely and use "bottom: 0; right: 0;" to place it at the specified location relative to its nearest positioned ancestor or the viewport.

To make an animation pause and resume on hover, one could combine the animation-play-state property with the :hover ______.

  • animation
  • element
  • hover
  • selector
To make an animation pause and resume on hover, you can combine the animation-play-state property with the :hover pseudo-class on the element you want to affect. By setting animation-play-state: paused; on hover, you can pause the animation, and by setting it to running, you can resume it.

If a custom web font isn't supported or doesn't load, the browser will default to a ________ font.

  • cursive
  • monospace
  • sans-serif
  • serif
When a custom web font isn't supported or doesn't load, the browser will default to a "sans-serif" font. This is a fallback font that is widely available on most systems and ensures that text remains readable even when the custom font is unavailable.