Topic Specialization Step 4-6: Implement CSS Styles

The DITA Open Toolkit provides a general framework for using CSS stylesheets with the HTML generated from topics. It provides the commonltr.css and"commonrtl.css styles, which are used by default for all generated HTML. You can also supply your own custom CSS and specify it as part of the HTML generation process.

In the tutorial materials there is faq-question_html.css in the html/css directory. For your own environment you can create a new CSS stylesheet. You should store and manage it outside the scope of the DITA Open Toolkit. The Toolkit processing can automatically copy it to the output location for you. Or, if you are publishing your topics to a larger website, the CSS styles may be managed separately, in which case you just specify the name and path of the CSS but turn off the copying. This is all explained reasonably well in the Open Toolkit documentation.

For this tutorial, create a new CSS file called faq-question.css and give it this initial content:

/*

  CSS for FAQ questions
  
  Copyright (c) 2011 Your Name Here

 */

To use your custom CSS stylesheet you supply the full path of the CSS file, wherever you've put it, with the "/css" parameter of the HTML transformation type and specify "/csscopy" as "yes."

The main thing this CSS needs to do is make the "A. " before the short answer big and bold to match the "Q. " for the question statement. Do this like so:

*[class = 'faq-short-answer-a'] {
  font-family: sans-serif;
  font-size: 16pt;
  font-weight: bold;
}

You can test this by either re-running the toolkit or, once you've run it once, so that the CSS stylesheet is referenced from the HTML, you can just manually copy the changed CSS to the output directory and see how it looks. You might also find it easiest to develop the CSS style in place and then once you're happy with the result, copy it back to the original location. Just be careful not to run the toolkit in the meantime or you'll overwrite your changes (doh!).

This style specification gives the result we specified, but it doesn't look quite right: the "A. " is now too big relative to the text of the answer. I don't pretend to have any skill at graphic design but my response to this is to make the short answer text bigger:

*[class = 'faq-short-answer'] {
  font-family: sans-serif;
  font-size: 14pt;
}

Note that we are setting the @class value on the <div> that you put around the short answer.

Test your styles until you're satisfied with the visual result. If you want to get really sophisticated, you can add JavaScript to show or hide the answer details, but that's beyond the scope of this tutorial.

That's it, you're done.