An introduction to CSS (cascading style sheets) for technical communicators.

1. GOING ONLINE WITH STYLES:
AN INTRODUCTION TO CSS
Neil Perlin
Hyper/Word Services
2015

2. Go ing O nline With Style
An Intro to CSS

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

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

5. Intro to CSS

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

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

8. “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.

9. Definition 1 Example

10. “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.

11. “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.

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

13. 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;”>

14. 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…

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

16. Some CSS
Basics

17. 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;}

18. Multi-Declaration Style Blocks
Multi declaration block styles often look like:
– Selector
{
property:value;
property:value;
}
– h2
{
color: red;
font-family: Verdana;
}

19. 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/

20. Relative Size Units
We’re used to point-based sizes – 72pt = 1” –
from our print experience – familiar and simple.
But…

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

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

23. 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…

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

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

26. Some Best
Practices

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

28. Sources of
Information

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

30. Hyper/Word Services Offers…
Training • Consulting • Development
Flare • Flare CSS • Flare Single Sourcing
RoboHelp • RoboHelp CSS • RoboHelp
HTML5
ViziApps
Single sourcing • Structured authoring

31. Thank you... Questions?
978-657-5464
nperlin@nperlin.cnc.net
www.hyperword.com
Twitter: NeilEric