When multiple declarations have equal specificity, the last declaration found in the CSS __________ will apply.
- Embedded Style
- External Style
- Inline Style
- Internal Style
In CSS, the specificity of styles is crucial. When multiple declarations have equal specificity, the last one found in the embedded style (inside the HTML document) will take precedence over others.
To prevent floated elements from affecting the layout of the following elements, the ________ property is often used.
- clear
- display
- float
- position
The clear property is used to control the behavior of an element that follows a floated element. It specifies on which sides of an element floating elements are not allowed to float. This helps prevent layout disturbances caused by floated elements.
In CSS, using perspective in combination with ________ can enhance 3D animations.
- transform-origin
- transform-style
- perspective-origin
- transform-perspective
The correct option is 'transform-perspective'. When working with 3D transformations in CSS, the 'perspective' property defines the depth of the view. Combining it with 'transform-perspective' allows for more control over the 3D space, enhancing the visual impact of 3D animations on elements.
For accessibility, ensuring proper contrast on high-DPI displays involves adjusting the ________ property accordingly.
- color-contrast
- font-weight
- line-height
- text-rendering
The correct option is color-contrast. Adjusting the color contrast is crucial for accessibility on high-DPI displays, ensuring readability and meeting accessibility standards.
What is the primary focus of mobile-first design in web development?
- Creating complex layouts
- Designing specifically for mobile devices first
- Optimizing for search engines
- Responsive design for desktop
Mobile-first design is an approach where the design and development process starts with mobile devices, ensuring a better user experience on smaller screens before scaling up to larger screens.
What is the primary purpose of using custom fonts in web design?
- Enhancing readability and aesthetics
- Enhancing visual appeal
- Ensuring cross-browser compatibility
- Improving website performance
Custom fonts are used in web design primarily to enhance readability and aesthetics. They allow designers to choose unique and distinctive typefaces that align with the overall look and feel of the website, contributing to a more visually appealing design.
To manage large-scale projects, SMACSS divides CSS rules into five categories: Base, Layout, Module, State, and ________.
- Enhancements
- Skin
- Theme
- Utility
Utility: In SMACSS (Scalable and Modular Architecture for CSS), the Utility category is used for low-specificity, high-impact styles that can be applied globally.
For a web application with a sidebar and main content area, how would you use CSS Grid to switch from a horizontal layout on wider screens to a vertical layout on narrower screens?
- Apply grid-auto-flow: column; to the grid container.
- Implement grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); for responsiveness.
- Set grid-template-areas to define the layout for both screen sizes.
- Use media queries to adjust the grid-template-columns property for different screen widths.
To switch from a horizontal to a vertical layout using CSS Grid, use media queries to adjust the grid-template-columns property. Define different column layouts for wider and narrower screens, ensuring a seamless transition between the two layouts.
How do you define a CSS variable within a root element?
- #variable: value;
- $variable: value;
- --variable: value;
- var variable = value;
To define a CSS variable within a root element, you use the syntax --variable: value;. This sets up a custom property that can be later used throughout the stylesheet.
What is the significance of the 'viewport' attribute in an SVG used in a web page?
- Defines the visible area of an SVG image
- Determines the zoom level of the SVG
- Sets the width and height of the SVG element
- Specifies the position of the SVG on the web page
The 'viewport' attribute in an SVG defines the visible area of the image. It is crucial for responsive design, allowing developers to control how the SVG scales and fits within its container on different devices.