New

Long-Term Learning

Learn efficiently and remember over time.

Start Long-Term Learning

Get personalized study reminders at intervals optimized for better retention.
Track your progress on this set by creating a folder
Or add to an existing folder

Add this set to a folder

  • Content flow has, historically, been a manual ___

    procedure in HTML documents.

    Today, CSS Regions, CSS Exclusions, and multi-column layouts help you ___

    flow content dynamically.

    Desktop publishing software makes it easy to connect content in different areas, so that changes made to one area allows content to ___

    reflow properly to other connected areas.

    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.

    Although CSS3 enables you to use multi-column layout to separate content into columns, «CSS Regions» offer ___

    better control of content flow in more complex layouts.

    You combine CSS Regions with CSS layout techniques, such as ___

    columns, flexboxes, and grid layouts.

    Microsoft recommends using CSS Regions for page layout and JavaScript when ___

    developing Metro style apps in Windows 8 and Internet Explorer 10.

    Hyphenation, which breaks words between syllables at the end of lines, is also important to ___

    fluid layouts, enabling full justification of standalone paragraphs and those in columns.

    Positioned floats, now called CSS Exclusions, enable you to completely wrap text around ___

    images, shapes, and containers of text.

    CSS Regions lets you flow content between ___

    neighboring or distant areas in an HTML document.

    CSS Regions are defined areas (regions) of an HTML document where content can flow. When there's too much content to fit in one region, the remaining content automatically ___

    flows into the next region.

    In a typical HTML document, you can display content in different sections or areas, but ___

    each area is independent. If you want overflow text to move from one area to another, you generally have to do so manually.

    CSS Regions are ___

    defined areas (regions) of an HTML document where content can flow.

    To implement CSS Regions, you need to specify a content source and ___

    content containers.

    To implement CSS Regions, you need to specify a content source and content containers. You accomplish both tasks using the ___

    «flow-into» and «flow-from» CSS properties.

    A «content source» may be one or more blocks of text in the same or a separate HTML document that holds the ___

    content you want to flow through a layout.

    A «content source» may be one or more blocks of text in the same or a separate HTML document that holds the content you want to flow through a layout. The content is referred to as a ___

    "content stream."

    «content containers», which are ___

    the areas into which content is flowed.

    An HTML document with content containers acts as a master page, like a ___

    template, in which each container is sized and positioned where you want content to appear, but each container is initially empty.

    Within the content source, the element that contains the content to be flowed is assigned the ___

    «flow-into» CSS property.

    Within the content source, the element that contains the content to be flowed is assigned the «flow-into» CSS property. The value of this property is called a ___

    'named flow'.

    the «flow-from» CSS property creates the ___

    content container, which is a CSS Region.

    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.

    You can also have multiple sources and assign the «flow-into» property to ___

    multiple elements.

    The DOM is a W3C specification that ___

    describes the structure of dynamic HTML and Extensible Markup Language (XML) documents in a way that allows a Web browser to manipulate.

    The DOM allows programs and scripts to update content, structure, and styles on the ___

    fly - anything in an HTML or XML file can be modified.

    In order for CSS Regions to work, content flow can't affect the ___

    height of a region

    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.

    A region receives as much content as it can hold and then flows the remaining content into the ___

    next region.

    If there is still content left over after all regions are filled, one of three situations can occur: ___

    The overflow content in the last region will:
    • Be truncated
    • Continue overflowing and be visible
    • Continue overflowing but be hidden

    You can control how the last region handles overflow content using the ___

    «region-overflow» and «overflow» properties.

    «region-overflow» is set to either ___

    auto or break.

    «region-overflow» is set to either «auto» or «break». Using the «auto» value, you can ___

    specify the overflow property as «visible» or «hidden».

    For example, if you want overflow content to continue to flow and be visible, you would use the following syntax: ___

    .region {
    region-overflow: auto;
    overflow:visible;
    }

    Using the «break» value for «region-overflow» will prevent content from ___

    overflowing the last region, truncating the content at that point.

    Using the «break» value for «region-overflow» will prevent content from overflowing the last region, truncating the content at that point. The syntax is:

    .region {
    region-overflow:break;
    }

    Microsoft's method of implementing CSS Regions varies a ___

    bit from the W3C

    Microsoft uses «iframes», which are like mini boxes on a Web page that contain ___

    external content embedded in an HTML document, as the content source.

    You must (also) use the -ms- vendor prefix with the «flow-into» and ___

    «flow-from» properties.

    For example, the following shows an «iframe» element with a unique ID, which you would add to a master page: ___

    <iframe id="main-data-source" src="source.html" />

    ..then you would create the 'named flow' using a CSS selector that specifies the data source: ___

    #main-data-source {
    -ms-flow-into: main;
    }

    To create content containers, assign a class name to the elements you want to use as containers: ___

    <div class="region"></div>
    <div class="region"></div>

    ..then create a CSS selector that specifies the data source from which to accept the content flow: ___

    .region {
    -ms-flow-from: main;
    }

    msRegionUpdate: ___

    Allows you to manipulate regions dynamically

    msRegionOverflow: ___

    Handles content overflow, similar to the region-overflow property

    msGetRegionContent: ___

    A script method defined by Microsoft as returning "an array of Range instances corresponding to the content from the region flow that is positioned in the region"

    CSS3 enables you to create multi-column layouts that work much like ___

    the columns feature in Microsoft Word.

    You can also enable hyphenation to properly break words at the end of lines, which avoids the ___

    problem of long words wrapping to the next line and leaving a gap on the previous line.

    Hyphenation breaks words between syllables at the end of lines to create a more ___

    uniform right margin and eliminate gaps of whitespace within paragraphs.

    You can now create multiple columns - newspaper style - in HTML documents that scale based on ___

    the user's screen size.

    CSS3 properties for «multi-column layout» let you create columns by dividing text across multiple columns, specify the amount of space that appears between columns ( ___ ), make vertical lines (rules) appear between columns, and define where columns break.

    the gap

    The main CSS properties you use to create and manipulate multiple columns in an HTML document are: ___

    column-count, column-gap, column-rule

    «column-count»: ___

    Sets the number of columns an element should be divided into; can also use the «columns» property with values to set «column-count» and «column-width» properties simultaneously

    «column-gap»: ___

    Specifies the gap between the columns, which is also known as the gutter or alley

    «column-rule»: ___

    Creates a vertical line in the gap between columns and sets the width, style (single or double line, solid, dashed, 3D, etc.) and color of the rule

    CSS3 multi-column layout uses the concept of the "column box" to refer to the container that ___

    holds content and displays it in columns.

    The "column box" is between the content box and the ___

    content in the original CSS Box model.

    Multi-column properties used in CSS3 : ___

    break-after, break-before, break-inside, column-count, column-fill, column-gap, column-rule, column-rule-color, column-rule-style, column-rule-width, column-span, column-width, columns

    break-after ? ___

    Inserts a break after the generated column box

    break-before ? ___

    Inserts a break before the generated column box

    break-inside ? ___

    Inserts a break within the generated column box

    column-count ? ___

    Sets the number of columns an element will use

    column-fill ? ___

    Specifies how to fill columns; balances content equally between columns, if possible, or fills columns sequentially

    column-gap ? ___

    Specifies the gap between columns

    column-rule ? ___

    Is a shorthand property that sets the column-rule-width, column-rule-style, and column-rule-color properties at the same place in a style sheet

    column-rule-color ? ___

    Specifies the color of the rule between columns

    column-rule-style ? ___

    Specifies the style of the rule between columns, such as «solid» or «double», «dashed», and so on

    column-rule-width ? ___

    Specifies the width of the rule between
    columns

    column-span ? ___

    Specifies whether an element should span no columns or all columns

    column-width ? ___

    Specifies the width of a column or columns

    columns ? ___

    Sets the column-width and column-count properties simultaneously

    Because CSS3 columns are still a work in progress, you may need to add vendor prefixes to ___

    column-related property names.

    This code uses the column-count property to create three columns : ___

    <style>
    .tricolumn {
    column-count: 3;
    }
    </style>
    ...
    <div class="tricolumn">
    Lorem ipsum . . orci.
    </div>

    <style>
    .tricolumn { column-count: 3; }
    </style>

    We modified the code for all four of the major browsers : ___

    <style>
    .tricolumn {
    -ms-column-count: 3;
    -moz-column-count: 3;
    -o-column-count: 3;
    -webkit-column-count: 3;
    }
    </style>

    You could accomplish multiple columns using the «columns property», which is a shorthand way of ___

    setting the number of columns and the column width in one declaration.

    ...The following code uses the auto value for column width: ___

    .tricolumn { columns: 3 auto; }

    Another way to use the «columns property» is to ___

    assign a number value to column-width and leave column-count set to auto.

    This example sets column-width to 15em, which means the multi-column element will have a column width of 15 ems (or 15 times the width of the font size of the content in the column): ___

    columns: auto 15em;

    Now let's add a «column rule». This property sets the ___

    width, style, and color of the rule between all columns.

    Now let's add a «column rule». This property sets the width, style, and color of the rule between all columns. The syntax for a dashed blue line that's 3 pixels wide is: ___

    column-rule: 3px dashed blue;

    To control the size of the gutter between columns, use the ___

    «column-gap property».

    To control the size of the gutter between columns, use the column-gap property. This property uses an integer value or the keyword «normal»: ___

    column-gap: 3em;

    To specify whether an element such as a heading should span columns, use the ___

    «columns-span» property.

    To specify whether an element such as a heading should span columns, use the «columns-pan» property. This property is set to a number of columns to span or uses the «all» (column-span: all;) or «none» keywords, which means an element spans all columns or ___

    does not span any columns, respectively.

    As you can see, the column-related properties provide flexible content display with ____

    minimal CSS declarations.

    «Hyphenation» is the process of connecting two words with a hyphen mark (-) or ___

    breaking words between syllables at the end of a line.

    Hyphenation is highly useful for multi-column layouts to ___

    eliminate white space within columns left by long words that automatically wrap to the next line, making text appear more professional.

    Generally, automatic hyphenation attempts to justify text at the ___

    right margin.

    CSS3 introduces the «hyphens» property, which controls ___

    hyphenation.

    CSS3 introduces the hyphens property, which controls hyphenation. The property uses the values ___

    none, manual, and auto

    hyphens: auto ? ___

    Enables automatic hyphenation of words based on line-break opportunities within words or by a "language-appropriate hyphenation resource"

    hyphens: manual ? ___

    Enables hyphenation of words based only on line-break opportunities within words

    hyphens: none ? ___

    Prevents hyphenation

    The W3C points out that you must declare a language using the HTML lang or XML xml:lang attributes for ___

    correct automatic hyphenation to occur.

    if your entire HTML document is in the same language (English, for example) and you want to enable automatic hyphenation, add the attribute to your HTML element or doctype declaration, such as: ___

    <!doctype html>
    <html lang="en-us">
    or
    <html xmlns="http://www.w3.org/1999/xhtml"
    xml:lang="en" lang="en">

    Microsoft provides additional hyphenation properties that are specific to Microsoft environments, as follows: ___

    -ms-hyphenate-limit-zone, -ms-hyphenate-limit-chars, -ms-hyphenate-limit-lines

    -ms-hyphenate-limit-zone: ___ ?

    Specifies the width of the trailing whitespace (called the hyphenation zone) that can be left in a line before hyphenation occurs; the property's value is a length in pixels or a percentage

    -ms-hyphenate-limit-chars: ___ ?

    Specifies the minimum number of characters in a word that may be hyphenated; if the character count is lower than the minimum, the word is not hyphenated

    -ms-hyphenate-limit-lines: ___ ?

    Specifies the maximum number of consecutive hyphenated lines that may contain hyphenated words

    -ms-hyphenate-limit-zone, specifies the width of the trailing whitespace (called the hyphenation zone) that ___

    can be left in a line before hyphenation occurs;

    -ms-hyphenate-limit-chars, specifies the minimum number of characters in a word that may be hyphenated; if the character count is lower than the minimum, ___

    the word is not hyphenated

    -ms-hyphenate-limit-lines, specifies the maximum number of consecutive hyphenated lines that ___

    may contain hyphenated words

    The following markup with inline CSS uses the -ms-hyphens property, which is set to auto: ___

    <p style="-ms-hyphens: auto; text-align: justify; font-size: 14pt;">
    Hyphenation is the process of connecting . . . more professional.
    </p>

    A «positioned float» is a CSS construct that enables you to position images, text, and boxes ___

    anywhere in an HTML document and then wrap text completely around these elements.

    Positioned floats are called ___

    «CSS Exclusions» in the latest W3C specification.

    With CSS Exclusions, you can control the position of a float precisely, at a specified distance from the ___

    top, bottom, left, or right sides of a container.

    You can also create a float in any shape: ___

    rectangular, circular, triangular, and just about anything in between.

    W3C properties related to CSS Exclusions: ___

    shape-outside, shape-inside, wrap, wrap-flow, wrap-margin, wrap-padding, wrap-through

    shape-outside ? ___

    Creates the general shape of an exclusion

    shape-inside ? ___

    Modifies a shape's contents

    wrap ? ___

    Is a shorthand method of setting the wrap-flow, wrap-margin, and wrap-padding properties in one declaration

    wrap-flow ? ___

    Specifies how exclusions affect inline
    content within block-level elements

    wrap-margin ? ___

    Provides an offset for content outside the element

    wrap-padding ? ___

    Provides a pad (an offset) for content inside an element

    wrap-through ? ___

    Specifies how content should wrap around an exclusion element

    To create a simple CSS exclusion, use the «wrap-flow: both» property to display content on ___

    all sides of the exclusion.

    Another option is to use «wrap-flow: clear», which displays content above and ___

    below the exclusion but leaves the sides blank.

    You declare an exclusion shape using the «shape-inside» and «shape-outside» properties, which define the ___

    content and the general shape of an exclusion, respectively.

    To use any CSS Exclusions properties for rendering in Internet Explorer 10, add the ___

    -ms- vendor prefix.

    Microsoft also uses the «-ms-wrap-side» and «-ms-flow-wrap» properties, which aren't part of the ___

    W3C specification.

    CSS3 properties for «multi-column layout» let you create columns by dividing text across multiple columns, specify the amount of space that appears between columns (the gap), make vertical lines (___) appear between columns, and define where columns break.

    rules

    Please allow access to your computer’s microphone to use Voice Recording.

    Having trouble? Click here for help.

    We can’t access your microphone!

    Click the icon above to update your browser permissions above and try again

    Example:

    Reload the page to try again!

    Reload

    Press Cmd-0 to reset your zoom

    Press Ctrl-0 to reset your zoom

    It looks like your browser might be zoomed in or out. Your browser needs to be zoomed to a normal size to record audio.

    Please upgrade Flash or install Chrome
    to use Voice Recording.

    For more help, see our troubleshooting page.

    Your microphone is muted

    For help fixing this issue, see this FAQ.

    Star this term

    You can study starred terms together

    NEW! Voice Recording

    This is a Plus feature