Inline, Embedded, and External CSS

Following are the three main ways to use CSS rules.

[Menu Proxy — Headings — Online — Depth3 ]

Inline CSS

With this method, you specify the formatting rule for the content at the spot where it exists in the document. Although this type of implementation is allowed, it is not recommended because changing the look of the text in the future might mean making changes in many files and many places instead of just one. See Local Formatting.

Embedded CSS

With this method, you specify formatting rules for elements within a file and they affect only that document.

Example You might decide to specify that every paragraph in the document should be 11 points. Therefore, in the XHTML document code, you specify between the <head> tags that all paragraphs (<p> tags) should be that size. As a result, every time a <p> tag is found in that document, the text will be 11 points. In the behind-the-scenes XHTML code, it might look like this:

This method is a bit more powerful than the inline method, but it still does not allow you to control the look and feel of more than one document at a time, therefore it also is not recommended.

If you want to use embedded CSS in Flare, you would need to open the XHTML code (in the Internal Text Editor or in a third-party editor) and enter the embedded CSS rules manually. See Internal Text Editor.

External CSS

With this method, you do not specify formatting rules anywhere within the XHTML or HTML document. Instead, you specify the rules in a separate, external file that has a .css extension (see Creating Stylesheets and Editing Styles in a Regular Stylesheet). Then, in the XHTML document you provide a link to that external stylesheet (see Associating Primary Stylesheets With All Files and Associating Stylesheets Locally With Specific Files).

Example You might decide to specify that every paragraph in all of your documents should be 11 points. Therefore, you create an external stylesheet, name it something like styles.css, and specify within it that all paragraphs (<p> tags) should be that size. This work can be done in the Flare interface. If you look at the behind-the-scenes code in the CSS file, it might look like this:

Then you associate the external stylesheet with all of the XHTML files that you want to use that look and feel. Again, this can be done in the Flare project at multiple levels (topic, target, and project). If you look in the behind-the-scenes XHTML code of one of the document files, it might look like this:

External stylesheets are recommended over the other methods. They make it possible to truly separate the content from the presentation and allow you to apply formatting to multiple places at once.