(Text, Borders, and Images) Flashcards

How many ways to define the border-image-width CSS property?

Answer: 9

The `border-image-width` CSS property can be defined in nine different ways. It accepts up to four values (top, right, bottom, left), and each of these values can be a length, a percentage, or the keyword `auto`. This combination of up to four values, each with three possible types, leads to a total of nine distinct ways to specify the property (1-value, 2-value, 3-value, 4-value syntax, with each value being length, percentage, or auto).

In a single declaration, which of the following CSS properties defines the distinct properties of all four sides of an element's border?

Answer: border-width

The `border-width` property specifically defines the width of an element's four borders. It can accept one to four values to set the width for the top, right, bottom, and left sides respectively. While `border` is a shorthand for all border properties, `border-width` is the precise property for controlling the distinct widths of each side.

Identify the CSS property that defines the border's bottom-left corner shape.

Answer: border-bottom-left-radius

The `border-bottom-left-radius` property is a specific CSS property used to define the curvature of an element's bottom-left corner. While `border-radius` is a shorthand for all four corners, this property allows for individual control over the shape of a single corner. It enables precise styling for creating unique rounded designs.

The border-color property of which of the following CSS properties sets the color of an element's four borders?

Answer: border-color

The `border-color` property is explicitly designed to set the color of an element's borders. It can accept one to four values to define the color for all four sides (top, right, bottom, left) or individual sides. This property directly controls the visual color of the border lines, making it the correct choice for this purpose.

Select a CSS property for collapsing the borders between table cells.

Answer: border-collapse

The `border-collapse` property is a specific CSS property used exclusively for styling tables. It controls whether table cell borders are rendered as separate (default) or collapsed into a single, unified border. This property is essential for achieving a clean and consistent border appearance in HTML tables.

Instead of using the border style, which CSS attribute may be used to make the image the border?

Answer: border-image-source

To use an image as an element's border, the `border-image` shorthand property is commonly used. The specific sub-property responsible for defining the path to the image file is `border-image-source`. This property specifies the URL of the image that will be used to create the border, allowing for custom graphic borders.

Which of the following determines the distance between adjacent cell borders?

Answer: border-spacing

The `border-spacing` property is specifically used in CSS for tables. It determines the distance between the borders of adjacent cells in a table, effectively creating space between them. This property is crucial for controlling the visual separation and layout of cells within a table, distinct from padding or margin.

The look and design of an outline are determined by which of the following properties?

Answer: outline-style

The `outline-style` property is used to define the visual appearance or pattern of an element's outline. It accepts values like `solid`, `dashed`, `dotted`, `groove`, `ridge`, etc., which directly determine the look and design of the outline. This property is fundamental for styling outlines, which are drawn outside the border edge.

A 3D grooved outline is defined by which of the following values?

Answer: groove

The `groove` value for the `outline-style` (or `border-style`) property creates a 3D grooved effect. This style makes the outline appear as if it's carved into the page, giving it a sunken, three-dimensional look. It's one of the predefined styles for outlines and borders, providing a distinct visual texture.

A solid outline is defined by which of the following values?

Answer: solid

The `solid` value for the `outline-style` (or `border-style`) property defines a single, continuous, straight line. This is one of the most common and straightforward styles for outlines and borders, providing a clear and unbroken visual boundary. It's used when a simple, continuous line is desired.

A dashed outline is defined by which of the following values?

Answer: dashed

The `dashed` value for the `outline-style` (or `border-style`) property creates an outline composed of a series of short, evenly spaced lines or dashes. This is a standard and widely recognized style for indicating a dashed border or outline. It provides a distinct visual pattern compared to solid or dotted lines.

Which of the following properties determines the color of an element's background?

Answer: background-color

The `background-color` property is specifically designed to set the solid color of an element's background. It accepts various color values (e.g., hex, RGB, named colors) to fill the content, padding, and border areas of an element. This property directly controls the background's color, making it the correct choice.

The space between cells in a table is defined by which of the following properties?

Answer: border-spacing

The `border-spacing` property is specifically used in CSS for tables. It defines the distance between the borders of adjacent cells in a table, creating visual separation. This property is essential for controlling the layout and appearance of cells within a table, ensuring proper spacing between them.

Which of the following media features best characterizes the amount of entries in the output device's color lookup table?

Answer: color-index

The `color-index` media feature in CSS is used to query the number of entries in the output device's color lookup table. It's relevant for devices with limited color capabilities, allowing styles to be applied based on the available color palette. This feature helps adapt content for specific display characteristics.

A graphic image is assigned to a list item by which of the following properties?

Answer: list-style-image

The `list-style-image` property is specifically used to assign a graphic image as the marker for list items. Instead of default bullets or numbers, this property allows a custom image to be used, enhancing the visual styling of lists. It takes a URL pointing to the image file to replace the standard marker.

The labels for an element's list items are positioned inside or outside the "box" specified by the listed item, according to which of the following properties?

Answer: list-style-position

The `list-style-position` property determines whether the list item marker (bullet or number) is placed inside or outside the content flow of the list item. An `outside` value places the marker to the left of the list item's content box, while `inside` places it within the content flow, affecting text wrapping. This controls the marker's alignment relative to the list item text.

Which of the following properties defines a list's labels?

Answer: list-style-type

The `list-style-type` property defines the appearance of the list item marker (e.g., `disc`, `circle`, `square`, `decimal`, `lower-alpha`, `none`). It directly controls the type of bullet or numbering used for list items, making it fundamental for list styling. This property allows customization of the visual marker.

Which of the following properties defines the width, style, and color of an element's left border in a shorthand form?

Answer: border-style

The `border-left` property is a shorthand CSS property that defines the width, style, and color of an element's left border in a single declaration. It allows for concise styling of a specific side of the border, combining `border-left-width`, `border-left-style`, and `border-left-color` into one property.

To round border corners, which of the following properties is used?

Answer: border-radius

The `border-radius` property is specifically used to round the corners of an element's border. It can accept one to four values to control the curvature of each corner individually or apply a uniform radius to all corners. This property is essential for creating modern, rounded UI elements and softening sharp edges.

The font size of text is set by which of the following properties?

Answer: font-size

The `font-size` property is explicitly used to set the size of the text within an element. It accepts various units (e.g., pixels, ems, percentages) to control the height of the characters. This property is fundamental for controlling the readability and visual hierarchy of text on a webpage.