By default, the HTML stylesheets generate H2 headings for both chapter and sect1 titles. That's because H1 is reserved for book titles. The basic problem is that there are too few HTML heading levels to map uniformly to the deeper structure that DocBook provides. But if you are willing to use CSS, then you can style the HTML headings as you like. Take a look at the HTML output, and you will see that each title is wrapped in HTML div elements with class attributes:

<div class="chapter" lang="en">
  <div class="titlepage">
    <div>
      <div>
        <h2 class="title">
           <a name="Catalogs"></a>Chapter 3. XML catalogs
        </h2>
      </div>
   ...

Here is a CSS specification that increases the font size for chapter title H2 headings and adds other style properties:

div.chapter div.titlepage h2 {
    font-size: 180%;
    font-family: Helvetica;
    font-weight: Bold;
    color: #444444
}

If you examine the HTML output, there are additional div wrappers around the h2. Those are artifacts of the way the titlepage templates are handled. They are not needed in the CSS selector syntax to establish the ancestry of the h2 as a chapter title.

You can write similar specifications for section heading levels, using different class values. The nice thing about this feature is that you do not have to customize the XSL stylesheets at all. You just need to put the styles in a CSS file and reference that from your HTML output by setting the html.stylesheet parameter.

You may want to apply styles to block displays such as programlisting and other elements. For example, you might want to set a background color and draw a border around each program listing. You could use the shade.verbatim stylesheet parameter to turn on the background color, but that parameter also affects screen and literallayout elements. The preferred method is to use CSS.

The HTML output for a programlisting looks like the following:

<div class="programlisting">
<pre class="programlisting">Text of the program
...
</pre>
</div>

You could create a selector and set styles in your CSS stylesheet like the following:

pre.programlisting {
  background-color: #FFFF99 ;
  border: 1px solid #006600 ;
}

The default class attributes in the HTML output may not provide you with sufficient control of your formatting. You may want to treat some element instances differently, for example, or you may need to use predefined class names from an existing CSS stylesheet. The HTML stylesheets provide two methods for defining your own class names for HTML output:

Each of these methods is described in more detail in the following sections.

DocBook XML:
<para role="primary">This feature of the product ...</para>

HTML output:
<p class="primary">This feature of the product ...</p>

DocBook XML:
Using an SQL <emphasis role="sqlsyntax">select</emphasis> statement

HTML output:
Using an SQL <span class="sqlsyntax">select</span> statement

CSS stylesheet entry:
.sqlsyntax {font-variant: small-caps;}

<xsl:template match="emphasis[@role = 'sqlsyntax']">
  <fo:inline font-variant="small-caps">
    <xsl:apply-templates/>
  </fo:inline>
</xsl:template>

DocBook XML:
<title><phrase role="primary">Using a Mouse</phrase><title>

HTML output:
...<span class="primary">Using a Mouse</span>...

Modern browsers also support CSS selectors on the id attribute of HTML elements. An id attribute differs from the class attribute in that it is unique in the HTML file.

By default, the stylesheets do not output id attributes because some older browsers could not locate cross references by id attribute. They only worked with named anchors like <a name="foo">. Modern browsers can locate content by id, so the stylesheets provide an option to output the id value from the DocBook XML to the corresponding HTML element. Set the stylesheet parameter generate.id.attributes to 1 to turn on this feature.

Even when this parameter is used, not all id attributes in the source document are passed through to the HTML output. Only the major components get an id: