Updated date:

MadCap Flare for Coding Beginners: How to Apply Basic CSS

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, a help authoring software like MadCap Flare can be a bit daunting with all its tools and features. On this page, 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.

Dear Technical Writers..

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.

madcap-flare-how-to-apply-basic-css

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.

  1. Inline CSS
  2. Internal CSS
  3. 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'.

Applying Inline CSS on MadCap Flare

Applying Inline CSS on MadCap Flare

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

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.

Internal CSS using MadCap Flare

Internal CSS using 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

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:

  1. Create a stylesheet
  2. 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.

Inbuilt MadCap Flare Stylesheets Folder

Inbuilt MadCap Flare Stylesheets Folder

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

Creating a New Stylesheet on MadCap Flare

Creating a New Stylesheet on MadCap Flare

Enter the Stylesheet Name and Save

Enter the Stylesheet Name and Save

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.

New Stylesheet on MadCap Flare

New Stylesheet on MadCap Flare

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

  1. Go to your file explorer (outside Flare), navigate to the Flare project folder.
  2. Go to Content > Resources > Stylesheets folder.
  3. Open the new stylesheet.
Double Click on the New Stylesheet

Double Click on 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".

Stylesheet on Notepad

Stylesheet on Notepad

Some Font-Family & 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".

Using Notepad To Create Stylesheets

Using Notepad To Create Stylesheets

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>
External CSS Linking on HTML Page

External CSS Linking on HTML Page

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 which 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.

Before Applying External CSS Changes

Before Applying External CSS Changes

Making a Small Design Change

Making a Small Design Change

After External CSS Changes

After External CSS Changes

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

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.

© 2020 Kalpana Iyer