![Page 1: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/1.jpg)
Mike HamiltonV.P. Product ManagementMadCap [email protected]
MadCap Flare – Controlling Document Look and Feel with CSS
![Page 2: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/2.jpg)
Slides
Slides are available on Mike’s blog at:
http://madcapsoftware2.wordpress.com
![Page 3: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/3.jpg)
Agenda
• What are Cascading Stylesheets (CSS)?– CSS Basics
• CSS Rules• Inheritance• Cascading
– Classes– Spans and Divs
• Creating a Stylesheet in Flare• Flare Stylesheet editor overview
![Page 4: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/4.jpg)
Agenda
• Modifying styles• Applying styles to content• Applying a style sheet to topics• Fonts and Font Families• Font sizing• Creating a style class
![Page 5: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/5.jpg)
Cascading Stylesheets
Introduction
![Page 6: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/6.jpg)
What Are Cascading Stylesheets?
• A Cascading stylesheet (CSS) document is a simple text file.
• A CSS file contains a collection of style rules used to control the look and feel of documents.
• A CSS style rule has two parts, a Selector and a Declaration
![Page 7: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/7.jpg)
Cascading Style Sheets (CSS)
• Style Rules
Selector Declaration
ValueProperty
H1 {font-weight: bold}
H1 {font-weight: bold; color:black; }
![Page 8: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/8.jpg)
CSS Inheritance
XHTML elements inherit style attributes
<body><p>Sample text</p></body>
body { font-family: Arial; }
![Page 9: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/9.jpg)
HTML Page Structure
Document (HTML)
Head
Body
H1 Heading
Paragraph 1
Paragraph 2
Title
![Page 10: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/10.jpg)
Cascading
• Three CSS implementations– External
•Linked to an unlimited number of files
– Embedded•Affects only the elements in a
specific file
– Inline•Affects only the element applied to
![Page 11: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/11.jpg)
Cascading
Order of precedence
• Inline styles
• Embedded style sheets
• Linked (external) style sheets
![Page 12: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/12.jpg)
Inline CSS
• Use the STYLE attribute
<p>This is normal text</p>
<p style=“font-weight: bold”>This is bold text</p>
![Page 13: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/13.jpg)
Embedded CSS
• Added to the <HEAD> area of file• Use <STYLE> element
<HEAD> <TITLE>New Topic1</TITLE>
<STYLE>H1{font-weight:bold}</STYLE>
</HEAD>
![Page 14: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/14.jpg)
External CSS
• The <LINK> element is used to attach a CSS document to an HTML document
<LINK REL="StyleSheet” REF=”example.css">
![Page 15: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/15.jpg)
CLASS attribute
• CLASS attribute can be used to create custom styles for a set of items on a page
P { color:blue; margin-left:3px; }
P.myclass { color:blue; margin-left:3px; }
![Page 16: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/16.jpg)
CLASS attribute
• Class Syntax:
– In a style sheet: P.myclass { color:blue; margin-
left:3px; }
– In a page: <P CLASS=“myclass”>Text</P>
![Page 17: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/17.jpg)
Spans
• Spans format text within an element such as a paragraph, list, or table
• Conceptually similar to character styles in MS Word/FrameMaker
<p>This paragraph has a <span style="font-weight: bold”> boldfaced</span> word.</p>
This paragraph has a boldfaced word.
![Page 18: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/18.jpg)
Divs
• Divs allow for grouping many elements together
<div class=“indent”>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>
![Page 19: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/19.jpg)
Using
Cascading Stylesheets
in Flare
![Page 20: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/20.jpg)
Creating a Stylesheet
1. Select Project>Add Stylesheet
![Page 21: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/21.jpg)
Creating a Stylesheet
2. In the Template Folders section select Factory Templates.
3. In the Templates section, select one of the CSS template files available.
4. If necessary, select an alternate folder for storing your new stylesheet.
5. In the File Name field, type a name for the stylesheet.
6. Click Add.
7. Click OK.
![Page 22: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/22.jpg)
Modifying a Style
1. Open a stylesheet. By default stylesheets are stored in the Resources folder in the Content Manager view.
2. When the stylesheet editor opens you can work in either the Simplified or Advanced view. tour
3. In the simple view, double click on the style you wish to edit.
4. Select a tab.
5. Select a style property to change.
6. Click OK.
![Page 23: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/23.jpg)
Applying a Style
1. Open a topic.2. Select or click inside the content
to which you want to apply the style.
3. Select View> Style Window. The Styles window appears.
4. Click a style to apply.5. The style is applied to the
selected content
![Page 24: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/24.jpg)
Applying a Stylesheet to a Topic
1. Open the topic that you want to link to the stylesheet.
2. Select Tools>Stylesheet Links. The Stylesheet Links dialog box
appears.
![Page 25: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/25.jpg)
Applying a Stylesheet to a Topic
3. Select a stylesheet.4. Click .5. The stylesheet is added to the
list on the left.6. Click OK.7. The stylesheet is applied to the
topic.
![Page 26: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/26.jpg)
Font Family
What is a Font Family? A list of alternate fonts for styles used in your project
Why are Font Families important?
• Many fonts on your authoring workstation may not be available on the end users’
• If you use a font in your Help system that does not exist on the users’ workstation, then the browsers pick what font to use!
![Page 27: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/27.jpg)
Font Family
Font Family Guidelines • Define primary font
• Define secondary fonts for other operating systems (UNIX, Macintosh, etc.)
• Order is critical – list is hierarchical
• Note: Font sets are saved with a project
![Page 28: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/28.jpg)
Font Family
Fonts Common to an OS
• Arial• Comic Sans MS• Courier New• Marlette• Symbol• Times New Roman• Wingdings
Microsoft Windows• Times
• Courier
• Helvetica
• Symbol
• Chicago
• New York
• Geneva
• Monaco
• Palatino
Macintosh
![Page 29: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/29.jpg)
•Arial, Helvetica, Sans-serif
•Verdana, Arial, Helvetica, Sans-serif
•Times New Roman, Times, Serif
•Courier New, Courier, Mono
Font Family
Recommended Font Families
![Page 30: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/30.jpg)
Demo
Creating a Font Family in Flare
Font Family
![Page 31: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/31.jpg)
Font Sizing
There are two ways to define font sizes in an HTML environment
– Fixed Font Sizing– Relative Font Sizing
![Page 32: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/32.jpg)
Font Sizing
Fixed Font Sizing
• Fixed Font Sizing defines the size of fonts using absolute units such as points (pt), picas (pc), inches (in), centimeters (cm), etc.
• Because of the differences in how various types of computers display content, Fixed Font Sizing will ALWAYS cause fonts to display smaller on some systems (like the Macintosh)
![Page 33: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/33.jpg)
Font Sizing
Relative Font Sizing
• Relative Font Sizing defines the size of fonts using relative units such as percentages (%), the em unit (em), numerical values (1-7), and descriptive values (xx-small - xx-large), etc.
• Relative sizes refer to the font size of the parent element. This allows fonts to scale appropriately to different resolutions, browsers or platforms
![Page 34: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/34.jpg)
Font Sizing
Relative Font Size Guidelines
• Define the size for the normal style as 100% to provide consistent looking, legible text on any platform
• Define heading styles as a percentage of the normal text – e.g. Heading 1=120%, Heading 2=115%, etc.
![Page 35: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/35.jpg)
Demo
Setting Relative Font Sizes in Flare
Font Sizing
![Page 36: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/36.jpg)
Creating a Style Class
1. Open a stylesheet.2. If the Stylesheet Editor opens to the
Simplified view, click Advanced View.
3. Select the p style.4. Click Add Class in the Stylesheet
Editor toolbar.5. The New Style dialog box appears.6. Type a name for the style.
![Page 37: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/37.jpg)
Creating a Style Class
6. Click Create Style.The Create Style dialog box appears.
7. In the Name field, type a name for the new style without using spaces.
![Page 38: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/38.jpg)
Creating a Style Class
8. If you do not want to include a style property in the new style, click the check box next to the value to remove the checkmark.
9. If you want the new style to be applied to the selected content, select Create style and update the source element.
If you do not want the new style to be applied to the selected content, select Create style without updating the source element.
10.Click OK.11.The new style is added to the stylesheet.
![Page 39: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/39.jpg)
Auto-Numbering
Auto-Numbering can be used to allow for automated figure or table numbers, for government style paragraph numbering, or for automatically generating chapter numbers
•Create a custom style class
•Add auto-numbering to the style class
•Use the new style class in the Master Page
Link
![Page 40: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/40.jpg)
Cross-References
Cross-references allow for an extremely elegant single-source handling of linking
•Controlled by CSS
•Can look like standard hyperlinks for online publishing
•Converted to proper page number references when going to print
Link
![Page 41: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/41.jpg)
Suggested Reading List
1. Watch all of the built in Flare tutorial videos.
2. Read as much of the online help overview information as I could handle.
3. Build a couple or three test projects to get a feel for what is going on.
4. Coming from RoboHelp, get a copy of Scott's great book.
MadCap Flare for RoboHelp Users by Scott DeLoachISBN-13: 978-0615141459
![Page 42: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/42.jpg)
Suggested Reading List
HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide)by Elizabeth CastroISBN-13: 978-0-321-43084-7 Technical Writing 101: A Real-World Guide to Planning and Writing
Technical Documentationby Alan S. Pringle and Sarah O'KeefeISBN-13: 978-0970473325 CSS: The Definitive Guide, Second Edition by Eric MeyerISBN-13: 978-0596527334 DHTML and CSS for the World Wide Web, Third Edition (Visual Quickstart
Guide)by Jason TeagueISBN-13: 978-0-201-73084-5
![Page 43: MadCap Flare – Controlling Document Look and Feel with CSS](https://reader034.vdocuments.us/reader034/viewer/2022052522/54b4ca754a7959bd488b4630/html5/thumbnails/43.jpg)
Questions?