CSS Styling and Layout Practice Quiz (23 questions)

Explanation

CSS describes how a document is presented, while HTML supplies its content. Confusing CSS with HTML overlooks the distinction between styling and document content.

Explanation

CSS in a style element is internal CSS, placed in the same document apart from the styled elements. A style attribute instead places inline CSS directly on an element.

Explanation

A class selector begins with a period, so `.myClass` targets elements assigned that class. The hash-prefixed form is an ID selector, not a class selector.

Explanation

The `color` property sets foreground color, including text color. `background-color` changes the background instead, which is the most likely property to confuse with it.

Explanation

`text-align: right` aligns text against the right side of the paragraph’s parent element. It does not position the paragraph relative to the whole page.

Explanation

`font-weight` controls text weight and accepts numeric values from 100 to 900, so 700 is a valid choice. `font-size` controls text size rather than weight.

Explanation

The box model places content inside padding, then the border, with margin outside the border. Padding and margin are easy to confuse, but padding is inside the border rather than outside it.

Explanation

By default, declared width and height set the dimensions of the content area. The padding and border are not included in those dimensions under the default behavior.

Explanation

An inline-block element stays in the inline flow while allowing margin and padding. A plain inline element does not accept margin or padding as described, while a block element takes the available width.

Explanation

`visibility: hidden` hides the element while reserving its space in the layout. `display: none` removes it from document flow, so its space is not preserved.

Explanation

A percentage width is commonly calculated relative to the corresponding dimension of the parent element. A fixed pixel width, unlike a percentage width, is not relative to the parent.

Explanation

For font size, `em` is relative to the parent element's font size; for padding, it is relative to the same element's font size. Treating both values as relative to the parent overlooks this context-dependent distinction.

Explanation

The `position` property determines how an element is positioned in a document. Content sizing and border appearance are controlled by different CSS properties.

Explanation

Static positioning is the default and ignores offsets such as `top`; relative positioning responds to those properties relative to the element's own position. Measuring an offset from the viewport describes fixed positioning, not static positioning.

Explanation

Flexbox is a one-dimensional layout method that arranges items in rows or columns. A two-dimensional grid is a distinct layout approach that organizes items across both rows and columns.

Explanation

Setting the container's `display` property to `flex` establishes the flex model. Properties such as `flex-direction` and `justify-content` control aspects of an already established flex layout.

Explanation

`justify-content` aligns items along the main axis, while `align-items` aligns them along the cross axis. The cross-axis space between and around content is controlled by `align-content`, not by `justify-content`.

Explanation

A media query applies styles based on conditions such as viewport width or orientation, allowing a layout to respond to the viewing context. Keyframes define animation states rather than deciding when responsive styles apply.

Explanation

The `min-width` condition matches widths at or above 600 pixels. An exact-width query matches only a viewport that is precisely 600 pixels wide.

Explanation

A transition specifies how an element changes from one state to another over a period of time. Keyframe percentages define states for an animation, rather than a transition between two states.

Explanation

The `transform` property applies two-dimensional or three-dimensional transformations to an element. The `transition` property controls how changes between states unfold over time.

Explanation

CSS animations use keyframes and animation properties to animate elements through defined states. A transition instead describes how an element changes between two states.

Explanation

A keyframes rule can specify animation states at percentage points such as 0%, 50%, and 100%. Media-query values describe conditions for applying styles, not progress through an animation.