Hierarchy and Form

Find the Wikipedia entry for typography. Copy its HTML and link it to a CSS sheet in which you declare a value for every possible property of every HTML selector. Explore CSS as a means for the articulation of typographic hierarchy and the production of new visual forms. This will also be an experiment in going from web to print.

First pass: Redesign the Wikipedia page. Articulate hierarchy of content. Define values for every property of every tag in the HTML. Text should be legible. Develop a visual concept.

Second pass: Revise your stylesheet to make the text of only one selector visible. Experiment with ways to make the tag visible but the text invisible. As in the first pass, produce a maximum of visual activity. Explore CSS as a tool for the production of pure form. Consider this as a sort of visual writing exercise in which you produce a new text from the old.

Print two pages from each page.

+ Download Atom text editor
+ List of Selectors
+ CSS sheet
+ CSS reference

Notes:
All type. Turn off images and captions.
img {
display: none;
}

Break words when they extend horizontally beyond the viewport:
p {
    word-wrap: break-word;
}