Spectrum 2015 going online with style - an intro to css
•Download as PPT, PDF•
1 like•679 views
This document introduces CSS (Cascading Style Sheets) and provides an overview of some basic CSS concepts: - CSS allows authors to define styles that can be applied consistently throughout a project for formatting elements like headings, paragraphs, etc. This improves efficiency and consistency compared to local formatting. - A style sheet is a separate file containing all styles for a project. It cascades in that changes can inherit to child styles. - The document discusses CSS basics like style rules, the box model, relative sizing units, and different CSS levels. - It recommends best practices like defining styles upfront in a CSS before authoring and avoiding inline styles.
Report
Share
Related slideshows
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
More Related Content
What's hot
What's hot (17)
Similar to Spectrum 2015 going online with style - an intro to css
Similar to Spectrum 2015 going online with style - an intro to css (20)
More from Neil Perlin
More from Neil Perlin (15)
Recently uploaded
Recently uploaded (20)
Spectrum 2015 going online with style - an intro to css
- 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.
- 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.
- 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.
- 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