Which CSS property is used to control the time between the end of one animation iteration and the start of the next?
- animation-delay
- animation-duration
- animation-play-state
- animation-timing-function
The animation-delay property is used to control the time between the end of one animation iteration and the start of the next. It specifies a delay before the animation begins and can be helpful for creating timed animations and controlling their sequence.
In Flexbox, how would you align all items to the center of the container both vertically and horizontally?
- Apply justify-content: center and align-items: center.
- Apply margin: auto to all flex items.
- Set display: flex; and align-content: center.
- Use text-align: center on the container element.
To align all items both vertically and horizontally in a Flexbox container, you can use justify-content: center to center items horizontally and align-items: center to center them vertically. This combination ensures that items are centered in the container along both axes.
The text-indent property in CSS is used to adjust ________.
- letter spacing
- line height
- text alignment
- the first line of a block of text
The "text-indent" property in CSS is used to adjust the indentation of the first line of a block of text. It specifies the amount by which the first line of a block-level element should be indented from the left margin.
What is the primary purpose of the float property in CSS?
- To apply text styles such as font size and color.
- To create flexible grid layouts.
- To make text italic.
- To position an element to the left or right, allowing content to flow around it.
The primary purpose of the float property in CSS is to position an element to the left or right within its containing element. This allows other content to flow around it, which is commonly used for creating multi-column layouts or wrapping text around images.
What is the role of the src attribute inside the @font-face rule?
- Defines the font color
- Sets the font style
- Specifies the font size
- Specifies the font's source file location
Inside the @font-face rule, the "src" attribute is used to specify the font file's source location. This attribute tells the browser where to find and load the font file, allowing you to use custom fonts in your web design. It typically points to the location of a font file using a URL or local file path.
How do you specify the duration of a transition effect in CSS?
- duration
- time-duration
- transition-duration
- transition-time
To specify the duration of a transition effect in CSS, you use the transition-duration property. This property defines the amount of time it takes for the transition to complete. You can specify the duration using units like seconds (s) or milliseconds (ms). For example, transition-duration: 0.5s; sets the transition duration to half a second.
What's the primary difference between the clip-path and mask properties in CSS?
- Clip-path works on images, while the mask property only works on text elements.
- The clip-path property can be animated, while the mask property cannot.
- The clip-path property clips an element to a specified shape, while the mask property applies an image as a mask to an element.
- The clip-path property is used for simple shapes, while the mask property is used for complex shapes.
The primary difference between clip-path and mask in CSS is that clip-path clips an element to a specified shape, whereas the mask property applies an image as a mask to an element. This fundamental distinction affects how elements are visually modified and displayed.
You need to create a layout where a sidebar stays to the left and the main content takes up the remaining width. Which combination of float and width properties would achieve this?
- Don't use float, set the main content's width to 100%.
- Don't use float, set the main content's width to a fixed value.
- Float the sidebar left and set the main content's width to 100%.
- Float the sidebar left and set the main content's width to a fixed value.
To create a layout where a sidebar stays to the left and the main content takes up the remaining width, you would float the sidebar to the left and set the main content's width to 100%. This ensures that the sidebar stays to the left while the main content occupies the remaining available space.
What would you use in SASS/SCSS to conditionally apply styles?
- for loops
- if/else statements
- switch statements
- while loops
In SASS/SCSS, you can conditionally apply styles using if/else statements. These statements allow you to set specific styles based on certain conditions, making your stylesheets more dynamic and responsive to different scenarios.
You're trying to style the first line of a paragraph to be bold. Which CSS pseudo-element will achieve this?
- ::before
- ::first-child
- ::first-letter
- ::first-line
To style the first line of a paragraph to be bold, you should use the ::first-line pseudo-element. This allows you to target and style the first line of text within an element. ::before and ::first-letter are used for different purposes, and ::first-child targets the first child element, not the first line of text.