Intro to CSS in MadCap Flare - MadWorld 2016, Scott DeLoach, ClickStart

Intro to CSS in MadCap Flare - MadWorld 2016, Scott DeLoach, ClickStart

• 1.
  © 2016 ClickStart– www.clickstart.net Intro to CSS Scott DeLoach – scott@clickstart.net ClickStart – www.clickstart.net In this session, I will provide an introduction to CSS: what it is, what it does, how it works, and how you can use it in Flare. Whether you’re migrating to Flare, creating or modifying style classes, or simply looking to maintain consistency, I’ll answer common questions Flare users often ask when they’re getting started with CSS. CSS: how it works  Inline, embedded, and external styles  Linking to a css file  Style rules  Inheritance  Selectors What is CSS? Recommendation from W3C: www.w3.org/TR/CSS Specifies formatting (colors, sizes, fonts, etc.) 1st release: 1996 current release: 3 How does CSS work? Sample style declaration p { color: green; } Do I have to know HTML? No, but it helps if you know the basic HTML tags. body h1-h6 p a img span ol, ul, li table, tr, th, td
• 2.
  © 2016 ClickStart– www.clickstart.net What's important: inline formatting Inline is bad: <span style="color: green;">Text text text...</span> Styles classes are good: <span class="myStyle">Text text text...</span> What's important: inheritance body { font-family: Arial; } p { font-size: 1em; } p.note { background-color: green; color: white; } What’s different about CSS in Flare? Flare-specific tags MadCap|tagname (ex: MadCap|dropDown) Flare-specific style properties "mc-" prefix (ex: mc-hyphenate) Whats new with CSS in Flare 12?  Redesigned advanced view  More measurement units  Tooltips display inheritance  Tablet and mobile mediums  mc-conditions property  Local and master stylesheets How do I create a stylesheet?  Select File > New.  Set the File Type to Stylesheet.  Select a Template.  Type a File Name and click OK. How do I know which stylesheet I'm using?  Target's master stylesheet > Project's master stylesheet > topic's stylesheet  "Allow local stylesheets" option
• 3.
  © 2016 ClickStart– www.clickstart.net How do I fix inline formatting?  Highlight the formatted content  Select Home > How do I create a style class? In a stylesheet:  Open the stylesheet.  Click Add Selector.  Select a tag (ex: p).  Type a Class Name and click OK. In a topic:  Format the content.  Highlight the content.  Select Home > Style Window.  Click Create Style.  Type a style name and click OK. How do I change the formatting? Stylesheet Editor - Simplified View Stylesheet Editor - Advanced View Internal Text Editor (right-click a stylesheet and select Open with... > Internal Text Editor) Other CSS editors (right-click a stylesheet and select Open with... > your CSS editor) How do I use different stylesheets for different topics? Select "Allow local stylesheets" option:  Project > Project Properties, Defaults tab  Target > General tab How do I use different formatting for print?  "print" medium  multiple stylesheets (not usually needed) How do I use different formatting for mobile?  "mobile" and tablet mediums  multiple stylesheets (not usually needed)  media queries (not usually needed)
• 4.
  © 2016 ClickStart– www.clickstart.net Media query example /* iphone 6 in landscape mode */ @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (width : 667px) and (height : 375px) and (orientation : landscape) and (color : 8) and (device-aspect-ratio : 375/667) and (aspect-ratio : 667/375) and (device-pixel-ratio : 2) and (-webkit-min-device-pixel-ratio : 2) {...} How do I use different formatting for different targets? Select it in your target: Target > General tab —OR— Use a medium and select it in your target: Target > Advanced tab Where can I learn more? Websites www.css-ref.com www.htmlhelp.com/reference/css/properties.html Books  CSS3: The Missing Manual - David McFarland  CSS3 Anthology: Take Your Sites to New Heights - Rachel Andrew  CSS: The Definitive Guide - Eric Meyer  CSS to the Point - Scott DeLoach Flare help system stylesheet docs.madcapsoftware.com/Styles/styles.css
• 5.
  © 2016 ClickStart– www.clickstart.net About the presenter Scott DeLoach is the Founder of ClickStart, where he provides training and consulting for MadCap Flare, embedded user assistance, JavaScript/jQuery, CSS, and HTML5. He has been developing browser-based help systems for 20 years, and he has received four Best in Show awards for his work from STC. Scott is a certified Flare and Doc-to-Help instructor, and he is the author of MadCap Flare Developer's Guide, CSS to the Point, HTML5 to the Point, and Word 2013 to the Point. For more information about Scott's books see www.lulu.com/clickstart. You can reach Scott at www.clickstart.net or by email at scott@clickstart.net.