CIS 230 Tutorial 3

The item marked _____ in Figure 3.1 represents the visible value of the overflow property.

1

All block elements, like the body element, have a default width of _____.

100%

_____ places an element at specific coordinates within a container element.

Absolute positioning

_____, a principle of design, involves the distribution of elements.

Balance

_____, a principle of design, involves working with the focal point of a design.

Emphasis

A fixed layout sets the width of the page elements as a percent of the available screen width.

False

A fluid layout is one in which the size of a web page and the size of the elements within it are set regardless of the screen resolution.

False

A popular design element is the inline-block, which consists of an enlarged initial letter in a body of text that drops down into the text body.

False

A value of auto for the overflow property instructs browsers to increase the height of an element to fit the overflow content.

False

An implicit grid completely defines the number and size of the grid rows and columns, whereas an explicit grid contains rows and/or columns that are generated by the browser as it populates the grid with items from the grid container.

False

Centering an element vertically within its parent element is easily accomplished as the height of the parent element is defined by a value.

False

In a fixed grid, the column widths are expressed in percentages rather than pixels.

False

In a fluid grid, the widths of the columns and margins are specified in pixels.

False

In fluid layouts, all measurements are expressed in em units and based on the default font size used in the page.

False

One challenge of layout is that the document will be viewed on many different devices with the same screen resolution.

False

Relative positioning places an element at specific coordinates either in the page or within a container element.

False

Rhythm is the ability to combine different design elements into a cohesive whole.

False

Setting the display property to inherit inherits the display property of a child element.

False

Setting the display style to "none" hides an element but does not remove it from the page flow; that is, it still occupies the same space in the page.

False

Stacking an element takes that element out of the normal flow of the document and positions it along the left or right edge of its containing element.

False

The position property can be set to depend so that an element inherits the position value of its parent element.

False

The property grid-column: 4/span3; paces an element that spans 4 columns in the third column of its CSS grid.

False

The width of the line used in an outline is defined by the outline-style property.

False

The z-index property works only for elements that are placed with relative positioning.

False

To specify a different stacking order for elements, the clip property can be used.

False

_____ is used to nudge an element out of its normal position in a document flow.

Relative positioning

_____, a principle of design, is the repetition or alternation of a design element in order to provide a sense of movement, flow, and progress.

Rhythm

_____ positioning is essentially the same as not using any Cascading Styles (CSS) positioning at all.

Static

A framework is a software package that provides a library of tools to design a website, including style sheets for grid layouts and built-in scripts to provide support for a variety of browsers and devices.

True

By default, grid items are laid out in document order going from left to right and up to down, with each item placed within a single cell.

True

Fixed layouts should only be used when one has significant control over the devices that will display the page.

True

Fractional units are often combined with absolute units to create grid layouts that are both fixed and flexible.

True

If a container has been placed with absolute or relative positioning, then any object nested within it can be placed with absolute positioning.

True

If an object within a browser window has to be fixed so that it doesn't scroll, the web designer can set its position property to fixed.

True

Many designers prefer to work with a "clean slate" and not have any browser style rules creep into the final design of their website.

True

New content can be easily placed within a grid in a way that is consistent with previously entered information.

True

One can prevent browsers from displaying an element by setting its display property to inline.

True

The item marked 2 in Figure 3.1 represents the hidden value of the overflow property.

True

To place an object with absolute positioning, use either the top/left coordinates or the bottom/right coordinates but not all four coordinates at the same time.

True

Users find it easier to scan content when page elements are aligned vertically and horizontally.

True

Web page layouts fall into three general categories: fixed, fluid, and elastic.

True

Whether an element is displayed as a block or as inline depends on the style sheet.

True

In the CSS property grid-template-areas: "row1", what does row1 represent?

a text string containing the names of the areas for row 1

When the footer is the last element in a page body, the _____ pseudo-element is used to add a placeholder element after the footer.

after

Which of the following properties are useful when a web designer wants to use CSS to center an entire layout within the web page in both the horizontal and vertical directions?

align-content: center; justify-content: center;

Which of the following properties centers the content of a CSS grid cell horizontally and positions it with the bottom edge of the cell?

align-items: bottom; justify-items: center;

The _____ value of the overflow style keeps an element at a specified size, adding scroll bars only as they are needed.

auto

When a rectangular region is defined using an appropriate style, which value matches the specified edge of the clipping region to the edge of the parent element?

auto

When defining the number and size of grid columns, you can use the keyword _____ to allow the column width to be automatically set by the browser.

auto

When a CSS element is displayed as a grid, the direct child elements nested within it _____.

become grid items

The width property of the _____ model is based on the sum of the content, padding, and border spaces and any space taken up by the padding and border is subtracted from space given to the content.

border box

Identify the property that is used to choose the layout model.

box-sizing

Identify the default type for the box-sizing property.

content-box

Which of the following CSS properties identifies a page element as the container for a CSS grid?

display: grid;

To make the web page display the yacht club rules in a bulleted list, Sue should use _____.

display: list-item

A _____ is a popular design element that consists of an enlarged initial letter in a body of text that drops down into the text body.

drop cap

Some designers propose the use of _____ in which all measurements are expressed relative to the default font size using the em unit.

elastic layouts

To create a drop cap, one can increase the font size of an element's _____ and float it on the left margin.

first letter

A _____ is one in which the size of the web page and the size of its elements are set regardless of the screen resolution.

fixed layout

A _____ sets the width of page elements as a percent of the available screen widith.

fluid layout

The _____ unit can be thought of as a share of available sapce.

fr

Once a Cascading Style Sheets (CSS) grid is established, a specific element within _____ is placed at the intersection of a specified row and column.

grid cell

Which expression extends a grid item across an entire CSS grid row from the first gridline to the last?

grid-row: 1/-1;

Which properties will extend a grid item so that it covers multiple rows and columns, specifically the area from row gridlines 3 to 5 and from column gridlines 1 to 3?

grid-row: 3/5; grid-column: 1/3;

The _____ value of the overflow style keeps the element at a specified height and width, but cuts off excess content.

hidden

The grid-gap property is used to define the _____ in a CSS grid.

internal space between grid rows and columns

Drop caps look better if the first letter's _____

line height is decreased

To center an element vertically within its parent element, display the parent element as a table cell with a defined height and then set the vertical-align property to _____.

middle

Which function allows you to switch between fixed and flexible track sizes?

minmax (min, max)

What is the result of using the following CSS properties grid-row: row; grid-column: column:

moves a CSS grid item to a specific location within the grid

Identify the default clear value that allows an element to be displayed alongside the floated objects.

none

The _____ value of the display style removes an element from a rendered page.

none

What is the value of the list-style that will cause no marker to be displayed?

none

Which display value would work best to prevent the pictures from displaying when the web page loads?

none

A(n) _____ is a line drawn around an element, enclosing the element content, padding, and border spaces.

outline

Identify a property that a browser can use to handle excess content.

overflow

The scroll value of the overflow style keeps the element at the specified dimensions, but adds horizontal and vertical scroll bars to allow users to scroll through the _____ content.

overflowed

In a fixed layout, the size of the page and the size of the page elements are usually fixed using _____ as the unit of measure.

pixels

Sue needs to create a _____ style sheet so that no unwanted styles can creep in from any browser's internal style sheet.

reset

A(n) _____ supersedes a browser's default styles and provides a consistent starting point for page design.

reset style sheet

Which of the following can be used to express style in the outline-style property outline-style: style;

ridge

An element with the display type value _____ is displayed as a block unless its next sibling is also a block, in which case, it is displayed inline, essentially combining the two blocks into one.

run-in

An element within a CSS grid _____.

so that the first gridline is assigned a value of 1 and the last is assigned a value of -1

Browsers ignore any values specified for the left or top properties under _____ positioning.

static

The coordinates for an element being placed within a container need not be defined as long as its position is set to _____

static

Identify a grid-based style whose value is a space-separated list of column widths.

track-list

What will be created by the following style rule grid-template-columns: 250px 100px;

two grid columns: the first 250 pixels in width and the second 100 pixels in width

The following expression creates a layout consisting of one fixed column 350 pixels in width followed by _____ for a total of five grid columns. grid-template-columns: 350px repeat (2, 2fr 1 fr);

two sets of two columns in which the first column in each set is twice the width of the second column

In the overflow property, a value _____ instructs browsers to increase the height of an element to fit the overflow content.

visible

Which of the following is the default overflow property?

visible

Ken can space the links equally across the browser window in order to make the page text easier to read by changing the _____

width

Consider the following grid: grid-template-columns: 4fr 1fr; grid-template-rows: 4fr 2ft 1fr; This grid _____.

will contain rows whose heights maintain a proportion of 4:2:1

To specify a stacking order, one can use the _____ property.

z-index