Once the content is structured, it is time to structure the styles. Let us begin with the yellow, green and bottom regions. Of the entire screen, the yellow region is at the top, has the full width, and occupies about 12% of the entire screen. As a result, the style of the yellow region is described in listing 2.
| Listing 2: | yellowregionstyle |
The other regions are specified in a similar fashion. note that region “lavender” is a part of region “bottomrighttop”. As such, the style needs to be specified a little differently. We can express the fact that we only want to apply a particular style when a <div> element with class lavender is contained in a <div> element with class bottomrighttop. This is illustrated in listing 3.
| Listing 3: | lavenderregionstyle |
Note that the left, top, width and height attributes are all relative to the containing region “bottomrighttop”. The overflow attribute is handy because it specifies that if the region is not large enough to display the content, then use a scroll bar and allow content to be scroll while the window follows the confinement attributes.