The fundamentals of styling

BLUEPHRASE + CSS

Cascading Style Sheets

Most word processors allow you to apply typographic styling to your composition by selecting words and clicking a button. In contrast, Read Write Tools' desktop software has no buttons, and all typographic styling is accomplished with Cascading Style Sheets (CSS).

The Internet has numerous resources available for learning about the finer details of CSS. This note will give you the fundamentals. If you already know CSS, you'll be able to immediately apply your knowledge towards styling your compositions.

Formatting words

When your work is primarily composed of words rather than graphics, the starting point for your document design is typography, and the two essential CSS properties that you need to use are font-family and font-size.

The font-family property simply specifies which font to use for your words. In its simplist form it takes the name of a font that is installed on your device. But since your reader's device may not have the same fonts installed as you, it is common practice to list fallback fonts as well. And since even the fallback fonts are not guaranteed to be available, it's recommended to provide a generic font family to your font stack.

font-family: 'Times New Roman';                     /* font on your device */
font-family: 'Times New Roman', Georgia;            /* fallback fonts */
font-family: 'Times New Roman', Georgia, serif;     /* generic font family */
							

@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/merriweather/v19/RFda8w1V0eDZheqfcyQ4EOgdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
}
							

@import url('https://fonts.googleapis.com/css?family=Merriweather');
							

The font-size property specifies the height of each character. You specify this height using typographic points, which are equal to 1/72 of an inch. So to achieve a font size of 1/6 inch, you would specify a font size of 12pt.

The font size property can use other units besides points, of which the most important is the em, which is a relative unit, where 1em is equivalent to the size of the document body's font; 0.5em is half its size; 2em is twice its size; etc.

You can use CSS to modify the appearance of your words by adjusting properties of the font, such as style, weight, variant, letter spacing, line decorations, and text shadow. You can also transform your words, with the text transform property.

Formatting paragraphs

In prose writing, paragraphs form the most common assembly of your words. The arrangement of paragraphs serve as a conventional contract between the author and reader providing visual clues to the intended pace and rhythm of the composition.

CSS has three properties specifically intended for typesetting paragraphs: text-align, text-indent, and line-height. These properties have been generalized by CSS and can be applied to subject matter that is not strictly in paragraph form (headings, citations, captions, and such).

Paragraphs are justified using the CSS text-align property, which allows you to set the text of a paragraph flush left, flush right, centered, or fully justified.

The first line of a paragraph can be indented using the CSS text-indent property. Hanging indents can be achieved using a negative value paired with a left margin.

The line-height property controls the typographic leading of a paragraph (the distance from the top of a line to the top of the next line within a multiline paragraph). Small adjustments in the line height can have a significant effect on readability. Each font family has a different ideal line height, but in general sans serif fonts, such as Arial, need a slightly larger line height than serif fonts, such as Times New Roman.

Font size also has an important role in determining optimal line height. Large font sizes, such as those used with 24pt headings, should have smaller line-heights to make the type denser. Conversely, small font sizes, such as those used with 8pt "fine print", should have larger line-heights to expand the air between the type.

But more important than font family and font size, is the measure of the paragraph — that is, how many characters fit on a single line. Paragraphs with shorter measures can comfortably be read with smaller line heights, while paragraphs with longer measures need larger line heights, to allow the human eye to follow the words.

Formatting sections

Textual phrases and graphic objects can be set apart from each other with the CSS margin property, which sets the size of its vertical gutters, leaving an untouched area to the left and right. Similarly, the size of the horizontal slugs above and below can be set with the same margin property, allowing you to establish whitespace on any side of a component.

If you don't need to specify a margin on every side, you can use the special properties margin-top, margin-right, margin-bottom and margin-left.

While margins are most useful for larger divisions of your work, such as whole articles, sections, or individual "asides", CSS has extended the concept to apply to other rectangular areas, such as tables, lists, figures, images, and individual paragraphs. CSS margins can be applied to all of these.

The margin property expects four numbers, going clockwise around the area it is applied to: 1) top margin, 2) right margin, 3) bottom margin, 4) left margin.

One aspect of margins that is sometimes confusing is that, in many circumstances, the bottom margin of one area is "collapsed" into the top margin of the next area. When this occurs, the larger of the two adjacent margins is applied. The complete set of rules regarding when this occurs includes special cases relating to borders, padding, floating elements, and position; this is an advanced topic that is not covered here.

In addition to margins, any phrase can have lines drawn on each side of it forming a rectangular border. This is accomplished with the CSS border property. If desirable, each of the four sides of the rectangle can be drawn in a distinct way using the individual property names: border-top, border-right, border-bottom, and border-left.

The CSS properties of each side's line comprise color, thickness, and line style. Colors can be specified using any of the methods described in the color section of this note. Thickness is typically specified using pixels (px). Line style is specified using one of the special values: solid, dotted, dashed, double, groove, ridge, inset, or outset.

The borders described above are drawn outside the textual phrase or graphic, effectively "framing" the component. CSS also has an outline property which draws lines around the component, even to the point of overwriting the ascenders and descenders of individual glyphs.

This special outline is intended for use as a "focus" indicator, highlighting for the reader which component is the active target of the keyboard. Use the outline-offset property to specify how far from the outer edges to draw these lines: positive values shift the lines outside the true border; negative values shift the lines inside the true border.

The outline property expects the same three values as the border property. The outline-offset property expects a distance that is typically provided using pixels (px). When setting this property it is a good idea to use colors that are partially transparent if lines are drawn inside the true border, so that your subject matter is not obscured.

The margins described above define the whitespace around a component that is outside of any borders that might be drawn around a component. There is another CSS property that can be specified on textual phrases and graphic objects, which is inside of any borders that might be drawn. This is the padding property. Just like its margin counterpart, if you don't need to set padding on all four sides of an item, you can use the special properties padding-top, padding-right, padding-bottom, and padding-left.

You can specify either margin or padding on any component of your composition, or can you can specify both if you need to.

One aspect of padding that is different from margins, is that padding never "collapses". You can use this to your advantage in situations where you know that you don't want collapsing behavior.

Sometimes it's not obvious whether you should use margin or padding to achieve the gutters and slugs that you need. If you've defined a border or box-shadow on your component, the choice of margin versus padding is significant: do you want the whitespace to be inside or outside of the border? When your component has neither border nor background nor box-shadow, the choice between margin and padding is up to you; both achieve similar results, with the "collapsing" feature of margins being the only major difference.

Measurement units

Some CSS properties expect values that can be defined using more than one unit of measure. We saw this with the font-size property, which expects typographic units, and we saw it with margins, border, border-radius, box-shadow, and padding, which all expect device units. Units are also expected for the sizing (width and height) and positioning (top, right, bottom, and left) properties described later.

Colors

CSS allows you to set the color of your typography using the color property; the fill color of rectangular areas with the background-color property; and the stroke color of lines with the border-color and outline-color properties.

There are two color models that can be used to specify values. The red-green-blue additive model specifies how much of each primary color to blend together. In contrast. the hue-saturation-lightness model, represents hue as a 360 degree circle sweeping through the spectrum: red (0°), yellow(60°), green (120°), cyan (180°), blue (240°), magenta (300°); then represents the intensity of that color as a saturation percentage; and finally represents the tone of that color with a lightness percentage.

Using CSS it is not possible to directly specify color values using the CMYK, LAB, or Pantone models.

You can set the degree of transparency on any component, including images, using the opacity property, which expects a value between 0.0 (transparent) and 1.0 (opaque). The opacity property affects both foreground and background, which may make a component's text unreadable; it may be more appropriate to specify a component's background using an RGBA color value instead.

Flow

Documents written for digital screens follow a set of rules that define how your composition is displayed. This "flow" is straightforward and easy to understand: your composition flows from left to right and from top to bottom. (Unless, of course, if you are writing in Arabic or Hebrew where the flow is from right to left.)

Based on the knowledge you now have regarding margins, borders and padding, you can surmise that the browser will begin writing your words at a point just after the left side margin, border and padding that you specified, continuing from left to right looking for a suitable place to halt one line and begin the next, leaving room for the right side padding, border and margin. The important point here is that horizontal flow is bounded.

In contrast, vertical flow is not bounded. As one line ends and another begins, the browser does not halt when it reaches the bottom of the screen. Instead, the browser expands the size of the writing area beyond the screen's limits, and activates a vertical scrollbar to allow readers to reach the words at the bottom.

Of course the ability to scroll vertically only applies to digital screens. When your composition is printed on paper or converted to a PDF, your composition will be broken into pages.

For precise control of your printed layout's dimensions, you use the @page rule, which has properties for size, margins, padding, border, orphans, widows, and page breaks. Distinct verso and recto pages can be specified using one page rule defined for :right and another for :left, allowing you to mirror your margins. This is important when your printed pages need a bit more whitespace to the middle for the bindery. You can also define a distinct page rule for the :first page.

Page rules should define all properties using one of the physical measurement units (in, cm, or mm), not relative units.

At a minimum, a page rule must include a size property, which expects two values: a width and a height. Beyond that, the most important property is margin, which uses the same syntax that you've already learned above.

@page {
    size: 6in 9in;
    margin-top: 1.0in;
    margin-bottom: 1.25in;
}
@page:left {
    margin-left: 0.75in;
    margin-right: 1.0in;
}
@page:right {
    margin-left: 1.0in;
    margin-right: 0.75in;
}
						

Summary

rachael@mail.readwritetools.com

rachael