Modifying Toolkit CSS

Both XHTML and HTML Help outputs are formatted by the same set of XHTML stylesheets. When building HTML Help, additional build steps create the content, index, project files etc and compile them into a CHM file. The simplest way to customize HTML output is by modifying the CSS styles used. This can be achieved in one of two ways:

Creating an additional CSS stylesheet and adding the appropriate properties to the ANT build script to associate it with the HTML files.
Associating individual DITA content elements with a CSS class in a custom stylesheet using the outputclass attribute.

There are two approaches to applying styles in CSS:

Create named styles and apply them to tags in the output HTML page individually.
Create named styles in the CSS stylesheet by prefacing the name with a period (.) character; then apply the style to an HTML tag using the class element. For e.g., in the CSS: .mystyle {color:red}; and respectively in the HTML: <div class="mystyle">/>

CSS stylesheet files are associated with an HTML page using the <link> tag in the <head> section of the HTML. In the DITA Open Toolkit, the default spreadsheet "commonltr.css" is copied to the output directory and associated with each HTML page when building the XHTML output.

Create a new .css file in the editing application of your choice.
Create a body {} element to redefine the HTML body tag styles.
You can use the body element styles to determine the appearance of the page background and the default styles of all text on the page.
Set the background-color style to a pale yellow such as #ffffcc.
Set the font to 11pt Arial.
The source code for your stylesheet should be as follows:
```
body {
background-color: #FFFFcc;
font-family: Arial;
font-size: 11px;
}
```
Save the file as myHTMLproject.css in the ... directory.
Open the myHTMLproject.xml ANT build file.
Insert a new property element after the transtype property.
Set the name attribute to args.css.
Set the value attribute to ${dita.dir}${file.separator}tutorial${file.separator}myHTMLproject.css.
Add another property with name args.csspath and value css.

Add a third property with name args.copycss and value yes

Parameter Name	Description
`args.copycss`	determines whether CSS file will be copied to the output directory
`args.css`	specifies the full path to the custom CSS file
`args.csspath`	specifies the directory in the output directory that the CSS file will be copied to

Save the build file.
Build the HTML output.