Controlling the Report Presentation - Formatting the report header/footer

The reason styles are said to be “cascading” in CSS classes is that they apply in a hierarchical manner. A class applied to the Report (top) element in a definition applies to the whole report but style properties of that class may be overridden by other classes applied to elements lower down within the report.
To format the header and footer for a report, add the following new classes to your style sheet and apply the classes to the corresponding header and footer Label elements’ Class attributes.

.HeaderStyle
{
   background-color : Green;   
   font-size : large;
   color : White;
   text-align : center;
   width : 100%;
   padding : 5px 5px 5px 5px;
}

.FooterStyle
{
   background-color : Green;
   font-size : x-small;
   color : White;
   width : 100%;
   padding : 3px 3px 3px 3px;
}

A few new style properties are introduced in this example. The text-align style property is used to center the header, the font-size style property is used to control the relative size of the fonts, the width style property is used to stretch the header/footer the width of the browser window, and the padding style property controls the padding around the header/footer.

At this point, the report is should look like that shown below. Note that the sample below is being shown in a browser window, not the Preview window in Studio. This was done to allow the centering to look better by making the browser window smaller.

Also, remember that when you browse from Studio, you’re browsing the default report. You may need to right-click the Chapter4Report1 definition in the Applications panel and set it as the default in order to browse it.

Figure 4.8: Report Preview