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, 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'.
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
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:
Read More From Owlcation
<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
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.
Inbuilt MadCap Flare Stylesheets Folder
Right-click on the ‘Stylesheets’ folder to add a new stylesheet.
Creating a New Stylesheet on MadCap Flare
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
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.
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
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".
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
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.
Before Applying External CSS Changes
Making a Small Design Change
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
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
