Web Development Tutorial 3 Quiz Review A

According to your textbook, desktop layouts are often based on grid layouts with _____ columns.

• 1-3

• 7-11

• 4-6

• 12 or more

Answer explanation

You can have as many columns as you like, but too many columns can make your content look "squished".

You can use dashed colored lines to see how your grid is layed out on a screen like we did in tutorial 3.

The ​​ (a)   value of the display style removes an element from a rendered page.

• None
• Null
• Empty
• Hide

The _____ property allows one to define a rectangular region through which an element’s content can be viewed.

• Clip

• Box

• Rect

• Window

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

• relative
• absolute
• inherit
• fixed

Answer explanation

Absolute, Relative, Fixed, Inherit, and Static Positioning

Absolute positioning defines the position of a given bounding box from the top and left side margins of the web page. This not only allows objects to be placed in an exact location, it also allows objects to be placed one on top of another.

Relative positioning defines the positioning in such a way that elements are offset from the previous element in the HTML code. This allows objects to be placed in relation to one another.

Fixed positioning defines the position of a given box relative to the window and remains in its specified location even as the content scrolls underneath it. This value does not work in Internet Explorer 6 or earlier. In IE 7, the browser must be in “standards-compliance mode”.

Inherit positioning explicitly sets the value to that of the parent (if the parent is position:absolute, the child will be position:absolute; if the parent is position:fixed, the child will be position:fixed).

Static positioning is the default. It defines the position of a given box essentially as an unpositioned element – it flows in the normal rendering sequence of the web page.

(You should really add this to your notes!)

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

• First line

• First character

• Last character

• Hover element

Answer explanation

Drop caps are an easy way to make your paragraphs more dramatic.

Use the CSS ::first-letter pseudo element to do this.

In the z-index property, the value of _____ stacks the object using default rules.

• Left

• Auto

• Hidden

• None

Answer explanation

You can think of the z-value as a vertical stacking order. Items with a greater z-value will stack above those with a lower value.

You can use this to create a 3-D effect on your web pages or just shuffle items that can be seen by the user because they are "on top" of the other items.

Think of it like a stack of papers on a desk. You can clearly see the one on top, but may only see bits and pieces of papers that are underneath.

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

• inherited

• absolute

• elastic

• static

Answer explanation

position: fixed;

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

position: relative;

An element with position: relative; is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right properties.

position: static;

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page.

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

• scroll

• auto

• hidden

• visible

Answer explanation

The overflow property has the following values:

visible - Default.

The overflow is not clipped. The content renders outside the element's box

hidden

The overflow is clipped, and the rest of the content will be invisible

scroll

The overflow is clipped, and a scrollbar is added to see the rest of the content

auto

Similar to scroll, but it adds scrollbars only when necessary

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

• grid-template-row

• grid-template-column

• track-list

• inline-list

Identify the default type for the box-sizing property.

• border-box

• inherit

• initial

• content-box

Answer explanation

content-box (default)

The width and height properties (and min/max properties) includes only the content. Border and padding are not included

border-box

The width and height properties (and min/max properties) includes content, padding and border

initial

Sets this property to its default value.

inherit

Inherits this property from its parent element.