Which CSS property controls whether an element is displayed on the page?

display
opacity
position
visibility

The CSS property that controls whether an element is displayed on the page is the display property. It determines the rendering behavior of an element, and it can be set to values like none, block, inline, and more to control how the element is visually presented on the page. For example, setting display: none; will make the element invisible and take up no space on the page.

Discuss it

What is the primary purpose of the letter-spacing property in CSS?

Adjust the space between letters in text
Change the font of text
Change the font size
Change the text color

The primary purpose of the letter-spacing property in CSS is to adjust the space between letters in text. It allows you to increase or decrease the space between characters, making text more tightly packed or more spaced out, which can be useful for achieving specific design or typographic effects.

Discuss it

If you have a CSS rule with !important and another rule with higher specificity targeting the same element, which one will take precedence?

Both rules will be applied
The order in the stylesheet
The rule with !important
The rule with higher specificity

If a CSS rule has the !important declaration, it takes the highest precedence, regardless of the specificity of other rules. The !important rule will override any conflicting rule, even if it has a higher specificity.

Discuss it

In SASS/SCSS, how do you define a mixin?

#mixin myMixin() { }
&mixin myMixin() { }
@mixin myMixin() { }
def mixin myMixin():

In SASS/SCSS, a mixin is defined using the @mixin directive followed by the mixin name and parentheses. The correct syntax is @mixin myMixin() { ... }. Mixins are used to encapsulate reusable sets of styles and can take parameters inside the parentheses if needed.

Discuss it

When using float, what happens to the element's position in the normal document flow?

It becomes a flex item.
It becomes a grid item.
It remains in the normal document flow.
It's removed from the document flow.

When you apply the CSS float property to an element, it is removed from the normal document flow. This means that other elements may flow around it as if it doesn't occupy space.

Discuss it

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.

Discuss it

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."

Discuss it

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).

Discuss it

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.

Discuss it

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.

Discuss it