Designing a style sheet

By using a cascading style sheet, you can ensure design consistency across all your help files or Web pages. For example, you can include standard colors and images in your style sheet that will be applied to all of the files in your help system. The Help Editor installs with \css\style.css included and referenced from the HTML templates in the \templates folder. Stylesheets are powerful, elegant and fun. An example is its use in the textbox at the bottom. If you switch to the Code view, you will see the following HTML. In it, the table is assigned two classes, box and overview.

<table class="box bottomline">
<tbody>
<tr>
<th><a href="design.htm">Designing a Help System</a></th>
</tr>
</tbody>
</table>

If you open the stylesheet, for example in Notepad, you will see the classes defined:

table.box{
width: 100%;
border-style: solid;
border-width: 1px;
border-color: #BBB;
padding-left: 15px;
}

- and -

.overview th{background: url('../icons/overview.png') no-repeat left ; font-weight:normal; }

The table.box class is used in combination with other classes in several situations such as with overview and to implement the Tip sidebar (below). It states that the width of the box is the full page, and it has a solid border.

The .overview class is used to add a specific icon at the beginning of the th (= header), and to move the text to the right.

If you wish you can:

  1. Add additional stylesheets to the templates or your documents.
  2. Make changes to the style.css, e.g. to use other font or change the quickparts looks.
Tip
A good place to learn about css is http://www.w3schools.com/css/
Designing a Help System