Regions, grouping, and nesting

Using regions

Regions is a new CSS3 construct that allows you to have content flow through various regions in a web page.

Layout of a webpage using regions requires two things:

a content source
the regions that will be the content destination

The content can come from another page via an iframe or another element on the page itself (not work in all browser).

Regions, flow-into and flow-from properties

CSS is used to control the functionality of the content from the source to the destination.

The re are two properties to control the functionality:

the flow-into property is assigned a value to hold the content.
the flow-from define the destination of the content

The named flow is called the use of the flow-intro and flow-from properties. All the elements forming the regions to display the content source in the same named flow is called a region chain.

The following code demonstrates the use of regions construct:

<head>
<style type="text/css">
    .content-source {
        -ms-flow-into: content;
     }           
    .s1-region {
        -ms-flow-from: content;           
        width: 300px;
        height: 150px;
        border: 1px solid #ccc;
    }
</style>
</head>
<body>
    <h2>REGIONS</h2>
    <iframe class="content-source" src="regionsource.html"></iframe>
    <div class="s1-region"></div>
    <div class="s1-region"></div>
    <div class="s1-region"></div>
</body>
/* the regionsource.html file */
<div class="contentsource">
    Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit, sed diam nonummy nibh euismod tincidunt ut la
    erat volutpat. Ut wisi enim ad minim veniam, quis n
    exerci tation ullamcorper suscipit lobortis nisl ut
    Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit, sed diam nonummy nibh euismod tincidunt ut la
    erat volutpat. Ut wisi enim ad minim veniam, quis n
</div>

Using grouping

Grouping separates selectors with commas in one line and apply the same properties to all selectors without having to repeat them.

The following code demonstrates the grouping of the same css properties:

<head>
<style type="text/css">
    /* MINIFIE THE CSS BY GROUPING THE SAME STYLING ELEMENTS */ 
    h2, .div-1, .div-2 {
        color: red;
    }
</style>
</head>
<body>
    <h2>GROUPING CSS TO SAME ELEMENTS </h2>
    <div class="div-1">
        <p>THIS IS A PARAGRAPGH ISIDE A DIV WITH (class="div-1") AND 
           WITH THE SAME COLOR AS THE H2</p>
    </div>
    <div class="div-2">
        <p>THIS IS A PARAGRAPGH ISIDE A DIV WITH (class="div-2") AND 
           WITH THE SAME COLOR AS THE H2</p>
    </div>
</body>

Using nesting

If the CSS is structured well, there shouldn’t be a need to use many class or ID selectors. This is because you can specify properties to selectors within other selectors.

The following code demonstrates nesting:

<head>
<style type="text/css">
    #top {
        background-color: #ccc;
        padding: 1em
    }       
    #top h1 {
        color: #ff0;
    }       
    #top p {
        color: red;
        font-weight: bold;
    }   
</style>       
</head>
<body>
    <h2>NESTING CSS STYLING </h2>
    <div id="top">
        <h1>Chocolate curry</h1>
        <p>This is my recipe for making curry purely with chocolate</p>
        <p>Mmm mm mmmmm!!! Buono!!!</p>
    </div>
</body>

Ads Right