Different Types of CSS (Cascading Style Sheets) in RoboHelp

© 2010 Ugur Akinci
A CSS (Cascading Style Sheet) is the easiest way to control and change text styles in a RoboHelp 8 file.
In general, there are three ways to change the style of an HTML file (whether it’s a DreamWeaver, RoboHelp, or some other HTML file, it really doesn’t matter):
1) An EXTERNAL CSS file linked to the whole document FILE by “reference.”
2) An EMBEDDED CSS file which is linked to the RoboHelp 8 TOPIC itself.
3) An INLINE style change that controls only the specific text  string that it targets and nothing else.
NOTE: Inline style changes override the embedded styles, and embedded styles override the linked CSS styles.
However, in terms of the the power and scope of styling changes, when you change an EXTERNAL CSS it truly “cascade” all though the project and changes every instance of that element no matter where it is in the project directory. For example, if you change Heading_1 from 36 point font size to 48 point size, ALL Heading_1 headers in all topics change to 48 points.
In contrast, when you make the same change in the embedded CSS for TOPIC 1, only those Heading_1 style headers in TOPIC 1 change to 48 points. All the other Heading_1 headers in the other topics remain as 36 points.
Inline styling is the worst in terms of changing. If you need to switch Heading_1 headers to 48 points through inline styling, you need to find each Heading_1 header and increase its font size to 48 points, one by one!  Imagine doing that in a help file with 1,000 topics, each topic containing one, two, or five Heading_1 style header?! Crazy.
That’s why I prefer to control all my paragraph styles through a single linked external CSS file so that when I make changes to it, the changes are applied automatically all throughout the document.
Here is how the HTML statement that links an external style to the document looks like in the HTML view of a RoboHelp 8 file:

Here the “link” statement says that there is an external CSS style sheet linked to this document; its file name is “default.css” and it’s a “text” file. Since there is no indication of a separate root element, you can assume that this default CSS file is saved in the same folder as all the other files of this RoboHelp 8 help project.
That’s why the default.css file is displayed in RoboHelp 8 PROJECT MANAGER as a file withinin the same project folder (or, directory):

BUT REMEMBER that a linked external CSS file can actually be ANYWHERE else on your hard disk or the Internet as long as you provide it’s correct address in the LINK statement.