When specifying the width of an element in CSS, what does the unit vw stand for?

  • Variable Width
  • Viewport Width
  • Virtual Width
  • Visual Width
'vw' stands for Viewport Width in CSS. It is a relative unit that represents a percentage of the width of the viewport, making it useful for creating responsive designs that adapt to different screen sizes.

You have a style rule with a class selector that is not being applied, even though another rule with three type selectors is applied to the same element. What could be the reason based on specificity?

  • Class selectors have higher specificity than type selectors.
  • Specificity is not a factor in CSS rule application.
  • The order of the rules in the stylesheet determines the application.
  • Type selectors have higher specificity than class selectors.
In CSS, class selectors have higher specificity than type selectors. Therefore, if a class selector rule is not being applied, but a rule with three type selectors is, it's likely because the class selector rule has a lower specificity.

Which CSS property is used to create animations by gradually changing from one set of CSS styles to another?

  • animate
  • animate-duration
  • animation-duration
  • keyframes
The CSS property used to create animations by gradually changing from one set of CSS styles to another is keyframes. Keyframes are used to define a sequence of style changes over a specified duration using the @keyframes rule. The animation duration can be controlled by the animation-duration property.

How can you ensure that the animation effects persist after the animation completes its execution?

  • By adding "animation-play-state: running;"
  • By setting "animation-direction" to "alternate."
  • By setting the "animation-fill-mode" property to "forwards."
  • By using "animation-iteration-count: infinite."
To ensure that the animation effects persist after the animation completes, you should set the "animation-fill-mode" property to "forwards." This will make the animation retain its final state after completing its execution.

In terms of specificity, which type of selector has the highest priority?

  • Class selectors
  • Element selectors
  • ID selectors
  • Universal selectors
In terms of specificity, ID selectors have the highest priority. They are more specific than class selectors, element selectors, and universal selectors, and styles defined using ID selectors will override styles defined with lower-specificity selectors.

How can you pause an animation before it begins or between iterations?

  • animation-delay
  • animation-hold
  • animation-pause
  • animation-play-state
To pause an animation before it begins or between iterations, you should use the animation-play-state property. By setting it to paused, you can temporarily halt the animation. This is useful for creating interactive animations and controlling when they start or stop.

You're working on a responsive design where you want a row of items to wrap onto the next line when there isn't enough space. Which Flexbox properties would you adjust?

  • align-content and flex-basis
  • flex-direction and flex-wrap
  • justify-content and align-items
  • order and flex-grow
To make a row of items wrap onto the next line when there isn't enough space in a Flexbox layout, you would adjust the flex-direction property to "column" (for vertical stacking) and flex-wrap to "wrap." This allows the items to stack vertically when space is limited.

In the context of CSS masking, what does the mask-composite property do?

  • Combines a mask image with the element using the blend mode specified.
  • Defines the shape of the mask by specifying a path.
  • Determines the transparency of the mask image.
  • Specifies the position of the mask image relative to the masked element.
The mask-composite property in CSS is used to determine how a mask image should be combined with the element it's applied to. It's used to control the blending mode of the mask image with the element, allowing for various effects.

How can you include a custom font in your webpage using CSS?

  • Use the font-color property and specify the font's name
  • Use the font-family property and specify the font's name
  • Use the font-size property and specify the font's URL
  • Use the text-transform property and specify the font's path
To include a custom font in your webpage using CSS, you use the font-family property and specify the font's name. You need to first import the font into your CSS file or link to an external font file, and then you can reference it using the font-family property in your CSS rules. This allows you to apply the custom font to specific text elements on your webpage.

Which CSS property is used to set the font family for an element?

  • font-family
  • font-size
  • font-style
  • font-weight
The font-family property in CSS is used to specify the font family for an element. This property allows you to define the typeface or font you want to use for text within that element, which can greatly affect the visual style of your website.

In CSS, when a variable is not set or its value is invalid, it will return the ________ value.

  • Default
  • Initial
  • Null
  • Undefined
In CSS, when a variable is not set or its value is invalid, it will return the default value. This default value varies depending on the property. For example, the default value for the font-size property is often 16 pixels.

Which CSS value for font-weight represents normal text?

  • Default
  • Lighter
  • Normal
  • Regular
In CSS, the font-weight property is used to control the thickness of the text. The value "normal" corresponds to the standard or regular font weight, making it neither bolder nor lighter.