CSS (Layout & Images) 1 — Questions and Answers

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

square
numeric (Correct answer)
disc
circle

Correct answer: numeric

Unordered lists (`<ul>`) 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 (`<ol>`) to display numbers.

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

A)
B)
C) (Correct answer)
D)

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

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

relative positioning
normal flow (Correct answer)
floating positioning
absolute positioning

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

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

repeat-y
scroll (Correct answer)
fixed
repeat-x

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

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

opaque
screen (Correct answer)
high contrast
low contrast

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

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

CSS ON/Images OFF
CSS OFF/Images OFF
CSS ON/Images ON (Correct answer)
CSS OFF/Images ON

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

Question 7: Which of the following best describes browsing without the use of stylesheets?

CSS ON/Images OFF
CSS ON/Images ON
CSS OFF/Images ON (Correct answer)
CSS OFF/Images OFF

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

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

CSS OFF/Images ON
CSS OFF/Images OFF
CSS ON/Images OFF
CSS ON/Images ON (Correct answer)

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

Question 9: Using margin is also referred to as________.

The Lindsay method
Fahrner image replacement
The Langridge method
Radu Darvas Technique (Correct answer)

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

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

Leon Dwyer method
Lindsay method (Correct answer)
Radu Darvas Shim
Levin technique

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

Question 11: Which of the following methods does not shorten long URLs?

Chrome
Internet Explorer (Correct answer)
Opera
Firefox

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

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

page-break-into
page-break-before
page-break-inside
page-break-after (Correct answer)

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

Question 13: Computer screens are made of which of the following media types?

print
speech
screen (Correct answer)
all

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

Question 14: Which value will determine the width of the viewport?

max-color
color-index (Correct answer)
color-gamut
color

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

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

min-width (Correct answer)
overflow-block
min-resolution
monochrome

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

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

#id
element
element>element
.class (Correct answer)

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

Question 17: Which of the following chooses the document's root element?

::selection
:out-of-range
:required
:root (Correct answer)

Correct answer: :root

The `:root` pseudo-class in CSS selects the root element of the document, which is typically the `<html>` 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.

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

blur
h-offset (Correct answer)
v-offset
none

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

Question 19: For spread radius, which of the following is used?

color
v-offset
spread (Correct answer)
blur

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

Question 20: What distinguishes an shadow from an outside shadow?

inherit
inset (Correct answer)
spread
initial

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

Question 21: Which property specifies the background painting area?

background-image
background-origin
background-clip (Correct answer)
background-size

Correct answer: background-clip

The `background-clip` CSS property determines the painting area of the background, specifying whether it extends to the border box, padding box, or content box. This allows precise control over where the background image or color is visible relative to the element's box model, enabling various visual effects.

Question 22: On hover, which of the following will provide a minimalist entrance effect?

linear pop-up (Correct answer)
“flappy” buttons
SVG & jQuery pop-up animation
material design

Correct answer: linear pop-up

A 'linear pop-up' effect on hover typically refers to a simple, subtle animation where an element smoothly expands or translates slightly, often along a single axis. This provides a minimalist entrance effect, drawing attention without being overly dramatic, and is commonly achieved using CSS transitions or transforms for a smooth visual change.

CSS (Layout & Images) 1

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