Using your own CSS (cascading style sheet)

Default CSS behavior for XHTML processing

The Toolkit CSS stylesheet file resource/commonltr.css is copied to the output directory when you process to a target that creates XHTML output. All the generated XHTML output files include a link like the following that references the default CSS file:

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

The generated XHTML pages reference classes defined in the default CSS file to control the styling of the XHTML page in a web browser.

Overriding the default CSS for a single DITA element

DITA provides an "outputclass" common attribute that can be used to to explicitly set CSS classes for elements in the XHTML output. For example, if you want an entire section to be rendered as bold, you would code:
<section outputclass="caution" />
            

How to create your own CSS to override the default behavior

If you want to change the appearance of all the generated web pages, you can create you own CSS file that overrides part or all of the default CSS file. Your CSS will be included after the default CSS in all the generated pages.

For your override CSS to be used, you must set property values for the three Ant parameters in the following table:

Parameter Description
args.copycss Whether to copy your CSS to the output directory.
args.css Path to your CSS file.
args.csspath Location of your CSS file in the output directory.

CSS override example

In this example we will make the background of all the generated web pages for the garage sample be the color aqua. We start by creating a new file garage.css. The file looks like this:
/* garage CSS stylesheet */
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
background: Aqua;
}
		
Next we add some property definitions to our Ant build script as follows:
	
<!-- Properties to add a custom CSS -->
<property name="args.css" value="${projdir}/garage.css"/>
<property name="args.csspath" value="CSS"/>
<property name="args.copycss" value="yes"/>

When the Ant script is run our CSS will be copied to the CSS subdirectory in the output directory. In addition, the generated web pages will all contain the following lines:

<link rel="stylesheet" type="text/css" href="../CSS/commonltr.css"/>
<link rel="stylesheet" type="text/css" href="../CSS/garage.css"/>
           

This will cause all the web pages to have an aqua background color.