Advanced CSS:
Best Practices for Formatting Notes, Tips, Cautions and Warnings in MadCap Flare

I intentionally tried to make the examples as simple as possible. All of the formatting is in each example inside the <head> in a <style> block. To use one of the examples, open it in the Internal Text Editor or Notepad and copy everything between the <style> tags into your stylesheet. I did not put my examples in a stylesheet simply because I have 20+ examples. It would be confusing to have 20+ note styles in a stylesheet or 20+ stylesheets in a project.

Some of the examples use formatting that will not display in Flare's Editor, and two of them will also not appear in Flare's preview. There are notes at the bottom of those examples.

Feel free to use and extend these examples. There are often multiple ways to accomplish the same task in HTML and CSS. I tried to demonstrate the easiest approach based on best practices. If you have an alternate method, that's great: go for it. If you have an idea for another example or a question, just send me an email at


Click here to download a zip of the Flare project.