What is the purpose of the CSS line-height property?
- Adjusts the space between characters in a text
- Controls the space between lines of text
- Sets the height of an inline element
- Specifies the height of a line of text
The line-height property in CSS defines the height of a line box, which is the space that a line of text occupies. It can be set using various units such as pixels or percentages and is crucial for controlling the vertical spacing in text.
Which pseudo-class would you use to style an element that is being hovered over by a mouse pointer?
- :active
- :focus
- :hover
- :visited
The :hover pseudo-class is used to select and style an element when it is being hovered over by a mouse pointer. This is commonly used for creating interactive and dynamic user interfaces in web development.
In a project using Tailwind CSS, the team needs to implement custom designs that are not available in the framework. How should they approach this without losing the benefits of Tailwind's utility classes?
- Extend Tailwind's utility classes with custom styles
- Override Tailwind's default styles directly
- Use an external CSS framework for custom designs
- Write entirely new CSS without utilizing Tailwind
Extending Tailwind's utility classes allows the team to leverage the framework's benefits while adding custom styles for unique designs.
CSS variables can be updated in real-time using ________ which makes them powerful for dynamic theming.
- JavaScript
- Media Queries
- CSS Functions
- Hover States
The correct option is JavaScript. JavaScript can be used to dynamically update CSS variables, providing flexibility for real-time theming in web applications.
Responsive typography can be achieved by using viewport units for font sizes, such as ________.
- %
- em
- px
- vh
Using viewport units like vh (viewport height) allows font sizes to be responsive to the height of the viewport.
What is the main benefit of using CSS variables (custom properties) in a stylesheet?
- Better SEO Optimization
- Enhanced Browser Compatibility
- Improved Maintainability
- Increased Page Load Speed
CSS variables, also known as custom properties, offer improved maintainability by allowing the definition of reusable values. This promotes consistency and makes it easier to update styles across the entire website.
A web designer is tasked with creating a website that is accessible to users with various disabilities. What CSS strategy should be employed to ensure that the website is navigable and readable by screen readers?
- Excessive use of images and icons
- Flash animations and multimedia elements
- Inline styling and embedded CSS
- Semantic HTML and ARIA roles
To ensure accessibility for users with disabilities, a web designer should use Semantic HTML and ARIA (Accessible Rich Internet Applications) roles. These help in providing meaningful structure and information to assistive technologies like screen readers. Avoiding excessive use of images, flash, or inline styling is crucial for a better user experience for people with disabilities.
What is the purpose of the CSS property display: flex;?
- Defines a block-level container
- Defines a flexible container
- Defines a positioned container
- Defines an inline container
The 'flex' property is used to create a flexible container that expands or shrinks items to fill the available space.
How does "deferred loading" of CSS affect page load time and user experience?
- Has no impact on page load time
- Improves user experience but has no effect on page load time
- Slows down page load time by delaying CSS loading
- Speeds up page load time by loading CSS asynchronously
Deferred loading speeds up page load time by allowing CSS to load asynchronously, enhancing user experience.
What is the difference between em and rem units in CSS font sizing?
- Relative to the browser's default font-size
- Relative to the font-size of the element itself
- Relative to the font-size of the nearest parent
- Relative to the root element's font-size
In CSS, 'em' and 'rem' units are used for font sizing, but they differ in their reference point. Understanding their differences is crucial for responsive design and consistent typography.