First Structure, Then Style

On top of a text’s underlying structure we add style

When you compare two or more of the 150+ styles you will find here on CSS Zen Gardens you will see how the very same text (coded in HTML) will appear differently depending on what styles (coded in CSS) are applied, as here

We support underlying structure with style, so that logical hierarchies in MS Word or on the web are reflected in formal hierarchies, beginning with size


H1 = 14pt

H2 = 12pt.

H3 = 12pt.

H4 = 11pt.

H5 = 10pt.

H6 = 10pt.


H1 = Bold

H2 = Italic

H3 = Underline

H4 = Normal

H5 = Italic

H6 = Normal

Space Before

H1 = +6

H2 = +6

H3 = +3

H4 = +3

H5 = +3

H6 = +3

We design styles to enhance legibility and convey feeling

Whitespace explains how graphic designers am to integrate formal elements across an entire page to the end of coherence and expression

Your mission is to learn how to see and control structure and style at the same time

  • The perceptual problem is understanding how you are learning how to see two sides of the same coin: are you seeing black, white, or the line inferred by either or both?
  • The technical problem in MS Word is governed by the Outline and Print Views, perhaps best introduced by opening this Outlining Template and alternatively clicking View/Print and View/Outline and
  • Get used to it (and master it!) by learning the shortcuts for both views by looking up “outlining shortcuts in ms word”, finding those for View/Print and View/Outline, preparing a sticky note on your pc using any of the following symbols, ⌃⌥⌘ fn ⇧⇥ ⌫→←↑↓☐✓⇒☞ ↩︎ ⌤, as your particular version of MS Word requires. (Develop this habit now! See my Learning how to learn MS Word)