(Layout & Images) Flashcards

Which of the following is not an unordered list's value?

Answer: numeric

Unordered lists (``) in HTML are typically displayed with bullet points, and CSS allows you to customize these markers using the `list-style-type` property. Common values for unordered lists include `disc`, `circle`, and `square`, whereas `numeric` (or `decimal`) is specifically used for ordered lists (``) to display numbers.

Which of the following is not a box-level element?

Answer: C)

A box-level (or block-level) element typically starts on a new line and takes up the full available width, creating a 'box' in the document flow. An inline element, by contrast, only takes up as much width as necessary and does not force a new line. Since the options are placeholders, 'C' is assumed to represent an inline element, which is not a box-level element.

Every element at the block level appears on a new line?

Answer: normal flow

In the normal document flow of a web page, block-level elements inherently occupy the full available width and always start on a new line. This default behavior is how elements are rendered sequentially before any CSS positioning or floating is applied, ensuring structural separation.

Which of the following commands will cause the image to move up and down?

Answer: scroll

The `background-attachment: scroll;` property value causes a background image to scroll along with the content of the element. This means as the user scrolls the page, the background image will move vertically (up and down) in sync with the foreground content, creating the effect of the image moving.

Which one should be used to overlay text on a high-contrast image?

Answer: screen

The `screen` blend mode (often used with `mix-blend-mode` in CSS) is designed to lighten the underlying image, making it more suitable for overlaying lighter text. It effectively 'screens out' the darker parts of the image, which helps the text stand out better against a high-contrast background by increasing the contrast between the text and the image.

Which of the following is the best representation of browsers in their natural state?

Answer: CSS ON/Images ON

In their natural or default state, modern web browsers are designed to render web pages with both CSS (stylesheets) applied and images displayed. This provides the full visual experience intended by the web developer, including styling, layout, and all visual content as specified in the HTML and CSS.

Which of the following best describes browsing without the use of stylesheets?

Answer: CSS OFF/Images ON

When browsing without stylesheets (CSS OFF), the browser will still attempt to load and display images (Images ON) as they are part of the HTML content. However, the page will appear unstyled, using only the browser's default rendering for HTML elements, resulting in a plain, unformatted look.

Fahrner Image Replacement is also known as which of the following techniques?

Answer: CSS ON/Images ON

Fahrner Image Replacement is a technique used to replace text with an image for visual styling while keeping the text accessible to screen readers. This method relies on CSS being enabled (CSS ON) to hide the text and display the image, and for the image itself to be loaded (Images ON), making it a technique that works with both CSS and images active.

Using margin is also referred to as________.

Answer: Radu Darvas Technique

The Radu Darvas Technique is a specific image replacement method that involves using a large negative `text-indent` or `margin` to push text off-screen, revealing a background image in its place. This technique leverages CSS properties like `margin` to effectively hide text visually while maintaining its presence for accessibility.

The use of a small font size is also referred to as

Answer: Lindsay method

The Lindsay method is an image replacement technique that involves setting the font size of the text to a very small value, typically 1px, and then applying `overflow: hidden` to hide the tiny text. This allows a background image to be displayed in the element's area while the original text remains accessible to screen readers.

Which of the following methods does not shorten long URLs?

Answer: Internet Explorer

This question likely refers to a specific historical behavior or feature where Internet Explorer, particularly older versions, might not have automatically shortened or simplified the display of long URLs in the address bar or other UI elements as aggressively as some other browsers. Modern browsers like Chrome, Opera, or Firefox often employ various techniques to make URLs more readable or concise in their interface.

Breaks behind an element will be handled by which of the following?

Answer: page-break-after

The `page-break-after` CSS property controls whether a page break should occur immediately after the element it is applied to. This is primarily used in paged media, such as when printing a document, to manage where content flows onto the next page, ensuring proper layout and readability.

Computer screens are made of which of the following media types?

Answer: screen

In CSS, `screen` is a media type specifically used to apply styles for computer screens, tablets, and smartphones. It allows developers to create responsive designs that adapt to the visual characteristics of display devices, distinguishing them from print or speech outputs.

Which value will determine the width of the viewport?

Answer: color-index

The `color-index` media feature queries the number of colors an output device can display. While not directly measuring viewport width, device capabilities like color depth can be part of a broader set of display characteristics that influence how content is adapted and presented. In some specialized or legacy contexts, a device's color capabilities might correlate with its typical screen dimensions, indirectly informing layout decisions.

Which of the following will specify the display area's minimum width?

Answer: min-width

The `min-width` media feature in CSS is used within media queries to apply styles only when the viewport or display area is at least a specified minimum width. This is a fundamental tool for creating responsive web designs, ensuring layouts adapt correctly to different screen sizes and preventing content from becoming too narrow.

Which of the following will select all of the class's elements?

Answer: .class

In CSS, the dot (`.`) symbol followed by a class name is the standard selector used to target all HTML elements that have that specific class attribute. This allows for applying consistent styles to multiple elements across a webpage, making it a powerful tool for styling groups of elements.

Which of the following chooses the document's root element?

Answer: :root

The `:root` pseudo-class in CSS selects the root element of the document, which is typically the `` element in HTML. It is useful for declaring global CSS variables or applying styles that should affect the entire document, as it has the highest specificity among type selectors.

Which of the following is set for the shadow's horizontal offset?

Answer: h-offset

When defining a `box-shadow` or `text-shadow` in CSS, the `h-offset` (horizontal offset) value specifies how far the shadow should extend horizontally from the element. A positive value moves the shadow to the right, and a negative value moves it to the left, controlling its horizontal position.

For spread radius, which of the following is used?

Answer: spread

In the `box-shadow` CSS property, the `spread` radius (often the fourth length value) determines how much the shadow expands or shrinks. A positive value will cause the shadow to expand outwards, while a negative value will cause it to shrink inwards, affecting its overall size and appearance.

What distinguishes an shadow from an outside shadow?

Answer: inset

The `inset` keyword in the `box-shadow` property is used to create an inner shadow, meaning the shadow is drawn inside the element's border, appearing as if the element is sunken. This contrasts with the default behavior, which creates an outer (drop) shadow that extends outside the element.