Customization CSS
Edit online

The publishing process is driven by a customization CSS.

DITA Map PDF - based on HTML5 and CSS Transformation Type

To change the styling of the output for the DITA Map PDF - based on HTML5 & CSS transformation scenario:

Create the CSS file that will contain all your customizations. It is recommended to create this file in your project directory so you can edit it easily.
Add the custom CSS rules. See the various topics in this section for assistance with specific types of customizations.
For linking the CSS file, you have two options:
1. Create a publishing template, create the customization CSS file inside the template folder and link it into the publishing template descriptor. See Publishing Templates.
2. Choose an existing publishing template, then edit the scenario and set the full path to the custom CSS file as the value of the args.css parameter. The rules from custom CSS will override the rules from the template CSS files.
Run the transformation scenario.

To change the styling of the output for the DITA Map PDF - based on DITA & CSS transformation scenario:

Create the CSS file that will contain all your customizations. It is recommended to create this file in your project directory so you can edit it easily.
Important: Always use CSS rules that match the DITA class attribute values. Avoid using CSS selectors containing element names, because they have a weaker specificity and will not override the styles defined in the built-in CSS files. For instance, to match the p element, use its class attribute:
```
*[class ~= "topic/p"] {
  color: gray;
}
```
Instead of:
```
p {
  color: gray;
}
```
Tip: You can organize the CSS rules in separate files, but they all need to be imported from a single master CSS file. For simplicity, this manual provides instructions based upon a single CSS file.
Note: LESS files are supported (LESS is a CSS pre-processor with CSS-like syntax, but has a lot of features designed to speed up development).
Add the custom CSS rules. See the various topics in this section for assistance with specific types of customizations.
Set the full path to the custom CSS file as the value of the args.css parameter.
Run the transformation scenario.