Updated date:

Feb 13, 2021

MadCap Flare for Coding Beginners: How to Apply Basic CSS

Author:: Kalpana Iyer

I am a bibliophile who loves to read about new concepts and ideas. The next step almost always involves testing them out in real life.

New to CSS or MadCap Flare?

If you are a technical writer or documentation creator, with hardly any coding or programming experience, software like MadCap Flare can be a bit daunting with all its tools and features. In this article, I am going to teach you how to apply basic CSS to HTML pages using MadCap Flare. This is a very simple tutorial meant for beginners. The version I am using is MadCap Flare r2.

This page will also be helpful to web designers, coders, and developers in figuring out where and how to add stylesheets and apply CSS on a MadCap Flare project.

What Is CSS?

CSS stands for Cascading Style Sheets. With the help of CSS, you can style and improve the overall design of your HTML pages. Stylesheets have the .css extension.

To locate the stylesheets for your MadCap Flare project, go to Content > Resources > Stylesheets on your file explorer. A list of currently active stylesheets is displayed.

On MadCap Flare, you can link an HTML page to a stylesheet with predefined style settings and change the way your page looks. So for example, if the text is defined as Blue in the stylesheet, then all HTML pages linked to the stylesheet will have a Blue text color.

We will learn about this in detail in the following sections.

To get a better understanding, I would recommend trying out the steps on MadCap Flare as we move along.

How to Apply CSS using MadCap Flare

There are 3 ways to apply CSS to HTML pages using MadCap Flare.

Inline CSS
Internal CSS
External CSS

1. Inline CSS

This is when the styles are inserted right into the HTML tags of your topic using the ‘style’ attribute.

For example:

<p style="color:blue"> Enter your own content.</p>

To apply this code, open your project on MadCap Flare and go to the ‘Text Editor’ of an HTML topic under 'Content Explorer'.

The changes can be viewed by shifting to the ‘XML Editor’.

Usually, designers frown upon this practice as they prefer not to use any styles in an HTML document.

XML Editor of MadCap Flare Showing Inline CSS Design Change

2. Internal CSS

Internal CSS is when a style is applied, within the HTML document, to the whole page using the <style> tag.

For example:

<head>
<style>
   p
   {
   color:red;
   }
   a:link
   {
   color:blue;
   }
</style>
</head>

Insert this code in the ‘Text Editor’ of an HTML Page on MadCap Flare.

Here the text color is set to Red and website link colors are set to Blue. Shift to the XML Editor to view the changes.

This method is better than the first one (inline) as we are not cluttering our HTML page with multiple style attributes. Instead, one single style tag is being used.

XML Editor of MadCap Flare Showing Internal CSS Design Change

3. External CSS

This is when the style file (CSS) is kept separate from the HTML file. There are no style tags or attributes defined from within the HTML document. Instead, you are creating a separate stylesheet and then linking the sheet to the required HTML pages. This is the most preferred method.

The steps involved in applying external CSS to HTML pages using MadCap Flare are:

Create a stylesheet
Link HTML Pages to this stylesheet

These steps are defined below.

How to Create a Stylesheet on MadCap Flare

Stylesheets can be created easily within MadCap Flare.

Go to Content Explorer. Navigate to: Content > Resources > Stylesheets.

Right-click on the ‘Stylesheets’ folder to add a new stylesheet.

Creating a New Stylesheet on MadCap Flare

The new stylesheet opens up within MadCap Flare in a new tab. This is far too complex for a new user to understand. Once you are familiar with the various tags, you can make edits to your stylesheet from within MadCap Flare itself.

As an example, I have opened a stylesheet called 'New Test Style.css'. This is how it appears.

Since you are a new CSS user, the best option is to open the CSS file using notepad. To do this:

Go to your file explorer (outside Flare), navigate to the Flare project folder.
Go to Content > Resources > Stylesheets folder.
Open the new stylesheet.

The new stylesheet you had created from within MadCap Flare opens up and you will be able to see some predefined styles that are part of your template. The syntax is property: value, where the values can be changed as per your requirement.

For example, in font-family, I can change the value from "Arial" to "Times New Roman"; I can increase the font-size from "12pt" to "16pt".

Some Font-Family and Image Border Values to Test


Font-Family:	Img:
Times New Roman	border: 2px solid #ddd;
Georgia	border: 6px solid transparent;
Arial	border-radius: 7px; (to create rounded borders)
Verdana	border-radius: 50%; (creates a rounded image)
Courier New	padding: 6px;
Lucida Console	width: 140px;

To see this in action, assign the stylesheet to an HTML document.

Note: You can also create a new stylesheet using a notepad on your File Explorer. Navigate to Content > Resources > Stylesheets of your MadCap Flare project, right-click, and add a new text document. Enter the code. Save the file with the .css extension under "All Files".

How to Apply External CSS to an HTML Page on MadCap Flare

To apply a stylesheet to an HTML page, go the ‘Text Editor’ of the HTML page and insert this code between <head> tags.

<head>
<link href="../resources/stylesheets/newstylesheet.css" rel="stylesheet" type="text/css" />
</head>

The href link should contain the path and name of the stylesheet you want to apply (which is usually "../resources/stylesheets/(stylesheetname).css", unless you choose to place the file somewhere else). Change to XML Editor to view the style.

Now change the code to match your requirements. For CSS beginners, starting to test with a basic and simple code is more than enough. I deleted the previous code and included a simple one that changes the text to Red and links to Blue. Save the changes in stylesheet notepad. The changes are reflected in the XML editor within MadCap Flare.

Now I am going to change the heading from Dark Blue to Green. In the stylesheet, enter the following code and save.

h1
{
color:green;
}

In the XML Editor of MadCap Flare, the heading will change from Dark Blue to Green.

As a final change, let's increase the font size.

p
{
color:red;
font-size:22.0pt;
}
a:link
{
color:blue;
}
h1
{
color:green;
font-size:40.0pt;
}

Heading in Green, Increased Font Size on HTML Page

In this manner, you can experiment with different tags and view the output in the XML Editor of MadCap Flare.

This article is accurate and true to the best of the author’s knowledge. Content is for informational or entertainment purposes only and does not substitute for personal counsel or professional advice in business, financial, legal, or technical matters.