In CSS Flexbox, which property is used on the container to align items horizontally?
- justify-content
- align-items
- flex-align
- flex-container
The correct option is justify-content. This property is used to align items along the main axis (horizontally in a row layout) in a flex container.
When using position: sticky;, which two properties must be set for the sticky behavior to work effectively?
- top
- left
- position
- display
The correct options for the position: sticky; to work effectively are position: sticky; and top. The position property must be set to sticky, and the top property should be defined to specify the position where the element becomes sticky.
When creating a bouncing ball animation in CSS, which properties are crucial to create the vertical movement and squash-and-stretch effect?
- animation, keyframes, translate
- bounce, stretch, vertical-motion
- transform, translateY, scaleY
- transition, scale, rotate
To create a bouncing ball animation with vertical movement and squash-and-stretch effect, the crucial properties are transform, translateY, and scaleY. These properties control the position and appearance of the ball during the animation.
To rotate an element 45 degrees using CSS, the transform: rotate(________); property is used.
- 45deg
- 90deg
- 180deg
- 360deg
The correct syntax for rotating an element 45 degrees in CSS is transform: rotate(45deg);. This CSS property is widely used for transforming elements, providing various transformation options like rotation, scaling, and skewing.
What is the main purpose of using font icons in web development?
- Displaying scalable and resolution-independent icons using icon fonts.
- Enhancing the accessibility of web content for users with disabilities.
- Improving the semantic structure of HTML documents.
- Reducing the reliance on external font resources for text rendering.
Font icons are scalable and resolution-independent, making them a versatile choice for displaying icons on a website. By using icon fonts, developers can easily customize the size, color, and style of icons using CSS, providing a flexible and efficient solution for web development. This approach also reduces the need for multiple image files, contributing to faster page loading times.
The CSS pseudo-class :________ is particularly useful for improving accessibility for users who navigate primarily via keyboard.
- hover
- focus
- active
- target
The correct option is focus. The :focus pseudo-class is used to apply styles when an element is in focus, making it crucial for improving accessibility for keyboard navigation.
To evenly distribute space around flex items, the property justify-content should be set to ________.
- space-evenly
- space-around
- space-between
- center
The correct option is space-around. This value evenly distributes the space around flex items, placing an equal amount of space on each side of each item. space-evenly would also work, but it includes space at the edges, which might not be desired in all cases. space-between would leave no space at the edges. center is not a valid option for justify-content.
Describe how CSS custom properties (CSS Variables) can be used to streamline the management of color schemes in a stylesheet.
- CSS Variables cannot be used for managing color schemes.
- They allow you to define a color only once and reuse it throughout the stylesheet.
- They are limited to specific elements and cannot be reused.
- They are only applicable to text color, not background color.
CSS custom properties enable the definition of variables for colors, making it easy to maintain a consistent color scheme by changing the variable value.
Which CSS position value is NOT relative to the normal document flow?
- absolute
- fixed
- relative
- static
In CSS, the 'static' position value is the default and is not positioned relative to the normal flow.
What is the purpose of the CSS border-style property?
- Controls the spacing between elements
- Defines the style of the border
- Sets the width of the border
- Specifies the color of the border
The border-style property in CSS is used to define the style of the border of an element. It can take values like solid, dotted, dashed, etc., to determine the appearance of the border.