(This is the second of two articles about Madcap Flare’s use of Cascading Style Sheets)
In a previous article, A Flare CSS Primer, we looked at how Cascading Style Sheets (CSS) work to selectively apply formatting. In this article, we’ll take this theoretical knowledge about how CSS works and put it to practical use in Flare.
To further our understanding of CSS’s role in Flare, we’ll selectively apply CSS styles to HTML content using the Flare XML editor. We’ll create a class in CSS, and then compare the effects of that class to other methods of formatting. Finally, we’ll make adjustments to our class that will cast light on the CSS rules of inheritance and cascade.
Let’s start by creating a new Flare project, and then create a new class within that project. The following steps refer to Flare version 12. If you’re using an early version, the Stylesheet Editor will be slightly different.
Create the p.BlueBold class
Now we’ll open a new topic and create three lines of text. Each line will demonstrate a different formatting method.
Create formatting examples
Your topic will look like this:
Click the Text Editor tab to display underlying HTML for the topic. Here you’ll see the HTML that applies formatting to each line of text.
In the HTML of Topic.htm we can see that:
Taking into account the relationship between the body, h1, p.BlueBold, and p selectors, the CSS inheritance hierarchy looks like this:
Now let’s demonstrate inheritance within this hierarchy by changing the font color of the Body selector in CSS, in this case, to green. The Body selector is the parent of the p and the h1 selector, and so the descendant p selector should take on the properties of the parent (body). That is, unless the parent’s formatting is overridden at the descendant level (for example, by p.BlueBold).
Change the body font colour
Next we’ll turn off a formatting property that was set directly at the descendant level, and allow the inheritance rule to take over.
Modify the p.BlueBold class
Now click on the Topic.htm tab to view your topic in the XML editor. You’ll see that the second line has turned green, but the font is still bold:
The font color property in the body style is no longer being overridden at the class level. Instead, the p.BlueBold style is inheriting the green font color from the parent body style. The font weight (bold) remains unchanged. The inline formatting is unaffected by inheritance because it has a greater specificity in the cascade, and so overrides all formatting in the CSS.
This is just the tip of the iceberg when it comes to Flare CSS, and CSS in general. Fortunately, Flare helps us out by giving us tools – like the Stylesheet Editor – that present CSS in a user-friendly manner.
Still, knowledge of CSS will come in handy when using Flare, particularly when troubleshooting formatting changes. For example, possible formatting issues may occur when a style at a higher level in the CSS hierarchy affects its descendants. Knowing the parent of the style in question makes this problem much easier to solve.
For many more CSS problem-solving skills, refer to the following valuable resources:
World Wide Web Consortium (W3C) CSS reference
Mozilla CSS documentation and tutorials
Smashing Magazine article on CSS specificity and inheritance