Auckland Workshop: CSS Novice to Ninja in a Day

Today, it's not enough for technical communicators to be great content providers; you must also be well-versed in online content organisation and presentation techniques.

While content is still paramount, and HTML is of course critical to page structure, many technical communicators often lack skill in content styling, which has to do with setting the visual properties of content elements so they are attractive, engaging, and intuitive for readers. Good styling significantly improves the user experience, improving content acquisition, comprehension, and retention. Online content styling is accomplished with a technology called Cascading Style Sheets (CSS).

This full-day workshop takes you through modern CSS techniques from beginner to expert, starting with CSS background and basics, including the fundamental features of style sheets and how they apply to online pages. You'll then progress through the construction of CSS rules and learn how to tailor them to affect specific content in the desired ways. Finally, you'll explore advanced techniques and subjects and look ahead to the future of CSS technology.

Along the way, you'll take short quizzes to reinforce your knowledge and perform hands-on labs to practice your new skills. The result will be a beautifully styled HTML page to take away for later reference, experimenting, or just showing off!

The workshop will be presented in four parts, two in the morning and two in the afternoon.

Prerequisite knowledge: Some exposure to web page coding: HTML, CSS, and/or JavaScript, or some experience using authoring tools: RoboHelp, AuthorIT, Flare, Help & Manual, etc.

Hardware requirements: To participate in hands-on labs, students must provide their own PC (Windows or Mac), including a text editor (e.g., Notepad++, Brackets, Sublime) and a non-IE browser (e.g., Firefox, Chrome, Safari) and should download the hands-on lab files prior to the workshop.

Workshop details

Section 1: Novice

Introduction

Introduce web pages as combinations of content and behaviour, as provided by HTML and CSS, respectively. Discuss how the pieces work together to produce working web pages, why it's important for TCs to know CSS, and what benefits TCs gain from understanding how to style their content.

Lecture

Cover CSS background: why it was developed, how it affects HTML content and properly separates format from content. Distinguish declarative, pattern-matching languages like CSS from procedural, linear languages like JavaScript. Introduce rule construction and syntax, selectors, properties, and values. Explain cascade order, distinguish external, internal, and local formatting (scope), technical vs. practical rule order, CSS comments. Take a short quiz.

Lab

Edit a CSS stylesheet, add and modify CSS rules. Edit an HTML page to add a link to the stylesheet. View and verify page in browser.

Section 2: Intermediate

Lecture

Extend selector coverage to HTML element groups, single elements, and classes of elements. Introduce CSS classes: independent, dependent, and descendant (contextual). Cover pseudo-classes, pseudo-elements, units of measure, colour values. Explore more complex classes with multiple properties. Take a short quiz.

Lab

Edit HTML page to add a class attribute to an element. Edit CSS stylesheet, add and modify rules. View and verify page in browser.

Section 3: Advanced

Lecture

Explore the content property, attribute selectors, transitions, web fonts, and variables. Take a short quiz.

Lab

Edit CSS stylesheet, add and modify rules. Edit HTML page to add a web font link. View and verify page in browser.

Section 4: Ninja

Lecture

Introduction to some advanced CSS topics and related considerations. Responsive HTML /CSS design, mobile first, device/viewport independence, @media, etc. Includes discussion of modern HATs, CSS preprocessors, validation. Finish by exploring some pre-written CSS "widgets". No quiz for this section.

Lab

Examine additional stylesheets, edit HTML page to add links to them. Edit HTML page to include required content for "widget" features. View and verify page in browser.

Wrap-up

General question/answer session, revisit any stubborn bugs from labs.

Cost

Costs for the workshop are:

  • Members: $340 plus GST
  • Student members: $240 plus GST
  • Non-members: $480 plus GST

Note: Members = members of TechCommNZ and affiliated organisations: NZATD, ASTC, PRINZ.

Please read our payment terms and conditions.

Session details

Friday 3 November 2017

Time: 9:00am - 5:00pm Tea and coffee will be served on arrival from 8:30am.

Location: Quality Hotel Parnell 20 Gladstone Road Parnell, Auckland 1052 ( see map)

Please review the map or directions to the venue you will be visiting. You might find it useful to print them out for reference on the day of the workshop.

About the presenter

Dave Gash is a California-based technical publications specialist providing technology consulting and training for hypertext developers. A veteran software professional with over thirty years of development, documentation, and training experience, he holds degrees in Business and Computer Science and is well known in the tech pubs community as an enthusiastic and engaging technical instructor. Dave has been a Technical Writer for Google since 2012, and is a frequent presenter at User Assistance conferences, webinars, and workshops in the US and around the world.

Event Registration