The "line-height" property can be set using units like px, em, and ________.
- %
- mm
- rem
- vh
The "line-height" property in CSS can be set using various units. While "px" and "em" are commonly used, it can also be set using a percentage ("%"). This percentage value is relative to the font size of the element, making it a versatile option for controlling line height.
You are designing a webpage for a vintage-themed site and want to use a cursive style for headings. Which CSS property-value combination will you use?
- font-family: cursive;
- font-style: cursive;
- text-decoration: cursive;
- text-transform: uppercase;
To achieve a cursive style for text in CSS, you should use the font-family property with the value set to 'cursive'. This will apply a cursive font family to the selected text, which is suitable for vintage-themed designs.
The default value of animation-timing-function is ______.
- ease
- infinite
- linear
- none
The default value for animation-timing-function is ease. This timing function provides a smooth and gradual acceleration at the beginning and a deceleration at the end of the animation, creating a more natural and visually appealing effect.
Which pseudo-element allows you to insert content at the end of an element's content?
- ::after
- ::before
- ::first-line
- ::last-child
The ::after pseudo-element allows you to insert content at the end of an element's content. This is often used for adding decorative elements, icons, or additional information after an element's main content. For example, p::after { content: " (End of Paragraph)"; } would insert "(End of Paragraph)" after each
element.
What does the flex-direction property control in a flex container?
- It controls the direction in which flex items are laid out.
- It determines the color of the flex items.
- It sets the border thickness of the flex items.
- It sets the font size of the flex items.
The flex-direction property in a flex container determines the direction in which flex items are laid out. It can be set to control whether the items are arranged in rows or columns, and the direction in which they flow.
You have a grid layout with explicit row and column sizes set. You want the items that don't fit into the explicitly defined rows or columns to automatically be placed into new implicit rows or columns. How would you achieve this behavior?
- Set grid-auto-flow: row dense;.
- Use grid-template-areas.
- Adjust grid-template-columns and grid-template-rows.
- Apply position: absolute; to the items.
To achieve this behavior, you should set grid-auto-flow to row dense. This will ensure that items overflowing the explicitly defined rows or columns are automatically placed into new implicit rows or columns, making the layout dynamic.
When an animation is paused using the animation-play-state property, its current state is determined by the ________ property.
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-timing-function
The "animation-play-state" property in CSS is used to pause or resume an animation. When an animation is paused, its current state is determined by the "animation-fill-mode" property, which specifies whether the animation should retain its starting or ending keyframes when paused.
You have a CSS variable named --gap, and you want to double its value and use it as a margin. How would you achieve this using CSS functions?
- margin: calc(--gap * 2);
- margin: calc(var(--gap) * 2);
- margin: var(--gap * 2);
- margin: var(--gap * 2);
To double the value of a CSS variable named --gap and use it as a margin, you should use the calc() function within the margin property. The correct option is margin: calc(var(--gap) * 2);, which properly references and doubles the variable value.
When an element with position: absolute; is inside a positioned ancestor, to which element will it be positioned relative?
- To the nearest sibling element.
- To the parent element.
- To the top of the document.
- To the viewport.
When an element with 'position: absolute;' is inside a positioned ancestor, it will be positioned relative to its closest positioned ancestor. If there is none, it will be positioned relative to the viewport (the browser window).
You've been asked to ensure that a custom web font falls back to a system font if it doesn't load within 3 seconds. How would you implement this?
- Implement a custom JavaScript script.
- Use the @font-face rule with a timeout attribute.
- Use the font-display property with the value fallback.
- Use the font-stack property.
To ensure that a custom web font falls back to a system font if it doesn't load within a specific time frame, you can use the font-display property with the value fallback. This CSS property controls how font faces are displayed and allows you to specify fallback behavior. When set to fallback, the browser will switch to the system font if the custom font doesn't load within the specified time, which is the desired behavior in this scenario.
What does the currentColor value represent in CSS?
- The color currently being used for link text.
- The color of the element's border.
- The computed color value for text inside an element.
- The current background color of an element.
The currentColor value in CSS represents the computed color value for text inside an element. It allows you to set properties like border or padding to the same color as the text content, ensuring consistent styling.
Which CSS property specifies the duration of an animation?
- animation-duration
- animation-length
- animation-speed
- animation-timing
The correct CSS property that specifies the duration of an animation is animation-duration. It allows you to define how long the animation will take to complete, typically in seconds (s) or milliseconds (ms). This property is crucial for controlling the speed and timing of animations.