CSS (Text, Borders, and Images) 1 — Questions and Answers

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

9 (Correct answer)
2
5
3

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

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

padding
border
border-width (Correct answer)
border-collapse

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

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

border-bottom-left-radius (Correct answer)
border-left-radius
border-radius
border-corner-radius

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

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

border-background-color
border-color (Correct answer)
border-background
all of the mentioned

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

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

collapse-border
border-cell
border-collapse (Correct answer)
border

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

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

border-image
background-image
border-image-source (Correct answer)
background-image-source

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

Question 7: Which of the following determines the distance between adjacent cell borders?

border-width-spacing
border-spacing-cell
cell-spacing
border-spacing (Correct answer)

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

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

outline-style (Correct answer)
outline-font
none of the mentioned
outline-format

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

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

groove (Correct answer)
initial
groove3d
ridge

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

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

rock
bold
dashed
solid (Correct answer)

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

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

dashed (Correct answer)
double-dash
dash
all of the mentioned

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

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

background-position
background-image
background-color (Correct answer)
background-colors

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

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

border
auto
border-spacing (Correct answer)
spacing

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

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

color-index (Correct answer)
color
color-@media
color-value

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

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

none of the mentioned
list-image-style
list-style-image (Correct answer)
list-image

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

Question 16: 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?

list-position
list-position-style
list-style
list-style-position (Correct answer)

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

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

list-type
list-shape
list-style-type (Correct answer)
list-style

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

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

border-left
border
border-style (Correct answer)
none of the above

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

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

border-radius (Correct answer)
border-corner
border-round
none of the above

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

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

font-size (Correct answer)
font
font-text
none of the above

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

Question 21: A box element's shadow is set by which of the following properties?

box-shadow
shadow
set-shadow (Correct answer)
canvas-shadow

Correct answer: set-shadow

The `box-shadow` property (not `set-shadow`) is the standard CSS property used to apply a shadow effect to a box element. It defines parameters such as the shadow's offset, blur radius, spread radius, and color. Its purpose is to add depth and visual separation to elements on a webpage, creating a floating or embossed effect.

Question 22: Which of the following properties determines the color of a scroll bar's shadow on the right and bottom edges?

scrollbar-darkshadow-color (Correct answer)
scrollbar-darkshadow
scrollbar-shadow-color
none of the above

Correct answer: scrollbar-darkshadow-color

The `scrollbar-darkshadow-color` property is a non-standard, Microsoft-specific CSS extension. It is used to define the color of the shadow on the right and bottom edges of a scrollbar. This property helps to create a 3D effect for scrollbars in older Internet Explorer browsers, though it's not widely supported today.

Question 23: When the content exceeds the width of its enclosing element, which of the following properties governs how it should behave?

overflow-z
overflow-y
overflow-width
overflow-x (Correct answer)

Correct answer: overflow-x

The `overflow-x` property specifically controls how content that overflows the element's box along the horizontal (x-axis) direction should be handled. It determines whether a horizontal scrollbar appears, content is clipped, or is simply visible outside the box. This property is crucial for managing horizontal content overflow and preventing layout issues.

Question 24: The offset between an element's border and outline is defined by which of the following properties?

outline-radius
outline-border
outline-offset (Correct answer)
none of the above

Correct answer: outline-offset

The `outline-offset` property defines the space or offset between an element's outline and its border. A positive value moves the outline further away from the border, while a negative value moves it inwards. This property allows for precise control over the visual separation of the outline from the element's main box, enhancing design flexibility.

Question 25: Which of the following properties controls whether or not the background picture scrolls with the content of its linked item?

background-attach
background-allowance
background-scroll
background-attachment (Correct answer)

Correct answer: background-attachment

The `background-attachment` property determines whether a background image scrolls with the content of its containing element or remains fixed in the viewport. Values like `scroll` (default) or `fixed` control this behavior. This property is essential for creating parallax effects or ensuring a static background that doesn't move with page scrolling.

CSS (Text, Borders, and Images) 1

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