Why is it recommended to use external stylesheets instead of inline styles for CSS?
- To improve browser compatibility
- To increase specificity
- To separate content from presentation
- To speed up rendering time
Using external stylesheets helps maintain a clear separation between content and presentation, making the code more modular and easier to manage. It also allows for better caching, leading to faster rendering times.
For high-DPI displays, how would you set a background image in CSS that optimizes for resolution without impacting lower resolution displays?
- background-image: url('[email protected]'), url('image.png');
- background-image: url('image.png') 2x;
- background-image: url('image.png') resolution(2dppx);
- background-image: url('image.png') density(2);
The correct option is background-image: url('image.png') 2x;. This CSS feature uses the 2x suffix to target high-DPI displays without affecting lower resolution displays. It's an effective way to provide optimized images for different screen resolutions, enhancing the user experience on high-DPI screens.
What is the stacking context, and how is it affected by different positioning schemes in CSS?
- context-order
- positioning
- stack-order
- z-index
The stacking context is a concept in CSS that refers to the order in which elements are stacked on top of each other. It is influenced by the z-index property. Different positioning schemes, such as relative, absolute, and fixed, create their own stacking context, affecting how elements are stacked in relation to each other.
In a flex container, setting flex-grow to a value of ________ will ensure the item grows to absorb any extra space.
- 0
- 1
- 2
- 3
Setting flex-grow to a value of 2 in a flex container means that the item will grow twice as much as other items in the container when there is extra space available.
In a flex container, what is the effect of setting the align-items property to baseline?
- Aligns flex items along their baselines within the flex container.
- Aligns flex items to the baseline of the container itself.
- Aligns flex items to the baseline of the first item in the container.
- Aligns flex items to the bottom of the container.
The align-items property in a flex container defines how flex items are aligned along the cross-axis. When set to baseline, items are aligned based on their baselines, creating a uniform baseline for all items.
When creating a gradient, what does the 'angle' parameter in a linear-gradient function define?
- The color stops
- The direction of the gradient
- The gradient size
- The shape of the gradient
The 'angle' parameter in a linear-gradient function defines the direction of the gradient. It specifies the angle at which the colors should blend, creating the gradient effect along that direction.
In a CSS gradient, the ________ keyword can be used to ensure that the colors are distributed evenly across the gradient.
- color-distribution
- evenly
- gradient-distribution
- linear
In a CSS gradient, the "evenly" keyword ensures that colors are distributed uniformly, creating a smooth transition across the gradient. This helps maintain a consistent color distribution in various design scenarios.
For responsive typography, the ______ CSS unit can scale font sizes based on the viewport height.
- vw
- vh
- %
- em
The correct option is b) vh. In CSS, the "vh" unit represents a percentage of the viewport height. This is useful for creating typography that adjusts based on the height of the user's screen.
A developer wants a sidebar to be fixed on the desktop but static on mobile devices. Which CSS properties and values will they need to adjust using media queries?
- position: absolute, right: 0;
- position: fixed, left: 0, top: 0;
- position: static;
- position: sticky, top: 0;
When dealing with a sidebar that needs to be fixed on desktop and static on mobile, the appropriate approach is using position: sticky with a value of top: 0 within a media query. This ensures the sidebar remains fixed on desktop but becomes static on mobile.
What is a significant advantage of using SMACSS in large-scale web applications?
- Code Organization
- Maintainability
- Reusability
- Scalability
SMACSS emphasizes modular code organization, making it easier to scale, maintain, and reuse styles in large web applications.