(Properties, Functions, Elements, & Tables) Flashcards

Which of the following items is a block and which is an inline element that has no particular rendering?

Answer: both div and span

The `` element is a generic block-level container, and the `` element is a generic inline container. Both are used to group content and apply styles without conveying any specific semantic meaning or having inherent visual rendering beyond their default block or inline display type, making them highly versatile for structuring and styling.

The property determines whether or not an element will be displayed.

Answer: display

The `display` CSS property is fundamental for controlling the layout and visibility of an element. By setting values like `none`, `block`, `inline`, `flex`, or `grid`, it dictates how an element is rendered in the document flow and whether it is visible at all, making it crucial for layout control.

The spacing between cells in a table is defined as.

Answer: border-spacing

The `border-spacing` CSS property is used specifically for tables to control the distance between the borders of adjacent cells. This property only applies when the `border-collapse` property is set to `separate`, allowing for customizable gaps between table cells.

The ______________ property determines whether or not table cell borders are connected.

Answer: border-collapse

The `border-collapse` CSS property for tables determines if cell borders are rendered as separate (default behavior, with `border-spacing`) or if adjacent cell borders are collapsed into a single border. Setting it to `collapse` makes the borders merge, creating a cleaner, single-line appearance for table grids.

The _____________ property links an element to a background image.

Answer: background-image

The `background-image` CSS property is specifically designed to set one or more background images for an element. It allows developers to specify the URL of an image file, which will then be displayed behind the content of the element. This property is part of the broader `background` shorthand property, but `background-image` targets only the image aspect.

Which of the following CSS properties determines an element's opacity level?

Answer: opacity

The `opacity` CSS property is used to control the transparency level of an element. It accepts a value between 0.0 (completely transparent) and 1.0 (completely opaque). Setting `opacity` to a value less than 1 makes the element partially see-through, allowing content behind it to be visible.

Which of the following values for the overflow element is appropriate?

Answer: all of the above

The `overflow` CSS property determines how an element's content is handled when it overflows the element's box. Valid values include `auto`, which adds scrollbars only when necessary; `scroll`, which always adds scrollbars; and `hidden`, which clips the overflowing content without providing scrollbars. Therefore, all listed options are appropriate values for the `overflow` property.

Which of the following properties indicates a flexible item's position in relation to the other flexible items in the same container?

Answer: order

In CSS Flexbox, the `order` property is used to control the visual order of flexible items within a flex container, regardless of their order in the source HTML. It accepts an integer value, and items are laid out in ascending order of their `order` value. This allows for reordering elements without altering the document's semantic structure.

Determine the CSS property that controls the length of the tab character's spacing.

Answer: tab-size

The `tab-size` CSS property specifies the width of the tab character (U+0009) when it is rendered. It allows developers to control how many space characters a tab character represents. This property is particularly useful for displaying preformatted text or code snippets consistently across different browsers and environments.

Which of the following properties indicates an element's stack order?

Answer: z-index

The `z-index` CSS property determines the stack order of a positioned element and its descendants. An element with a higher `z-index` value will be displayed in front of elements with lower `z-index` values. This property is crucial for managing overlapping elements in a web layout, especially with elements using `position: absolute`, `relative`, `fixed`, or `sticky`.

The flex-direction and flex-wrap features can be provided by which of the following CSS properties?

Answer: flex-flow

The `flex-flow` CSS shorthand property is used to set both the `flex-direction` and `flex-wrap` properties simultaneously for a flex container. `flex-direction` defines the main axis, while `flex-wrap` controls whether flex items are forced onto a single line or can wrap onto multiple lines. Using `flex-flow` provides a concise way to configure these fundamental flexbox behaviors.

When the items in the flexible container don't occupy all of the available space on the main axis, which of the following properties align with them?

Answer: justify-content

The `justify-content` CSS property aligns flex items along the main axis of the flex container when there is extra space. It distributes the space between or around the items, controlling their positioning within the container. Common values include `flex-start`, `flex-end`, `center`, `space-between`, and `space-around`, allowing for various alignment strategies.

Long words can be broken and wrapped onto the next line because of which of the following properties?

Answer: word-wrap

The `word-wrap` CSS property (now aliased as `overflow-wrap`) specifies whether the browser should break words to prevent overflow when a word is too long to fit on a single line. It allows long words to be wrapped onto the next line, ensuring that content remains within its container. This prevents horizontal scrolling issues caused by unbroken long strings of text.

Select the CSS property that determines where a table caption displays.

Answer: caption-side

The `caption-side` CSS property determines the placement of a table caption relative to the table itself. It can be set to `top` or `bottom`, positioning the caption above or below the table, respectively. This property provides control over the visual presentation of table captions, enhancing readability and layout.

Which of the following options makes up a declaration?

Answer: Property

A CSS declaration is a statement that applies a style to an element, consisting of a property and a value. For example, in `color: blue;`, `color` is the property. While a complete declaration includes both a property and its value, the property itself is the key identifier for the style being applied.

CSS3 ___________ let you to create seamless transitions between two or more colors.

Answer: Align

CSS3 `Gradients` allow developers to create smooth transitions between two or more specified colors. These can be linear (e.g., `linear-gradient()`) or radial (e.g., `radial-gradient()`), enabling complex and visually appealing background effects without needing image files. They are fundamental for modern web design to add depth and visual interest.

Each property can additionally have a cascaded value of ___________ which indicates that the property for a given element takes the same defined value as the property for the element's parent.

Answer: inherit

The `inherit` CSS keyword allows a property for a given element to take the computed value of that property from its parent element. This is a powerful mechanism for cascading styles, ensuring consistency across nested elements unless explicitly overridden. It's particularly useful for properties like `font-size` or `color` that often need to propagate down the DOM tree.

For a specific document, the ___________ may be able to specify style information. For example, the user agent may provide an interface that generates a user style sheet or the user may specify a file that contains a style sheet.

Answer: user

In the CSS cascade, the `user` refers to the end-user of the web browser. Users can specify their own style sheets, often called 'user style sheets,' to override author styles and customize how web pages are displayed. This is an accessibility feature, allowing users to adjust fonts, colors, or layouts to suit their personal preferences or needs.

The style and the HTML document are linked via the ___________________. It defines which items are influenced by the declaration.

Answer: Selector

A CSS `selector` is a pattern used to select the HTML elements that you want to style. It acts as the link between the style rules and the specific elements in the document that will be affected by those rules. Selectors can target elements by tag name, class, ID, attributes, or their relationship to other elements.

In CSS, which of the following strings is defined?

Answer: both single quotes and double quotes

In CSS, string values (such as URLs, content for `::before`/`::after`, or font family names with spaces) can be defined using either single quotes (`'`) or double quotes (`"`). Both are valid and interchangeable for enclosing string literals. This flexibility allows developers to choose the quoting style that best suits their coding preferences or avoids conflicts with embedded quotes.