Which CSS property adjusts the space between lines of text?
- line-height
- line-spacing
- text-spacing
- word-spacing
The CSS property that adjusts the space between lines of text is "line-height." It is used to control the vertical space between lines, making text more readable and aesthetically pleasing. A larger value increases the line spacing, while a smaller value decreases it.
You have an element with a complicated graphical background, and you want certain parts of the foreground content to reveal or hide portions of this background. Which CSS technique would be most appropriate to achieve this?
- background-clip: text;
- opacity: 0.5;
- visibility: hidden;
- z-index: -1;
To reveal or hide portions of the background based on the foreground content, you can use background-clip: text;. This property allows the background to show through the text or other foreground elements, creating an interesting visual effect.
In the CSS box model, the ________ area is the space where content, like text or images, is displayed.
- Border
- Content
- Margin
- Padding
In the CSS box model, the "content" area is the space where content, such as text or images, is displayed. This is the innermost part of an element's layout and is surrounded by padding, border, and margin.
You need to style a button differently when it's disabled. Which CSS pseudo-class would be most appropriate to achieve this?
- :disabled
- :hidden
- :inactive
- :unavailable
To style a button differently when it's disabled, you should use the :disabled pseudo-class. This pseudo-class is specifically designed to target elements that are in a disabled state, such as disabled buttons or form fields. It allows you to apply distinct styles to these elements when they are disabled. The other options, :inactive, :unavailable, and :hidden, do not target disabled elements and are not suitable for this purpose.
In a grid layout, how would you make an element occupy the space of two columns starting from the second column?
- grid-column: 1 / span 2;
- grid-column: 2 / -1;
- grid-column: 2 / 4;
- grid-column: span 2;
To make an element occupy the space of two columns starting from the second column, you can use the 'grid-column' property with the 'span' keyword. It specifies the number of columns the grid item should span, and in this case, 'span 2' will make it span two columns, starting from the second column.
You're creating a magazine-style layout with text flowing into multiple columns. As the viewport width increases, you want to add more columns while ensuring that each column does not exceed 250px in width. Which CSS properties would you adjust?
- column-count and column-width.
- max-width and min-width.
- grid-template-columns and grid-template-rows.
- overflow-x and overflow-y.
To achieve this, you should adjust the column-count and column-width CSS properties. column-count controls the number of columns, and column-width ensures that each column does not exceed a specified width (in this case, 250px).
In the BEM methodology, how is a modifier typically represented in a class name?
- Using a double underscore
- Using camelCase
- Using hyphens
- Using underscores
In the BEM (Block Element Modifier) methodology, a modifier is typically represented in a class name using underscores. This helps maintain a clear and consistent naming convention in your CSS classes. For example, if you have a block element called "button," a modifier for its size could be represented as "button__size_large."
What effect does the animation-timing-function value of steps(4, end) have on an animation?
- It creates a bouncing effect during the animation.
- It creates a smooth, continuous animation.
- It divides the animation into 4 equal steps, ending smoothly.
- It makes the animation jump to its final state after 4 steps.
The "steps(4, end)" timing function divides the animation into 4 equal steps, and it ends smoothly. It means that the animation progresses in 4 distinct steps, and at the end of each step, it smoothly transitions to the next one.
You're working on a website where you want a circular profile picture, but the original image is square. How would you achieve this effect using CSS?
- border-radius: 50%;
- clip-path: circle(50%);
- mask-image: url(circle-mask.png);
- transform: rotate(45deg);
To create a circular profile picture from a square image, you can use the border-radius property and set it to 50%. This will round the corners of the square image and make it appear as a circle.
If a custom web font isn't supported or doesn't load, the browser will default to a ________ font.
- cursive
- monospace
- sans-serif
- serif
When a custom web font isn't supported or doesn't load, the browser will default to a "sans-serif" font. This is a fallback font that is widely available on most systems and ensures that text remains readable even when the custom font is unavailable.
To make an animation pause and resume on hover, one could combine the animation-play-state property with the :hover ______.
- animation
- element
- hover
- selector
To make an animation pause and resume on hover, you can combine the animation-play-state property with the :hover pseudo-class on the element you want to affect. By setting animation-play-state: paused; on hover, you can pause the animation, and by setting it to running, you can resume it.
You want to overlay a button on top of an image. The button should be at the bottom right corner of the image. How would you position the button using CSS?
- Position it absolutely and use "bottom: 0; right: 0;"
- Position it absolutely and use "top: 0; left: 0;"
- Position it relatively and use "bottom: 0; right: 0;"
- Position it relatively and use "top: 0; left: 0;"
To overlay a button on the bottom right corner of an image, you should position it absolutely and use "bottom: 0; right: 0;" to place it at the specified location relative to its nearest positioned ancestor or the viewport.