When using HTML template files, it's good to know about Cascading Style Sheets (CSS) - all about the presentation of the html documents...

Attributes like the font(family), color and background color of the "body" of the document can be set using style sheets. Generally everything that has to do with colors, borders, positioning (e.g. right-justified) can be applied to any html tag, for which no style sheet is required. When these settings should be applied to more than 1 html tag, style sheets should be used. A step by step demonstration of how style sheets work:

1. An example table tag in HTML:

   <table class=example border=1>
     <tr>
       <td>A1: First
       <td>B1: Second
     <tr>
       <td>A2: Third
       <td>B2: Fourth
   </table>

   Looks like:

   A1: First	B1: Second
   A2: Third	B2: Fourth

   When applying a style sheet for the example (class ID is used):

   <style>
     table.example tr td { background-color:yellow; }
   </style>

   Will look like:

   A1: First	B1: Second
   A2: Third	B2: Fourth

    

2. Note that your style sheet should always be set up for a certain class, otherwise you will find the style sheet may have an effect much wider than you expected. Let's take the above example a little further: another class ID is assigned to the table tag - we want to introduce a class ID "label" for the fields in the first column:

   <table class=example border=1>
     <tr>
       <td class=label>A1: First
       <td>B1: Second
     <tr>
       <td class=label>A2: Third
       <td>B2: Fourth
   </table>

   With a style sheet:

   <style>
     table.example tr td.label { background:transparent;font-size:8pt;font-family:arial; } 
     table.example tr td { background:yellow; }
   </style>

   Will look like:

   A1: First	B1: Second
   A2: Third	B2: Fourth

It's a simple setup that is used quite widely. The <style> tag that defines the stylesheet can also be set up as a style sheet file, to be referenced from many html documents. Such link would look like:

<link rel="stylesheet" type="text/css" href="/companystyle.css">

Find out more about CSS on this CSS tutorial or the official W3C organisation on www.w3.org.

For a tutorial and full reference on Cascading Style Sheets, check out www.w3schools.com - CSS tutorial.

• Prev
• Next