Lead Writer/s: Swapnil Ogale, Kieran Morgan | Peer Review: John New | Expert Reviewer/s: David Whitbread, Deirdre Wilson | Managing Editor: Kieran Morgan

This chapter focuses on the use of stylesheets in document design. It explores the theory behind stylesheets, explaining their role in separating presentation from content and structure. The chapter further explains key graphic design principles—Contrast, Alignment, Repetition, and Proximity (CARP)—and visual reading patterns. It provides practical examples to demonstrate the effectiveness of well-designed stylesheets. This chapter is essential for anyone looking to master the art of document design in technical writing.

Who Should Read This
• Aspiring Technical Writers • Beginner Technical Writers • Cross-Domain Professionals
Table of Contents: Technical Writing Process
Previous: Chapter 13: Design Structure	Next: Chapter 15: Design Templates

1. Introduction

In this chapter, we introduce you to the theory and practice of designing a stylesheet for your documents. A stylesheet governs the visual styling—the fonts, colors, spacing, and so on—that you immediately see when you open a document.

Have you ever flicked through a book of house designs, finding yourself drawn to one and hating another, purely based on aesthetics such as color and pattern? This is like the “presentation” layer in a document—it’s the visual rendition that we all see when we walk into a house: the color of the paint on the walls, the choice of decorations, and so on.

Oftentimes, you’ll find that two houses with the same floorplan look completely different. Perhaps one has a traditionally light and elegant Hamptons-style facade, while another features a modern aesthetic with brushed steel and dark timbers and paints. This concept—the same underlying structure with multiple visual design options—is similar to a stylesheet for a document. Stylesheets set up rules for formatting the visual elements in your document, providing a convenient way of changing the presentation layout instantaneously. That’s what makes stylesheets such powerful tools—they remove the need for laboriously updating every document any time a minor design change is made.

Imagine if you could do that with your house!

Designing a stylesheet is something every technical writer needs to understand. In this chapter, we explore several underpinning concepts. The first is the separation of presentation, content, and structure, which provides a layered view of a document, similar to our house metaphor above. The next is the graphic design principles that combine to make your document more visually effective—Contrast, Alignment, Repetition, and Proximity (CARP). Another is the visual patterns of reading that show how we tend to read onscreen in geometric patterns, reinforcing the importance of the alignment principle.

Finally, we’ll give you some worked examples of these principles being applied in the creation of a simple stylesheet. This should give you a grasp of the fundamentals of the theory and practice of designing stylesheets.

2. [Theory] Separation of Presentation, Content, and Structure

The separation of presentation, content, and structure is a foundational concept in technical writing, publishing, and content management.¹ It’s something every new technical writer needs to grasp, as it has numerous benefits, which we’ll discuss shortly.

Think of presentation, content, and structure as layers, each building on and reinforcing the others. At the bottom is the content layer, which is overlaid by the successive layers of structure and presentation to create a whole document.

Here’s how it breaks down:

• Content. First, let’s consider the foundation: the actual text of your document—the words and images you put in there, and any semantic markup tags you apply to it, such as “p” (paragraph) or “h1" (heading). This is like the bricks, mortar, and timber that make up your house. The content layer contains the building blocks of meaning, which is why it forms the foundation.
• Structure. In Chapter 15: Design Structure, we learned that structure refers to the organization of information into taxonomies within a technical document, such as the headings that make up the table of contents. Think of document structure like a blueprint for building a house—similar to the floor plan you might see when browsing real estate listings. It organizes content in its correct place relative to other information.
• Presentation. Finally, the presentation layer adds a visual element—font sizes, spacing, colors, and so on—over the structure and content layers. Think of it like the paint job inside a house—it’s akin to the interior design which appeals (or not) to your sense of style. Just like good interior design also improves the “usability” of a house, a good presentation layer makes your document more effective by making it easier for users to find the information they’re after.

What Does That Mean?

Content The actual material of the document, consisting of text, images, and embedded markup tags.2 It forms the primary substance and information conveyed in the document. Structure The organization of elements within a document, including headings, sections, and overall layout, which establishes the framework and logical flow of the content. Presentation The visual styling of the document, including aspects like font size, spacing, color, and layout, making it more user-friendly and effective in communication.

3. [Theory] Stylesheets

In documentation, the content, structure, and presentation layers each complement one another. Just like you wouldn’t build a home without a blueprint, good-quality materials, and consideration for interior design, you wouldn’t design a document without considering the distinct but related layers of content, structure, and presentation, and how they work together to make your document a functional whole.

So, what’s a stylesheet?

• Stylesheet: A set of rules for consistently styling the content layer. It makes your content layer independent of your presentation layer, so that one can be updated without affecting the other. It governs the visual design of each element within a document, rather than specifying it for each element. For example, in a stylesheet, you can have a rule that says, “All heading 1s must be 18-point Arial bold,” instead of having to manually style each individual heading 1 across multiple documents.

Think of stylesheets as an additional layer overlaid on the layers of content, structure, and presentation.

Here are some examples of the many benefits of stylesheets:

• They enable writers to apply visual elements such as fonts, layouts, and sizes across numerous documents without altering the underlying content.
• They simplify any changes from a slight design adjustment, avoiding it having to be a fully-fledged redesign of multiple documents.
• They facilitate the application of a consistent visual brand across numerous documents.
• They facilitate the repurposing of content into multiple formats, like from a content management system into Adobe PDF, Microsoft Word, HTML, and so on.

What Does That Mean?

Stylesheet A set of rules governing the visual design of a document, enabling the independent update of presentation elements like fonts, colors, and layout, without affecting the content.

Insight

Form vs. Function: An Age-Old Conundrum The separation of content and presentation taps into an age-old debate: form vs. function. The Greek philosopher Aristotle separated verbal communication into logos (the logic of the argument) and lexis (the style and delivery of the speech). This dichotomy is mirrored in technical writing through the separation of content (function) and presentation (form). While some argue that the fusion of style and content is an inseparable art form,3 for technical writers, maintaining a clear distinction is essential. The separation allows for efficient updating of documents, ensuring that changes in design (form) don’t hinder the management of the information (function).

4. [Theory] Contrast, Alignment, Repetition, Proximity (CARP)

Having a good presentation layer doesn’t just make your documentation look better—it helps users grasp the information more effectively by drawing on principles rooted in research.

Although the visual design process might seem to an outsider like an unruly exercise in unbridled creativity, most graphic designers are taught to adhere to design principles, which guide their work. We like the design principles in Robin Williams’ popular book, The Non-Designer’s Design Book,⁴ for their memorability and ease of use.

Williams’ design principles can be memorized using the acronym CARP: Contrast, Alignment, Repetition, and Proximity. They apply just as much to the design of the presentation layer of a technical document as they do to the design of a house—or pretty much anything else. Once you understand these fundamental principles, you’ll start to notice them everywhere.

We’ve used a worked example of our lead writer, Swapnil’s, business card to illustrate the concept. We overlay each of the CARP principles in turn to transform it from an unformatted document into a visually appealing, user-friendly piece of content that successfully achieves its purpose: facilitating information-sharing with a professional contact.

4.1. Starting Point: Unformatted

Let’s start with an unformatted business card. Think of this as our base content layer, onto which we’ll overlay a presentation layer using the CARP principles. The unformatted version has all the correct components that a business card should have, including a logo, but it’s almost entirely devoid of design. As a consequence, it’s not very usable—it’s hard to visually distinguish the different items on the page:

4.2. C: Contrast

What is Contrast? Contrast makes a visual design element distinguishable from other objects and prevents it from blending into the background. Contrast directs the reader’s attention and makes certain elements stand out. This facilitates quick navigation and helps the audience speedily identify the most important information. You can achieve contrast by varying color, size, shape, and typography to highlight key parts of a document, such as titles and headings, making them easily noticeable.

Worked Example: In our worked example, we’ve applied contrast to make certain elements of Swapnil’s business card more prominent:

• Increased Font Sizes: The font size for Swapnil’s name and job title is increased to make these elements immediately noticeable. These are the most important details that Swapnil thinks should stand out the most, along with his logo.
• Different Typeface: The typeface for Swapnil’s name is different from the rest of the business card, making it stand out even more.
• Use of Color: Swapnil’s job title is highlighted in orange, immediately differentiating it from his name and the other elements on the page. This indicates that it’s a vital detail for Swapnil that he wants to direct the reader’s attention to.
• Use of Capitalization: The headings—e.g., job title, email address, and so on—have been capitalized, differentiating them from the information they contain. This helps make the card more “scannable” so a reader can quickly find the information they’re after, such as a website address.
• Use of Bold: Additionally, the subheadings have been highlighted using bold. This makes them even more easily distinguishable from the information they contain.

Notice how this simple technique immediately makes the key information much easier to distinguish? Using contrasting font types, colors, and emphases (bold, italics, and so on) provides a clear visual cue to the document’s structure—the headings and subheadings that form the information hierarchy, even in a straightforward document like a business card.

Note

Note on Color Usage When applying color for contrast, it’s important to consider how your design will be perceived under different circumstances. Not everyone perceives colors in the same way, and your document may be printed in black and white, potentially diminishing the intended contrast. For example, using red for certain elements and green for others might be effective in a color design, but if these are printed in grayscale, they might appear similar, losing their distinctive meanings. Always ensure that your use of contrast remains effective and clear under various viewing conditions.

4.3. A: Alignment

What Is Alignment? Alignment is the practice of lining up design elements along an invisible line—left, right, or center. Strong alignment doesn’t just create a striking, neat-looking effect; it complements the way we scan and read pages to find the information we’re after. In particular, using left alignment complements the way we naturally visually process information, making for more user-friendly documents. This is called the F pattern, and it’s explained in the note below.

Worked Example: In our worked example, strong alignment has been applied to improve readability and make it appear less cluttered:

• Left Alignment: The two distinct groupings of information on Swapnil’s card have been left-aligned. This creates a neat, two-column effect, distinguishing Swapnil’s name and logo from his contact details.
• Top Alignment: The left and right columns have been aligned to the same invisible top line. This makes the columns more visually connected, so they look like they’re related components of the same document.

Insight

Alignment and the Visual Patterns of Reading The alignment principle in CARP is supported by research on the visual patterns of reading. For more detailed insights, see Chapter 16: Design Stylesheet > [Theory] Visual Patterns of Reading below.

4.4. R: Repetition

What is Repetition? Repetition is the reuse of a visual element consistently, such as color, shapes, typography, and other elements, to establish a theme. It establishes visual coherence and alignment with brand identity. In corporate documents and templates, the organization’s colors are often echoed in headings and backgrounds to build a unified visual impression. Typically, a color palette derived from the logo is reused across corporate templates and marketing materials to strengthen branding. This palette is usually found in brand guidelines or as preset styles in templates.

Worked Example: In our worked example, repetition has been applied to reinforce Swapnil’s branding:

• Use of Color: The orange and black colors of Swapnil’s business card create a striking visual design. The same colors have been used to create a color bar running across the top and bottom of Swapnil’s business card, reinforcing his logo.
• Use of Shapes: The black bars in Swapnil’s logo are a design element that has been reused in the color bars on the top and bottom of his card. This creates a strong visual connection with his logo and helps establish a brand.
• Use of a Watermark: Swapnil’s logo has been repeated as a watermark, fading into the bottom of the card. This creates another element that visually reinforces his logo and brand.

4.5. P: Proximity

What is Proximity? Proximity is the close physical grouping of related elements to establish a visual relationship between them. In essence, proximity implies a relationship in the mind of the audience. Conversely, if you don’t want things to appear related, use white space to keep them visually distant.

Worked Example: In our worked example, we’ve used proximity and separation to group related items and differentiate unrelated ones:

• Separation of Name and Logo from Contact Details: The card has now been split into two pages, one for Swapnil’s name, title, and logo, and the other for his contact details. This visual separation distances Swapnil’s branding from the sundry details of how to contact him, allowing his brand to make a more dramatic visual impact on its own.
• Grouping of Items: On the second page, you’ll notice that the contact details have been grouped into the left column, while his call-to-action has been grouped on the right. This establishes two separate “zones”—one for contact details and one for his call-to-action. Additionally, the call-to-action uses the Z pattern of reading, being placed in the bottom right-hand corner of the document.
• Use of White Space: Within each “zone”, white space has been used to differentiate each subsection from the others, separating things like physical mailing addresses from email addresses. The use of white space creates subzones for distinct subcategories of information.

5. [Theory] Visual Patterns of Reading

In The Design Manual, David Whitbread explains that research shows how we tend to read onscreen in geometric patterns.⁵ This reinforces the importance of strong alignment—the “A” in CARP—it’s not just visually appealing; it complements how we visually process a page.

• The F Pattern: Western audiences tend to read in a left-to-right, top-down F pattern: we scan the top of a page, repeat this again a little lower, and then scan downwards vertically along the left side of the page.
• The Layer-Cake Pattern: A variation of the F pattern where we scan the headings on a page, in an F pattern, and ignore the text until we find what we’re looking for.
• The Z Pattern: The way we tend to scan image-heavy pages, using a Z pattern to quickly scan the relevant information. Marketing professionals understand this effect, which is why they often place call-to-action buttons (such as “Buy Now”) on the bottom-right.

Which Pattern Works Best?

The Z pattern is most effective for standalone cards, ads, or landing pages—layouts viewed in their entirety without scrolling. The F and Layer-Cake patterns are better suited for pages that extend downward with scrolling.

6. [Practice] Design Stylesheet

We’ve previously discussed the importance of separating presentation from content. This involves using a stylesheet to apply formatting across the document, rather than formatting each element individually. A stylesheet contains formatting rules for predefined document elements such as headings, body text, tables, and lists.

No matter the tools used, the underlying principle remains the same: a stylesheet, often stored as a separate file from the content, applies presentation. This allows for independent updates. Creating a stylesheet is an advanced technical writing skill. It requires interpreting and applying your organization’s Brand Guidelines in collaboration with the marketing team. In the absence of Brand Guidelines, creativity is key. You’ll need to draw from elements of your organization’s logo, branding, and existing templates to craft a new stylesheet.

The steps in designing a stylesheet are as follows, with support provided by our template: Chapter 16 Design Stylesheet > 7. [Template] Visual Design Principles Checklist. The next section will include a worked example of these steps:

1. Identify Key Elements to Style: List and describe common document elements such as headings, body text, tables, and lists that will need consistent styling.
2. Choose Your Tools: Select the appropriate tools, like Microsoft Word or CSS, based on project requirements or your organization’s preferred technologies.
3. Apply Brand Guidelines: Analyze the Brand Guidelines to understand your organization’s presentation requirements. Collaborate with marketing teams as needed. If no guidelines are available, use your organization’s logo, branding, and templates as inspiration.
4. Develop Styles for Each Element: Craft styles for each key element, considering font size, color, alignment, and so on. Keep the CARP principles (Contrast, Alignment, Repetition, Proximity) in mind as a design guide. Refer to our template for detailed considerations: Chapter 16: Design Stylesheet > 7. [Template] Visual Design Principles Checklist.
5. Test and Iterate: Test the stylesheet across formats and devices, ensuring it works for all publication formats.
6. Publishing: Release the stylesheet into your team or organization’s template library for use.

Insight

Did Mobile Kill My Docs? Cross-Platform Design When developing technical documentation, it’s important to consider not just the content, but also the platform through which your audience will engage with it. The choice between a desktop and a mobile device brings unique challenges and opportunities that can significantly impact the effectiveness of your documentation. Here are some key considerations: • Screen Size: Test your documentation on various devices with different screen sizes to ensure accessibility and a positive user experience. The contrast in screen sizes between desktop and mobile devices is significant. • Touch vs Click: Tailor your documentation for the interaction methods of your audience—mouse clicks for desktop users and touch gestures for mobile users. • Tables: Be cautious with using formats like tables, which may not render well on mobile devices. By being attentive to how your audience will interact with your content, you can create documentation that is not only informative but also accessible and engaging across the key platforms: desktop and mobile.

7. [Sample] Sample Business Card Stylesheet

In the following section, we provide a worked example to illustrate the stylesheet behind Swapnil’s business card in Microsoft Word and Cascading Style Sheets (CSS). CSS is a computer language used to lay out web pages in HTML.

Here are the distinct elements of Swapnil’s business card for which we are going to create styles:

1. Element 1: Page
2. Element 2: Title
3. Element 3: Heading 1
4. Element 4: Heading 2
5. Element 5: QR Code
6. Element 6: Emphasis
7. Element 7: Body Text (not shown in diagram)

Note

Using Stylesheets in Different Technologies • Microsoft Word: In Microsoft Word, use the Styles pane to design styles within a document. Save the stylesheet you have created as a Style Set, which you can apply to other documents or use as a template. • CSS Stylesheets: To create a stylesheet in CSS (Cascading Style Sheets), you will need to define styles in a .css file, which can then be linked to your HTML document.

Stylesheet in Microsoft Word	Stylesheet in CSS
Page • Margins: Left: 0.6cm; Right: 0.6cm; Top: 0.6cm; Bottom: 0.6cm • Paper: Width: 9.1cm; Height: 5.5cm • Header and Footer: Header distance from edge: 0cm; Footer distance from edge: 0.5cm	@media print { @page { size: 9.1cm 5.5cm; margin: 0.6cm; /* Note: CSS does not support specifying distances for headers and footers from the edge. This is typically controlled by the browser’s print settings or the properties of the printing device. */ } }
Title • Paragraph Style: Title • Font: Verdana, 18pt • Alignment: Left • Indentation: Left: 0cm; Right: 0cm • Spacing: Before: 36pt; After: 6pt; Line spacing: Multiple 1.08	.title { font-family: Verdana; font-size: 18pt; text-align: left; margin-left: 0; margin-right: 0; margin-top: 36pt; margin-bottom: 6pt; line-height: 1.08; }
Heading 1 • Paragraph Style: Heading 1 • Font: Arial, 8pt, Bold, Custom Color (RGB(209,84,37)) • Effects: All caps • Alignment: Left • Outline Level: Level 1 • Indentation: Left: 0cm; Right: 0cm • Spacing: Before: 0pt; After: 0pt; Line spacing: Multiple 1.08	.h1 { font-family: Arial; font-size: 8pt; font-weight: bold; color: rgb(209, 84, 37); text-transform: uppercase; text-align: left; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; line-height: 1.08; }
Heading 2 • Paragraph Style: Heading 2 • Font: Arial, 8pt, Bold • Effects: All caps • Alignment: Left • Outline Level: Level 2 • Indentation: Left: 0cm; Right: 0cm • Spacing: Before: 12pt; After: 0pt; Line spacing: Multiple 1.08	.h2 { font-family: Arial; font-size: 8pt; font-weight: bold; text-transform: uppercase; text-align: left; margin-left: 0; margin-right: 0; margin-top: 12pt; margin-bottom: 0; line-height: 1.08; }
Emphasis • Character Style: Emphasis • Font: Arial, 8pt, Custom Color (RGB(209,84,37))	.emphasis { font-family: Arial; font-size: 8pt; color: rgb(209, 84, 37); }
QR Code Paragraph • Style: QR Code • Font: Arial, 8pt • Alignment: Centered • Indentation: Left: 0cm; Right: 0cm • Spacing: Before: 10pt; After: 10pt; Line spacing: Multiple 1.08	.qr-code { font-family: Arial; font-size: 8pt; text-align: center; margin-left: 0; margin-right: 0; margin-top: 10pt; margin-bottom: 10pt; line-height: 1.08; }
Body Text (Normal) • Paragraph Style: Normal • Font: Arial, 8pt • Indentation: Left: 0cm; Right: 0cm • Spacing: Before: 0pt; After: 0pt; Line spacing: Multiple 1.08	.body-text { font-family: Arial; font-size: 8pt; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; line-height: 1.08; }

8. [Template] Visual Design Principles Checklist for Technical Writers

Visual Design Principles Checklist for Technical Writers

1. Clark, D. (2007). Content Management and the Separation of Presentation and Content. Technical Communication Quarterly, 17:1, 35-60. DOI:10.1080/10572250701588624 ↩︎
2. Cohen, M. (2004, May 14). Separation: the web Designer’s dilemma. A List Apart. https://alistapart.com/article/separationdilemma/ ↩︎
3. Clark, D. (2007). Content Management and the Separation of Presentation and Content. Technical Communication Quarterly, 17:1, 35-60. DOI:10.1080/10572250701588624, p. 36. ↩︎
4. Williams, R. (2014, 4th ed.). The Non-Designer’s Design Book. Peachpit Press. ↩︎
5. Whitbread, D. (2023, 3rd ed.). The Design Manual. Whitbread, Canberra, p. 396. ↩︎