The CSS methodology ________ focuses on the modularity of CSS by breaking down styles into smaller, reusable parts.
- BEM
- ITCSS
- OOCSS
- SMACSS
BEM (Block Element Modifier) is a methodology that focuses on modularity in CSS, breaking down styles into smaller, reusable parts.
How does the proper use of the 'alt' attribute in HTML improve accessibility in web design?
- alt="Description of the image"
- aria-label="Image description"
- data-alt="Image"
- title="Image"
The 'alt' attribute in HTML is vital for accessibility as it provides alternative text for images. Screen readers use this text to describe images to users with visual impairments. Using descriptive and accurate 'alt' text ensures that all users, including those using assistive technologies, can understand the content.
In Flexbox, the flex-________ property allows an item to grow or shrink to fit the space available in the flex container.
- sizing
- growshrink
- flexsize
- basis
The correct option is 4. The flex-basis property in Flexbox allows an item to specify its initial size and can grow or shrink to fit the available space in the flex container.
The ________ value of the CSS display property is used to contain floats within a flex or grid context.
- inline-block
- inline-flex
- block
- inline
The correct option is "block." The block value of the CSS display property establishes a block container, and it's often used to contain floats within a flex or grid context.
The ________ value of the animation-direction property in CSS is used to alternate the animation cycle.
- normal
- reverse
- alternate
- alternate-reverse
The correct option is 'alternate'. When 'animation-direction' is set to 'alternate', the animation plays forward, then backward, creating an alternating cycle. This is useful for creating back-and-forth animations, adding variety to the visual experience.
When trying to create a tooltip widget that appears above an element when hovered, which property and value pair is crucial to ensure that the tooltip does not affect the layout of surrounding elements when it is positioned?
- position: absolute, z-index: 1;
- display: none;
- visibility: hidden;
- opacity: 0;
The crucial property-value pair is position: absolute, z-index: 1;. This positions the tooltip absolutely, and the z-index ensures it appears above other elements. The other options either hide the tooltip completely or affect the layout of surrounding elements.
SVG images can be manipulated using CSS if they are included in the HTML as a/an ________ tag.
The correct answer is
In a Flexbox layout, how can you ensure that some items take up more space than others, depending on the available space?
- Apply flex-basis: 200px; to the items requiring more space.
- Set flex-grow: 2; on the items that should take up more space.
- Use the order property to prioritize the larger items.
- Utilize flex: 2; on the items needing extra space.
To make certain items take up more space in a Flexbox layout, use the flex-grow property. By assigning a higher value to flex-grow, you instruct the container to allocate more space proportionally to items with higher values, based on the available space.
________ is a technique in CSS where multiple images are combined into a single image to reduce the number of server requests.
- CSS Sprites
- Data URI
- Minification
- Shorthand Properties
CSS Sprites is a technique where multiple images are combined into a single image, reducing server requests and improving performance.
A team is developing a web application with a focus on mobile users but wants to ensure a good experience on desktops as well. What strategy should they adopt in their CSS approach?
- Adaptive Web Design
- Desktop-First Design
- Mobile-First Design
- Responsive Web Design
Mobile-First Design is the best strategy, starting with mobile styles and progressively enhancing for larger screens, ensuring a good experience on both mobile and desktop.
In CSS Grid, what is the function of the grid-template-areas property?
- Defines the layout of the grid areas
- Defines the size of the grid rows and columns
- Sets the overall size of the grid container
- Specifies the placement of grid items
The grid-template-areas property in CSS Grid allows you to define named grid areas and specify the placement of grid items within those areas. It's a powerful tool for creating complex grid layouts.