How do vendor prefixes affect the CSS properties in browsers that do not support them?
- They are applied as-is
- They are applied with a warning
- They are ignored
- They cause errors
Vendor prefixes are ignored by browsers that do not support them. The properties are treated as if they don't exist, which may lead to inconsistent rendering.
How does the position: absolute; property in CSS position an element in relation to its closest positioned ancestor?
- Positioned relative to its parent element.
- Positioned relative to the document flow.
- Positioned relative to the nearest positioned ancestor, if any.
- Positioned relative to the viewport.
The position: absolute; property positions an element based on its closest positioned ancestor. If none exists, it uses the document flow.
A list item's marker can be positioned outside the list item content if the list-style-position property is set to ________.
- adjacent
- exterior
- inside
- outside
Setting the list-style-position property to outside positions the list item marker outside the list item content.
To create a border that has rounded corners, you would use the border-radius: ________; property.
- border-curve
- border-round
- curve
- round
The correct answer is round. The border-radius property in CSS is used to create rounded corners for an element's border. Setting it to round will ensure that the corners are rounded, providing a softer and more aesthetically pleasing look.
A CSS variable declared inside an element is only accessible within the ________ of that element.
- block
- container
- element
- scope
CSS variables have scope, and when declared inside an element, they are only accessible within the scope or block of that element.
How does the overflow property affect an element containing floated children?
- It causes the containing element to expand its height to fit the floated children.
- It has no effect on floated children.
- It hides the floated children if they extend beyond the boundaries of the containing element.
- It pushes the floated children to the right, creating space for them within the containing element.
The overflow property determines how the content that overflows the box is handled. If set to auto or hidden, the containing element will expand its height to enclose the floated children.
How does the use of CSS variables (custom properties) impact the maintainability and performance of a website?
- Accelerating server response time
- Enhancing browser compatibility
- Optimizing database queries
- Reducing code redundancy
CSS variables improve maintainability by reducing code redundancy. They allow you to define values once and reuse them throughout the stylesheet, making updates easier and less error-prone.
The CSS property ________ can be used to control the scaling of an SVG not to exceed its container.
- fit
- resize
- max-scale
- contain
The correct option is contain. This property ensures that the SVG scales down proportionally to fit within its container without exceeding it. It's particularly useful when dealing with responsive design and maintaining the aspect ratio of the SVG.
The CSS property text-transform can be used to change the text to ________.
- capitalize
- lowercase
- normal
- uppercase
The text-transform property in CSS is used to control the capitalization of text. Setting it to 'capitalize' will capitalize the first character of each word in the text.
In designing a responsive web page, how can a designer ensure that the background image scales appropriately on different screen sizes while maintaining its aspect ratio?
- background-resize: cover;
- background-scale: auto;
- background-size: contain;
- background-size: cover;
To ensure the background image scales appropriately on different screen sizes while maintaining its aspect ratio, the designer should use the background-size: cover; property. This property scales the background image to cover the entire container while preserving its aspect ratio.
What CSS property is used to change the style of bullet points in an unordered list?
- list-type
- list-style-type
- bullet-style
- marker-style
The correct option is list-style-type. This property is used to define the type of marker, or style of the list item in an unordered list. Common values include disc, circle, and square. Understanding this is crucial for customizing the appearance of lists.
In CSS methodology, what does BEM stand for?
- Basic Element Method
- Best Element Model
- Block Element Modifier
- Browser Extension Module
BEM stands for Block Element Modifier. It is a methodology for naming CSS classes in a way that makes it clear which component a class belongs to and how it can be used within that component. This helps in creating modular and maintainable code.