CSS (Properties, Functions, Elements, & Tables) 1 — Questions and Answers

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

both div and span (Correct answer)
span
div
box-model

Correct answer: both div and span

The `<div>` element is a generic block-level container, and the `<span>` 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.

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

display (Correct answer)
background-color
border
color

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

Question 3: The spacing between cells in a table is defined as.

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

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

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

table
pre
border-color
border-collapse (Correct answer)

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

Question 5: The _____________ property links an element to a background image.

float
image
background-image (Correct answer)
none of the above

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

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

transparency
transparent
opacity (Correct answer)
all of the above

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

Question 7: Which of the following values for the overflow element is appropriate?

auto
scroll
hidden
all of the above (Correct answer)

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

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

asort
sort
layout
order (Correct answer)

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

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

tab-space
size
tab-size (Correct answer)
all of the above

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

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

z-index (Correct answer)
order
auto
p-index

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

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

flex-wrap
flex
flex-flow (Correct answer)
all of the above

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

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

adjust-content
justify-content (Correct answer)
wrap-content
fix-content

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

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

word-break
line-wrap
break-word
word-wrap (Correct answer)

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

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

cell-caption
table-caption
caption-adjust
caption-side (Correct answer)

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

Question 15: Which of the following options makes up a declaration?

Property (Correct answer)
Selector
Class
Tag

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

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

Align (Correct answer)
Color
Float
Gradients

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

Question 17: 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.

important
inherit (Correct answer)
!important
delay

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

Question 18: 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.

user-agent
author
user (Correct answer)
none of the above

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

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

Selector (Correct answer)
Class
Tag
Declaration

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

Question 20: In CSS, which of the following strings is defined?

double quotes
both single quotes and double quotes (Correct answer)
single quotes
none of the above

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

Question 21: Which of the following are alphanumeric names that relate to a current document counter value?

Counters (Correct answer)
Class
Key
None of the above

Correct answer: Counters

CSS `Counters` are special variables maintained by CSS that can be incremented by CSS rules to track how many times a particular element has appeared. They are typically used with the `counter-reset` and `counter-increment` properties to create custom numbering schemes for lists, sections, or other document elements. The `content` property can then display these counter values.

Question 22: Which of the following is the six-digit hexadecimal color format used by CSS as defined in (X)HTML?

6-Hex Color (Correct answer)
Specification defined named colors
3-Hex Color
System Color Names

Correct answer: 6-Hex Color

The `6-Hex Color` format, like `#RRGGBB`, is a widely used method in CSS and HTML to specify colors. It consists of a hash symbol followed by six hexadecimal digits, where each pair of digits represents the red, green, and blue components of the color, respectively. This format allows for 16 million different colors, offering precise color control.

Question 23: Which of the following is the CSS3 HSL value with a fourth value to determine the color's alpha channel value to define the element's opacity?

HSL Color
HSLa Color (Correct answer)
RGB Color
RGBa Color

Correct answer: HSLa Color

The `HSLa Color` format extends the HSL (Hue, Saturation, Lightness) model by adding an alpha channel value. The 'a' stands for alpha, which determines the opacity of the color. This fourth value ranges from 0.0 (fully transparent) to 1.0 (fully opaque), allowing for semi-transparent colors directly within the color definition.

Question 24: Which of the following is the color format described by the keyword RGB, followed by three numbers ranging from 0 to 255, enclosed in parentheses and separated by commas, with no spaces between them?

HSL Color
RGB Color (Correct answer)
HSLa Color
RGBa Color

Correct answer: RGB Color

The `RGB Color` format defines colors by specifying the intensity of red, green, and blue light. It uses the `rgb()` function, followed by three numbers (0-255) enclosed in parentheses and separated by commas, representing the red, green, and blue components. This additive color model is fundamental for displaying colors on screens.

Question 25: The visibility of an element is determined by which of the following properties?

visibility (Correct answer)
disappear
display
transperancy

Correct answer: visibility

The `visibility` CSS property controls whether an element is visible or hidden. When set to `hidden`, the element is invisible but still occupies its space in the document layout, affecting other elements. This differs from `display: none`, which removes the element entirely from the document flow.

CSS (Properties, Functions, Elements, & Tables) 1

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