Sample Report Layout Ideas - Understanding the power of CSS

Create Styles - simply add a 'Class' to your report page layout to instantly apply the created design. It's that easy!

Style 1

Table CSS with Code:

<style type="text/css">.border {
  border-style: solid;
background-color: #434343;
  border-top-style: outset;
  border-top-color: #7BB5C6;
  border-top-width: 7px;
}
</style>
<div class="border" style="font-size:20px;color:white;">&nbsp;Styles &amp; Materials</div>

<div style="margin-left: 40px;">Your text data here.</div>

Let's create a Style 2 with a different color header band.

<style type="text/css">.border {
  border-style: solid;
background-color: #434343;
  border-top-style: outset;
  border-top-color: #

<style type="text/css">.border2 {
  border-style: solid;
background-color: #6F6F6F;
  border-top-style: outset;
  border-top-color: #EAA708;
  border-top-width: 7px;
}
</style>
<div class="border" style="font-size:20px;color:white;">&nbsp;Styles &amp; Materials</div>

<div style="margin-left: 40px;">Your text data here.</div>

;
  border-top-width: 7px;
}
</style>
<div class="border2" style="font-size:20px;color:white;">&nbsp;Styles &amp; Materials</div>

<div style="margin-left: 40px;">Your text data here.</div>

Just adding a Border2 class will now apply the Orange border with lighter Gray background. Add as many class styles as you need!

TIP: If you want your borders to look sharp on high-resolution displays you can use thin instead of 1px :)