The CSS property ________ can be used to create custom text outlines that enhance readability for users with low vision.
- font-outline:
- text-outline:
- text-shadow:
- text-stroke:
The correct CSS property for creating custom text outlines is text-outline. It is particularly useful for improving readability for users with low vision by adding a visible border around the text. The text-stroke property is not valid in CSS, and text-shadow is used for adding shadows, not outlines. font-outline is also not a valid CSS property.
To select an input element of type text that is currently in focus, you would use the :______ pseudo-class.
- focus
- active
- target
- input
The correct option is a) focus. The :focus pseudo-class in CSS is used to select an element that is currently in focus, such as an input field that the user is interacting with.
Which CSS unit is fixed and is not affected by the current font size of the document?
- cm
- in
- mm
- pt
The 'pt' unit in CSS is fixed and is not influenced by the current font size of the document. Other units like 'mm,' 'cm,' and 'in' are physical units and can be affected by the font size, making 'pt' suitable for fixed-size elements in print styles or other specific cases.
For a multi-layer background, the background-________ property can be used to control the positioning of each background layer.
- background-repeat
- background-position
- background-attachment
- background-layer
The correct option is background-position. This property allows you to control the positioning of each background layer individually, enabling you to create multi-layered backgrounds with precise placement.
When auditing a website for performance, a developer finds that the largest Contentful Paint (LCP) is delayed due to large CSS files. What steps can be taken to improve LCP related to CSS?
- Defer the loading of non-essential CSS
- Optimize and reduce the size of CSS files
- Split the CSS files into smaller, more focused files
- Use lazy loading for CSS files
Optimizing and reducing the size of CSS files can significantly improve the largest Contentful Paint (LCP) by ensuring faster loading times for critical styles, enhancing the overall user experience.
If a developer is troubleshooting an issue where a CSS rule is not being applied, and they notice that the rule is being overridden by another rule, what should they first check regarding the non-applied rule?
- Order of appearance in the stylesheet
- Presence of !important in the rule
- Selector type of the rule
- Specificity of the non-applied rule
When troubleshooting a non-applied CSS rule, checking the specificity is crucial. Specificity determines the weight of a selector, and a rule with higher specificity will override a rule with lower specificity. Understanding the specificity helps in resolving conflicts and ensuring the correct rule is applied.
What is the main difference between position: fixed; and position: sticky; in CSS?
- position: fixed; is affected by scrolling and becomes sticky.
- position: fixed; positions an element relative to the viewport, even during scrolling.
- position: sticky; becomes fixed after a certain scroll point.
- position: sticky; is not affected by scrolling and remains fixed.
position: fixed; keeps an element fixed relative to the viewport, while position: sticky; becomes fixed based on scroll position.
How would you apply a border only to the top side of an element?
- border-top:
- border: top
- border: top-side
- top-border:
To apply a border only to the top side of an element in CSS, use the border-top property followed by the desired border style, width, and color.
When using SVGs in CSS, how can you change the color of the SVG on hover?
- Background color
- Fill color
- Outline color
- Stroke color
In CSS, when working with SVGs, the :hover pseudo-class can be used to change the fill color of the SVG on hover. This is achieved by targeting the fill property and specifying the desired color. It's a common technique for enhancing user interactivity with SVG elements.
The ________ CSS property is essential for defining the external source of a custom font.
- font-family
- font-source
- font-url
- font-import
The correct option is 'c) font-url'. This property is used to specify the external source of a custom font by providing the URL of the font file. It is commonly used in the @font-face rule.