What is the role of the animation-iteration-count property in CSS?
- It controls the speed of the animation.
- It defines the number of iterations an animation should have before stopping.
- It sets the delay before starting the animation.
- It specifies the duration of each iteration in milliseconds.
The animation-iteration-count property determines how many times an animation cycle should be played. For instance, animation-iteration-count: 3; means the animation will play three times before stopping.
Which CSS transform property is used to change the size of an element?
- scale()
- resize()
- transform-size
- size()
The correct option is scale(). This property is used to change the size of an element by specifying a scaling factor. For example, transform: scale(2) will make the element twice as large.
Which unit of measurement in CSS is relative to the font-size of the parent element?
- %
- em
- px
- rem
In CSS, the 'em' unit is relative to the font-size of the parent element, providing a scalable and flexible way to define sizes. 'px' is fixed, 'rem' is relative to the root element, and '%' is a percentage of the parent element's font-size.
How can the clear property in CSS be used in relation to floated elements?
- Clear property adjusts the transparency of an element.
- Clear property controls the spacing between lines of text in an element.
- Clear property determines the text color of an element.
- Clear property is used to control the behavior of an element when it wraps around a floated element.
The clear property is used to control the behavior of an element concerning floated elements. It specifies whether an element should be moved below, above, or beside the floated elements.
Can a more specific CSS selector override a rule marked as !important?
- It depends on the order of the rules in the stylesheet.
- No, !important always takes precedence.
- Only if the rule is applied to a child element.
- Yes, always.
No, a more specific selector cannot override a rule marked as !important. The !important declaration gives a rule the highest specificity, making it extremely difficult to override, regardless of the selector's specificity.
To create a gap between grid items in CSS Grid, the grid-________ property is used.
- row-gap
- item-gap
- gap
- column-gap
The correct option is 3. The gap property is used to create a gap between grid items in CSS Grid, and it works for both rows and columns.
The ________ utility in Tailwind CSS is used to apply different styles based on the user's screen size.
- lg: (large)
- md: (medium)
- sm: (small)
- xl: (extra-large)
In Tailwind CSS, the md:, lg:, sm:, and xl: utilities are used to apply styles at different breakpoints, allowing for responsive design based on screen sizes.
The property ________ is used to control the horizontal and vertical alignment of an element's border box within its containing block.
- align-box
- box-align
- align-content
- box-content
The correct option is align-content. This property is used to control how the browser distributes space around and between content items along the main or cross-axis. In the context of borders, it can adjust their alignment within the container.
To increase the specificity of a class selector without adding more elements or IDs, you can __________ the class name in the selector.
- Extend
- Nest
- Override
- Repeat
When you need to increase the specificity of a class selector in CSS without adding more elements or IDs, you can use the :extend() pseudo-class to extend the class name in the selector.
The pseudo-class :______-child can be used to style every element that is the nth-child, regardless of type, of its parent.
- nth
- first
- last
- only
The correct option is 'nth.' The :nth-child pseudo-class allows the selection of elements based on their position within a parent, providing flexibility in styling specific child elements.