Customizing the Default CSS of a Document Type

The easiest way to customize the default CSS stylesheet of a document type is to create a new CSS stylesheet, save it in the same folder as the default CSS, and set the new stylesheet as the default CSS for the document type.

For example, to customize the default CSS for DITA documents by changing the background color of the task and topic elements to red, follow the following steps:

First, create a new CSS stylesheet named my_dita.css and save it in the folder [OXYGEN_DIR]/frameworks/dita/css_classed, where the default stylesheet named dita.css is located. The new stylesheet my_dita.css contains:
```
@import "dita.css";
    
task, topic{
    background-color:red;
}
```
To set the new stylesheet as the default CSS stylesheet for DITA documents, open the Preferences dialog box and go to Document Type Association. Select the DITA document type and press the Edit button. In the Author tab, change the URI of the default CSS stylesheet from ${framework}/css_classed/dita.css to ${framework}/css_classed/my_dita.css.

Figure: Set the location of the default CSS stylesheet
Press OK in all the dialog boxes to validate the changes. You can now edit DITA documents based on the new CSS stylesheet. You can also edit the new CSS stylesheet itself and see its effects on rendering DITA XML documents in the Author mode by running the Refresh action that is available on the Author toolbar and in the DITA menu.