The ________ of a webpage includes the steps the browser must take to convert HTML, CSS, and JavaScript into a rendered page.
- Asynchronous Loading
- Critical Rendering Path (CRP)
- Document Object Model (DOM)
- Server-side Rendering
The Critical Rendering Path (CRP) outlines the steps a browser takes to render a page, involving HTML, CSS, and JavaScript processing.
The CSS property float can be cleared using the value ________.
- both
- clear
- float
- none
The clear property is used to clear the floated elements. When set to both, it clears the element from both sides, ensuring that no floating elements are allowed on either side.
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.
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.
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.
What is the main visual difference between a box shadow applied with an inset keyword and one without it?
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), inset 0 0 10px #888888;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
- box-shadow: 5px 5px 10px #888888;
- box-shadow: inset 5px 5px 10px #888888;
The main visual difference between a box shadow with and without the inset keyword is the direction of the shadow. A regular box shadow appears outside the element, creating a shadow around it, while an inset box shadow appears inside the element, giving it a depressed or embossed look.