What does the 'box-sizing' property with a value of 'border-box' do?

  • It adds extra space to the content box.
  • It applies a shadow border around the element.
  • It changes the background color to black.
  • It makes the element's content box include padding and border.
The 'box-sizing' property with a value of 'border-box' makes the element's content box include the padding and border, ensuring that the specified width or height of the element includes everything within it, making layout and sizing more predictable and intuitive.

What is the main advantage of using a modular CSS approach?

  • It allows for inlining all styles, reducing HTTP requests.
  • It enforces the use of global styles for a consistent look and feel.
  • It prioritizes complex selector chaining for fine-grained control.
  • It simplifies CSS development by encouraging a component-based structure and reusable code.
The main advantage of using a modular CSS approach is that it simplifies CSS development by encouraging a component-based structure and the creation of reusable code. This approach makes it easier to manage and maintain styles, improves code reusability, and reduces the chances of CSS conflicts and errors.

Which combinator in CSS is used to select elements that are siblings and share the same parent?

  • ! (Siblings selector)
  • + (Adjacent sibling combinator)
  • > (Child combinator)
  • ~ (General sibling combinator)
The "~" (tilde) combinator in CSS is used to select elements that are siblings and share the same parent. It selects all siblings that match the specified selector.

If you want to blend the background images of an element, which property would you use?

  • background-blend-mode
  • background-image-blend-mode
  • background-mix-blend-mode
  • image-blend
To blend the background images of an element in CSS, you should use the background-blend-mode property. This property allows you to control how the background images blend with each other and with the element's background color. It offers various blending modes to achieve different visual effects.

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.

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.

The process by which styles are applied to an element based on their source and specificity is known as the ________.

  • Cascade
  • Declaration
  • Inheritance
  • Specificity
The process by which styles are applied to an element based on their source and specificity is known as the Cascade. Cascade refers to the process of determining which styles should be applied when there are conflicting style rules from different sources like user styles, author styles, and browser defaults.

What is the correct syntax to use a custom property in your CSS?

  • #property-name
  • &property-name
  • *property-name
  • --property-name
To use a custom property (also known as a CSS variable), you should use the syntax --property-name. Custom properties allow you to define reusable values in your CSS and use them throughout your stylesheet. They are preceded by two hyphens and are referenced with the var() function, like var(--property-name).

Which CSS property is used to clear the effects of floating elements?

  • border
  • clear
  • margin
  • padding
The clear property in CSS is used to clear the effects of floating elements. It ensures that no element should touch the left or right-hand sides of a floating element and that it should appear below any preceding floating elements.

What is the default value of the animation-direction property in CSS?

  • alternate
  • forwards
  • normal
  • reverse
The default value of the animation-direction property in CSS is normal. When animation-direction is set to normal, the animation plays forward, and then it starts from the beginning when it reaches the end, creating a continuous loop.

You are tasked with creating a theme switcher that changes a set of color variables. How can SASS/SCSS functions assist in achieving this?

  • Create SASS/SCSS functions that return different color values based on the selected theme.
  • Define multiple sets of color variables and switch between them using conditional statements.
  • Manually update the color variables in the SCSS files when a theme change is required.
  • Use JavaScript to change the color variables dynamically in the HTML.
To create a theme switcher in SASS/SCSS, you can define different color variables and use SASS/SCSS functions to return the appropriate color values based on the selected theme. This allows you to switch themes easily by changing a single variable and ensures consistency across your project.

What unit is typically recommended for setting the "line-height" property to ensure consistent spacing?

  • em
  • px
  • rem
  • vh
For setting the "line-height" property to ensure consistent spacing, the recommended unit is typically "em." Using "em" units allows the line height to be relative to the font size, which ensures that the spacing remains consistent even if the text size changes. This is especially useful for creating responsive and accessible web designs.