## Stylesheet Modifications

The help file uses CSS (Cascading Style Sheets) to provide most of its layout effects (such as text justification, font, color, size, borders, indentation, and so forth). Note that unless you have at least IE4 installed, style sheets will not work.

All topics in this file reference two CSS files; one is the built-in version of `povray35.css`, and one is an optional external version which, if present, must be in the root directory of the hard drive on which the help file resides. If you installed POV-Ray for Windows in the default location of `c:\Program Files\POV-Ray for Windows v3.5\`, then the external CSS file would need to be `C:\povray35.css`.

Since the external file is loaded after the internal one, it is possible to override the default stylesheet if you happen to dislike an attribute that it sets. It is beyond the scope of this document to tell you all about how style sheets work; there are a number of references on the WWW. Here are two -

WWW Consortium's CSS2 Specification
Microsoft's "Cascading Style Sheets in Internet Explorer 4.0"

We will instead concentrate on a quick run-through of a stylesheet that was in use close to final release of the program (the one in use may have changed slightly since then) so that you can see what each named class does.

You can download the current style-sheet (the one used to build this help file) from here. If you have already saved a copy of the file in the root directory of the installation drive, clicking the following button
will open it in Notepad.

Hint: if you don't want changes you made to the CSS file to affect this help file any more, just delete or rename povray35.css. Also note that for a change to the external style sheet to have effect once you have saved it, you need to either re-load the current help page, or change to a different page.

The following section will document the meaning of some of the individual sections of the default style-sheet.

The `body` entry sets the formatting attributes for text that is considered the 'body' of the help file. This includes more or less anything that is not part of some other special block (such as `<code>...</code>`, for example).

In the below case, the font is set to Verdana, or (if that is not found), Arial. The text alignment is set to justify. If you wanted to have ragged right edges, you could change the `text-align` statement to read 'left'.

    body
    {
      font-family: Verdana, Arial, Helvetica, sans-serif ;
      text-align: justify
    }

The `pre` entry sets the appearance of `<pre>` formatted text blocks (these are typically used to present sections of example scene file source code).

    pre
    {
      font-family: "Lucida Console,Lucida Sans Typewriter,Courier New,monospace" ;
      color: #000000 ;
      background-color: #e6f4ff ;
      border: 1px solid ;
      border-color: #cfdbe5 ;
      padding: 3pt
    }

The `h1 ... h7` entries set part of the appearance of header lines (the section titles).

    h1, h2, h3, h4, h5, h6, h7
    {
      border: 1px solid ;
      padding-left: 3pt
    }

The `h1 ... h5` entries continue to define more header attributes.

    h1 {        background-color: #fff0e8 ; border-color: #f0e0c0 ; color: #2040c0 }
    h2 {        background-color: #ffe8d0 ; border-color: #f0d0c0 ; color: #2040c0 }
    h3 {        background-color: #ffe4c0 ; border-color: #f0d0a0 ; color: #2040c0 }
    h4 {        background-color: #ffdcc0 ; border-color: #f0d0b0 ; color: #2040c0 }
    h5 {        background-color: #ffdaca ; border-color: #f0ccb0 ; color: #000000 }

These two set the appearance of header levels 6 and 7 (which are represented in this file using a `<h5>` enclosed in a class called "`divh6`" or "`divh7`" respectively).

    .divh6 h5 { background-color: #ffd8c2 ; border-color: #f0c7a8 ; color: #000000 }
    .divh7 h5 { background-color: #ffd3ba ; border-color: #f0c2a1 ; color: #000000 }

The `divh1 ... divh7` entries define the appearance of text enclosed within the corresponding classes. A `<div class="divh1">` is used to enclose text within a section started with a <h1>, (e.g. `'1.0 Using POV-Ray for Windows'`), `divh2` is for the next level down (e.g. `'1.1 Introduction'`) and so forth.

In this case we are just setting the margins.

    .divh1 { margin-left: 5pt ; margin-right: 5pt }
    .divh2 { margin-left: 10pt ; margin-right: 5pt }
    .divh3 { margin-left: 15pt ; margin-right: 5pt }
    .divh4 { margin-left: 20pt ; margin-right: 5pt }
    .divh5 { margin-left: 30pt ; margin-right: 5pt }
    .divh6 { margin-left: 50pt ; margin-right: 5pt }
    .divh7 { margin-left: 70pt ; margin-right: 5pt }

The `code` entry defines the appearance of POV-Ray code that is quoted inline rather than being placed in a `<pre>...</pre>` block.

    code { color: #0000a0 }

These lines define the appearance of the 'In This Section' tables that appear in some sections. The second line defines the appearance of the title of the table, the third the section number, and the fourth the section name.

    .InSectionTable { border: 1px outset ; background-color: #e6f4ff }
    .InSectionHeader { border: 1px outset }
    .InSectionSecNo { }
    .InSectionSecName { }

The following line defines the appearance of the navigation bars that are at the top and bottom of most sections of the help file.

    .NavBar { border: 1px outset ; background-color: #ffcc99 }

This class is sometimes used in sections of text where we want to warn the reader to 'Be Aware' of an issue.

    .BeAware
    {
      color: #000000 ;
      background-color: #f0f4ff ;
      border: 2px outset ;
      padding: 5pt ;
    }

This class is sometimes used in sections of text where we want to warn the reader of something.

    .Warning
    {
      color: #000000 ;
      background-color: #ffe0e0 ;
      border: 2px outset ;
      padding: 5pt ;
    }

This class is sometimes used in sections of text where we want the reader to note an issue.

    .Note
    {
      border: 1px solid ;
      border-color: #fff0c0 ;
      background-color: #fffff0 ;
      padding: 3pt ;
    }

This class is sometimes used in sections of text where we want to highlight a hint.

    .Hint
    {
      border: 1px solid ;
      border-color: #ffe0c0 ;
      background-color: #fff0e8 ;
      padding: 3pt ;
    }