Customization CSS

Edit online

The publishing process of the DITA Map PDF - WYSIWYG transformation scenario is driven by a customization CSS.

To change the styling of the output:

1. Create a custom CSS file that will contain all your customizations. It is recommended to create this file in your project directory.
   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 a CSS-like syntax, but has a lot of features designed to speed up development).
2. Add the custom CSS rules. See the topics in this section for assistance with specific types of customizations.
3. In the DITA Map PDF - WYSIWYG transformation scenario, set the full path to the custom CSS file as the value of the args.css parameter.