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 don't 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 this:

<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 this:

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

You may need to designate certain elements as needing special formatting in your HTML output. The XSL stylesheets automatically generate class attributes on HTML DIV and SPAN elements that identify the DocBook element they came from. But those are applied uniformly, so they don't give you control over particular instances that need different handling.

The HTML stylesheets have a feature that let you control the class attribute value that is output for certain DocBook elements. If the right parameter is turned on, then the value of the element's role attribute is copied as the HTML class attribute value. The DocBook elements are emphasis, entry (table cell), para, and phrase. Each of them has a corresponding stylesheet parameter that controls the feature for that element.

For example, if you set the para.propagates.style parameter to a nonzero value, then you get this behavior.

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

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

Then you can write a CSS selector like P.primary that styles such paragraphs differently from ordinary paragraphs.

In a similar manner, you can set any of the entry.propagates.style, emphasis.propagates.style, and phrase.propagates.style parameters to get similar behavior for role values on those DocBook elements.

Here is an example of generating an emphasis style using small capital letters. Process this file with the emphasis.propagates.style parameter set to 1.

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;}

For print output, however, this parameter will have no effect because there is no downstream CSS stylesheet. If you also want small caps in your print output, you will need to add something like this to your fo stylesheet customization layer:

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

For general use, the phrase.propagates.style permits you to add custom class values to just about any part of your output. You may want certain titles to be distinguished, for example. You can wrap the text in the DocBook title element in a phrase with a role attribute. The HTML will have an HTML SPAN element with

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

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

Then you can write an appropriate CSS selector to style such titles differently from other titles.

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 don't 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: