The CSS property ________ can be used to control the amount of space after each paragraph.
- line-height
- margin-bottom
- padding-bottom
- text-indent
The CSS property margin-bottom is used to control the amount of space after each paragraph. It determines the space between the bottom of the paragraph and the next element on the page.
While building a flip card animation, you notice the back of the card is visible during the rotation. Which CSS property can help hide the back of the card until it's facing the viewer?
- backface-visibility: hidden;
- display: none;
- opacity: 0;
- visibility: hidden;
To hide the back of a card during a flip card animation, you can use the backface-visibility property with the value hidden. This property ensures that the back face of the card is not visible until it's facing the viewer, which is essential for creating realistic flip animations. Options like visibility: hidden;, display: none;, or opacity: 0; would make the entire element disappear, which is not the desired effect for a flip card animation.
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.
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 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'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.
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.
When using a mixin, you apply it to your styles with the ________ directive.
- @apply
- @extend
- @mixin
- @use
Mixins in SCSS are applied to your styles using the @include directive. This allows you to include the styles defined in the mixin within your CSS rules.
Which of the following properties, when animated, would cause a "repaint" but not "reflow" in most browsers?
- color
- margin
- position
- width
When animated, changing the color property of an element typically causes a "repaint" (updating the pixels on the screen) but not a "reflow" (changing the layout of elements on the page). This is because changing the color doesn't affect the size or position of the element, but it does require repainting.
When an element's property is set to initial, it will use the ________.
- Current value
- Default value
- Inherited value
- Parent element's value
Setting an element's property to 'initial' means it will use the default value for that property as defined by the CSS specification. This effectively resets the property to its default state.
Which property in CSS determines the space outside an element?
- Border
- Content
- Margin
- Padding
In CSS, the 'margin' property is used to determine the space outside an element. It creates spacing around the element, separating it from other elements in the layout.
How does the SMACSS methodology recommend handling states, like "is-active" or "is-hidden"?
- Apply these states as classes in the HTML
- Avoid handling states in SMACSS
- Use JavaScript to toggle these states
- Utilize pseudo-elements like :active or :hidden
In the SMACSS (Scalable and Modular Architecture for CSS) methodology, states like "is-active" or "is-hidden" are typically handled by applying them as classes directly in the HTML markup. This allows for clear separation of styling and behavior, making the code more maintainable and modular.