Lesson 6: Managing Text Flow by Using CSS
1. CSS Regions is similar to which of the following?
a) a grid layout
b) a magazine page layout
c) a free-floating toolbar
d) a vector image
Answer: c
Difficulty: Medium
Section Reference: Managing the Flow of Text Content by Using CSS
Microsoft and Adobe collaborated with the W3C to create the concept of CSS Regions for Web-based content flow. CSS Regions allows developers to dynamically flow content across multiple boxes, or containers, in HTML documents with fluid layouts. This is similar to a magazine page layout.
2. Which of the following is true of CSS Regions?
a) Are useful for static Web pages
b) Are defined areas of an HTML document where content can flow
c) Does not allow for non-contiguous content flow between regions
d) Does not adapt to a user's screen size
Answer: b
Difficulty: Medium
Section Reference: Understanding and Using Regions to Flow Text Content between Multiple Sections
CSS Regions are defined areas of an HTML document where content can flow. They do allow for non-contiguous content flow between regions, and they adapt to a user’s screen size.
3.What is the error in the following CSS Regions code?
#source {flow-into: main;}
.region {flow-from: container;background: #9ACD32;}
a) The flow-from and flow-into property values must match.
b) The #sourceselector needs to be region.
c) The .regionselector must be @region.
d) The flow-into and flow-from code lines are in the wrong order.
Answer: a
Difficulty: Hard
Section Reference: Flowing Content through Containers Dynamically
The value for the flow-from property must match the named flow value of the flow-into property—this is how the content source and content container are associated.
4.Which of the following makes a container a region and associates it with a named flow?
a) the DOM
b) content source
c) flow-into property
d) flow-from property
Answer: d
Difficulty: Medium
Section Reference: Flowing Content through Containers Dynamically
The flow-from propertymakes a container a region and associates it with a named flow.
5.Which of the following can place an element into a named flow?
a) the DOM
b) content container
c) flow-into property
d) flow-from property
Answer: c
Difficulty: Medium
Section Reference: Flowing Content through Containers Dynamically
The flow-into property can place an element into a named flow.
6.In CSS Regions, which of the following is not flexible?
a) region height
b) region width
c) content flow
d) none of the above
Answer: a
Difficulty: Easy
Section Reference: Flowing Content through Containers Dynamically
In order for CSS Regions to work, content flow can’t affect the height of a region—you need to define region heights in your CSS so they are not flexible.
7.When you have multiple sources and multiple elements, what controls the order in which content appears in a CSS Regions container?
a) the DOM
b) content container
c) flow-into property
d) flow-from property
Answer: a
Difficulty: Medium
Section Reference: Flowing Content through Containers Dynamically
You can also have multiple sources and assign the flow-into property to multiple elements.
The content will be pulled from the source in the order in which it appears in the Document
Object Model (DOM). This is referred to as the document order.
8.You are creating a multi-column layout. Which CSS property controls the amount of space between columns?
a) column-count
b) column-gap
c) column-fill
d) column-width
Answer: b
Difficulty: Easy
Section Reference: Creating Columns
The column-gap property controls the amount of space between columns.
9. You are creating a multi-column layout. Which CSS property controls the amount of space within columns?
a) column-count
b) column-gap
c) column-fill
d) column-width
Answer: d
Difficulty: Easy
Section Reference: Creating Columns
The column-width property controls the amount of space within columns.
10. You are creating a multi-column layout. Which CSS property enables you to insert a break within a column?
a) break-after
b) break-before
c) break-inside
d) break-within
Answer: c
Difficulty: Easy
Section Reference: Creating Columns
The column-width property enables you to insert a break within a column.
11. You are creating a multi-column layout. Which CSS property enables you to set the line that appears between columns to a dashed line? (Choose all that apply.)
a) column-rule
b) column-rule-width
c) column-rule-style
d) column-gap
Answer: a, c
Difficulty: Medium
Section Reference: Creating Columns
You can specify a dashed line for the column rule using either the column-rule or thecolumn-style properties.
12.In the following code for multiple columns, what does the auto value control?
.tricolumn { columns: 3 auto; }
a) column height
b) column width
c) number of columns
d) background color of columns
Answer: b
Difficulty: Medium
Section Reference: Creating Columns
The auto value in the code snippet controls column width.
13.You do not want hyphens to appear in your HTML document. How can you modify the following code to prevent hyphenation?
<p style="-ms-hyphens: auto;text-align: justify;font-size: 14pt;">
a) Change text-align to nohyphen.
b) Change font-size to 12pt.
c) Change auto to manual.
d) Change auto to none.
Answer: d
Difficulty: Hard
Section Reference: Using Hyphenation
The none value with the hyphens property prevent hyphenation.
14.Which of the following specifies the maximum number of consecutive hyphenated lines that may contain hyphenated words?
a) -ms-hyphenate-limit-chars
b) -ms-hyphenate-limit-zone
c) -ms-hyphenate-limit-lines
d) none of the above
Answer: c
Difficulty: Medium
Section Reference: Using Hyphenation
The -ms-hyphenate-limit-lines property specifies the maximum number of consecutive hyphenated lines that may contain hyphenated words.
15.Which CSS3 property creates the general shape of a CSS exclusion?
a)shape-outside
b)shape-inside
c)wrap-flow
d)wrap-through
Answer: a
Difficulty: Medium
Section Reference: Using CSS Exclusions to Create Text Flow around a Floating Object
The shape-outside property creates the general shape of a CSS exclusion.
16. Which CSS3 property specifies how content should wrap around an exclusion element?
a)shape-outside
b)shape-inside
c)wrap-flow
d)wrap-through
Answer: d
Difficulty: Medium
Section Reference: Using CSS Exclusions to Create Text Flow around a Floating Object
The wrap-through property specifies how content should wrap around an exclusion element.
17.Which of the following is a shorthand method of setting the CSS Exclusions wrap-marginwrap-flow, and wrap-padding properties in one declaration?
a) wrap-through
b) wrap
c) shape
d) shape-outside
Answer: b
Difficulty: Medium
Section Reference: Using CSS Exclusions to Create Text Flow around a Floating Object
The wrap property is a shorthand method of setting the wrap-margin wrap-flow, and wrap-padding properties in one declaration.
18.You are creating a CSS exclusion and want to display content above and below the exclusion but leave the sides blank. Which of the following properties do you use?
a) wrap-flow: clear
b) wrap-flow: auto
c) wrap-flow: maximum
d) wrap-flow: end
Answer: a
Difficulty: Hard
Section Reference: Using CSS Exclusions to Create Text Flow around a Floating Object
You can use wrap-flow: clear to display content above and below the exclusion but leave the sides blank.
19.You are creating a multi-column layout and want the number of columns to be flexible, based on a column width of 30em. Which of the following will accomplish this goal?
a) { columns: 30em auto; }
b) { columns: auto 30em; }
c) { column-count: auto; }
d) { column-width: auto; }
Answer: b
Difficulty: Medium
Section Reference: Creating Columns
The { columns: auto 30em; } declaration sets the column width to 30em and leaves the number of columns flexible.
20.Which of the following requires the use of iframes in Microsoft’s implementation of the feature?
a) multi-column layout
b) hyphenation
c) CSS Regions
d) CSS Exclusions
Answer: c
Difficulty: Medium
Section Reference: Microsoft’s Implementation of CSS Regions
Microsoft uses iframes as the content source for CSS Regions.