GOING ONLINE WITH STYLES:AN INTRODUCTION TO CSS

Neil Perlin

Hyper/Word Services

2015

G o ing O nline With StyleAn Intro to CSS

Who Am I?

� Neil Perlin - Hyper/Word Services.– Internationally recognized content consultant.– Help clients create effective, efficient, flexible

content in anything from hard-copy to mobile.– Certified – RoboHelp, Flare, Mimic, Viziapps.– Working in CSS since 1999-ish.– Train and consult on CSS for Flare and RoboHelp.

Contents� Intro to CSS� Some CSS Basics� Why This Matters� Some Best Practices� Sources of Information

Intro to CSS

What’s a Style?

� A named set of properties for a type of content.– Like H1 style set as 16pt, Navy, Arial, Bold.

» You must apply a style, although your authoring tool does that for you in certain cases, such as applying h1 and p for new topics.

» But if you then have to change a property, you need only do so once, for the style – the change applies everywhere you applied the style.

What’s a Style Sheet?

� A file that contains all (ideally) styles and their properties for all topics in a project.

� Called a cascading style sheet, or “CSS”.– Like Word’s styles conceptually but:

» An open standard rather than MS-proprietary.» Separate from the content template rather than a

part of it.

“Cascading” – Definition 1

� “Cascade” of three ways to apply styles.– External – CSS file to which each topic links.

» Highest efficiency, lowest priority.

– Embedded – Stored in topic to which styles apply.» Middle efficiency, middle priority.

– Inline/Local – Formatting via text formatting toolbar.

» Lowest efficiency, highest priority.

Definition 1 Example

“Cascading” – Definition 2

� “Child” styles inherit settings from their parent styles.– For example, if Normal style uses Arial and you add

a child style based on Normal, the child uses Arial.

– So the more properties you can define in a parent style, the more efficient your CSS development.

“Cascading” Example

� For example, the styles under “p” are child styles (“sub-classes”) of p.

� Changing a property of p changes that property in all the p child styles.

A Terminology Issue

� Note the presence of the “body” style.

� In HTML, “body” is the top-level parent style.

� Changing a property of “body” changes that property for all other styles in the CSS unless you set those other styles specifically.

� So, again, defining global styles at the different parent levels can produce more efficient CSSs.

Why Use Styles and Style Sheets?

� …instead of local formatting?

– Cleaner, simpler code – this:<p>

– Versus this:

<p class=“abc” style=“margin-left: 12px; text-align: left;”>

Why Use Styles and Style Sheets?

� Plus:– Efficiency – Style changes apply across the entire

project.– Consistency – If all authors use one CSS (correctly),

everyone’s outputs standardize.– Extensibility – Styles may form the basis for other

processing, like Word file import into a HAT (help authoring tool).

– The future…

How To Use Styles and CSSs

� Create your CSS.� Apply the CSS to all your topics.

– You can apply different CSSs to different topics in the same project but this is rare.

� Then apply styles from the CSS to types of text.– H1 style to all level 1 heads, H2 to subheads, etc.– Tedious, but your HAT applies basic styles – H1

and Normal – for you.

Some CSS Basics

Style Rules� Structure of a style rule.

– Selector {property:value;} » Where property: value is the “declaration block”» Such as h2 {color: red;}

– Can apply multiple properties to multiple selectors at once.

» h1, h2 {color: red;} or» h2 {color: red; font-family: Verdana;} or» h1, h2 {color: red; font-family: Verdana;}

Multi-Declaration Style Blocks� Multi declaration block styles often look like:

– Selector { property:value; property:value;}

– h2 { color: red; font-family: Verdana;}

The Box Model

� Ever wonder why you sometimes have to use negative left indents to get list items or images to align correctly?

» http://chimera.labs.oreilly.com/

Relative Size Units� We’re used to point-based sizes – 72pt = 1” –

from our print experience – familiar and simple.

� But…

Problems With Points� Points being fixed, are fine for print output but

have two problems in online outputs:– Text in pts can’t be resized by a browser user.

– Text in pts can’t be resized automatically by a browser.

� Instead, use:– % – Based on the default size of normal on any

given browser – 100%.– Em – Initially = the height of the capital M in each

browser’s font set. Now = a computed font-size property for the style it’s based on – aka it varies.

Why Relative Sizes?� An image at an absolute

width in a too-narrow space.– Note the horizontal scroll bar.

� And at a relative width in that same space.– No horizontal scroll bar; the

50% width makes a browser show the image at 50% of the available space – “relative”.

– In effect, each browser handles that formatting for you.

And Much More…

� Multiple ways to specify colors.� Cool rounded box corners (under CSS3).� Ways to create unnumbered items in numbered

lists as a style.� Ability to add “user notification” (tips, notes,

etc.) icons as a style rather than by using a table.� Ability to insert horizontally aligned graphics

that automatically change to vertical alignment as the screen narrows.

� And so on…

CSS Levels� CSS3 is an extension of 2.� CSS3 is a modularized standard, so different

areas can move faster than others.– But CSS2 syntax and commands are still valid.

Why This Matters� How does this affect tech comm? Two ways:

– General project control – again, this<p> versus this <p class=“abc” style=“margin-left: 12px; text-align: left;”>

– Responsive design.

Some Best Practices

Some Best Practices…

� At a minimum…– Define your CSS before starting a project and then

DON’T MESS WITH IT!» Unless you have to…

– Put all style code in the CSS, none in the topic.– Don’t change de facto standards like link settings.– KISS and consider maintainability – the !important

property saga.– Stay out of the code.– Document it.

Sources of Information

Sources

� Online – W3C at http://www.w3.org/Style/CSS/� Books:

– Cascading Style Sheets: Designing for the Web (3rd Edition), Hakon Wium Lie, Bert Bos

� Training:– Public classes.– Vendor classes, like MadCap’s CSS class.

– Other classes, like my RoboHelp CSS class.

Hyper/Word Services Offers…

Training • Consulting • DevelopmentFlare • Flare CSS • Flare Single SourcingRoboHelp • RoboHelp CSS • RoboHelp

HTML5ViziAppsSingle sourcing • Structured authoring

Thank you... Questions?

978-657-5464nperlin@nperlin.cnc.netwww.hyperword.com

Twitter: NeilEric