Which CSS property is important for improving the readability of text for users with visual impairments?
- color: #000;
- font-size: 18px;
- line-height: 1.5;
- text-transform: uppercase;
The line-height property is crucial for improving text readability, especially for users with visual impairments. A suitable value, like 1.5, helps create proper spacing between lines, making it easier for users to follow the text content.
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.
In the context of CSS accessibility, what is the significance of using relative units like 'em' or 'rem' instead of absolute units like 'px'?
- font-size: 1.2em;
- margin: 16px;
- padding: 20px;
- width: 300px;
Relative units, such as 'em' or 'rem', are crucial in CSS accessibility as they scale with the user's preferred font size. This ensures that the layout adapts to the user's settings, providing a more inclusive and user-friendly experience, unlike absolute units that may hinder accessibility.
When specifying the width of an element, using the unit ______ ensures that the sizing is scalable and based on the viewport width.
- vw
- vh
- %
- px
The correct option is 'vw.' The 'vw' unit represents a percentage of the viewport width, allowing responsive design by specifying widths relative to the size of the viewport.
Tailwind CSS is often referred to as a ________ framework due to its approach to CSS classes.
- component
- modular
- semantic
- utility
Tailwind CSS is often described as a utility-first framework because of its approach to CSS classes. It provides a set of low-level utility classes that can be composed to build designs directly in the markup. Understanding the utility-first approach and the use of utility classes is key to effectively using Tailwind CSS and achieving a modular and maintainable codebase.
How do you align the markers (like bullets or numbers) of a list inside or outside the content flow?
- marker-align
- list-style-position
- marker-position
- list-position
The correct option is list-style-position. This property is used to define whether the markers of a list should appear inside or outside the content flow. Understanding and applying this property is important for controlling the layout of lists.
A developer needs to create a user interface element that changes its border color when hovered over, while keeping the same border size and style. What combination of CSS properties should they use?
- border, border-hover, color-hover
- border, hover, color
- border-color, hover-color, border-style
- border-hover-color, border-hover-style, border-hover-width
To achieve the desired effect, the developer should use the border-color property along with the :hover pseudo-class. For example: border-color: initial; border-color: red; This ensures that only the color changes on hover while keeping the other border properties intact.
How does setting align-items: baseline; in a Flexbox container affect its items?
- Aligns items to the baseline of the container
- Aligns items to the center vertically
- Aligns items to the end of the container
- Aligns items to the start of the container
Setting align-items: baseline; aligns the items along their baselines within the flex container. This property is useful for aligning text or inline elements based on their text baseline.