X

The fundamentals of styling

Blue-phrase + CSS

This note provides a guide to understanding how to use CSS with BLUE-PHRASE for these types of tasks:

  1. formatting words with fonts and special effects
  2. formatting paragraphs with justification, indentation, and margins
  3. formatting sections with backgrounds, padding, and borders
  4. working with different measurement units
  5. using colors
  6. adjusting the flow of your compositions

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 examples
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 */
advanced topic: web fonts

Nowadays it's common to use fonts that are not installed on your device, but come from a font foundry or an online service.

To use these Web fonts, you need to add an @font-face rule to your CSS that specifies the font-family, font-style, font-weight, and src properties. For example the non-italic, non-bold Merriweather font from Google Fonts is specified like this:

@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');
}

Conveniently, Google Fonts provides a less cumbersome alternative to this with the @import statement. This example is equivalent to the above:

@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.

font-size examples
CSS property example
font-size: 10pt; A Memorable and Rewarding Life
font-size: 12pt; A Memorable and Rewarding Life
font-size: 14pt; A Memorable and Rewarding Life
   
font-size: 0.75em; A Memorable and Rewarding Life
font-size: 1em; A Memorable and Rewarding Life
font-size: 1.5em; A Memorable and Rewarding Life

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.

advanced topic: special word effects
CSS property example
font-style: italic; A Memorable and Rewarding Life
   
font-weight: bold; A Memorable and Rewarding Life
   
font-variant; small-caps; A Memorable and Rewarding Life
   
letter-spacing: 1px; A Memorable and Rewarding Life
letter-spacing: 2px; A Memorable and Rewarding Life
   
text-decoration: underline; A Memorable and Rewarding Life
text-decoration: line-through; A Memorable and Rewarding Life
text-decoration: overline; A Memorable and Rewarding Life
   
text-shadow: 1px 1px teal; A Memorable and Rewarding Life
   
text-transform: uppercase; A Memorable and Rewarding Life
text-transform: lowercase; A Memorable and Rewarding Life
text-transform: capitalize; A Memorable and Rewarding Life

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.

text-align examples

text-align: left;

Future advances in the study of skelverts will rely on rigorous application of the scientific method by bathymetrists.

text-align: right;

Future advances in the study of skelverts will rely on rigorous application of the scientific method by bathymetrists.

text-align: center;

Future advances in the study of skelverts will rely on rigorous application of the scientific method by bathymetrists.

text-align: justify;

Future advances in the study of skelverts will rely on rigorous application of the scientific method by bathymetrists.

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.

text-indent examples

text-indent: 2em;
margin-left: 0em;

Future advances in the study of skelverts will rely on rigorous application of the scientific method by bathymetrists.

text-indent: -2em;
margin-left: 2em;

Future advances in the study of skelverts will rely on rigorous application of the scientific method by bathymetrists.

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.

line-height examples

line-height: 2.2em; (measure: 120)

123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 Future advances in the study of skelverts will rely on rigorous application of the scientific method by bathymetrists. Only the hardy will survive.

line-height: 2.0em; (measure: 100)

123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 Future advances in the study of skelverts will rely on rigorous application of the scientific method by bathymetrists. Only the hardy will survive.

line-height: 1.8em; (measure: 80)

123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 Future advances in the study of skelverts will rely on rigorous application of the scientific method by bathymetrists. Only the hardy will survive.

line-height: 1.6em; (measure: 60)

123456789 123456789 123456789 123456789 123456789 123456789 Future advances in the study of skelverts will rely on rigorous application of the scientific method by bathymetrists. Only the hardy will survive.

line-height: 1.4em;
(measure: 40)

123456789 123456789 123456789 123456789 Future advances in the study of skelverts will rely on rigorous application of the scientific method by bathymetrists. Only the hardy will survive.

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.

margin examples

margin: 0 0 0 0;

Future advances in the study of skelverts will rely on rigorous application of the scientific method by bathymetrists.

At no time has there been such interest in this topic. Recent discoveries have energized the oceanic research community, with young students entering the field hoping to be the next Charles Goodall.

margin: 20px 20px 20px 20px;

Future advances in the study of skelverts will rely on rigorous application of the scientific method by bathymetrists.

At no time has there been such interest in this topic. Recent discoveries have energized the oceanic research community, with young students entering the field hoping to be the next Charles Goodall.

margin: 0px 40px 60px 40px;

Future advances in the study of skelverts will rely on rigorous application of the scientific method by bathymetrists.

At no time has there been such interest in this topic. Recent discoveries have energized the oceanic research community, with young students entering the field hoping to be the next Charles Goodall.

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.

border examples
border: gray 1px solid;
border: gray 2px dotted;
border: gray 2px dashed;
border: gray 3px double;
border: teal 4px groove;
border: teal 4px ridge;
border: teal 4px inset;
border: teal 4px outset;
advanced topic: round corners

Normally, borders are drawn with corners that form a right-angle. For a softer effect, you can round the corners using the CSS border-radius property. This property expects a value (with px or % units) which defines the inside offset, from the corner to an imaginary center point, for drawing a quarter-circle at the corner. If you want each of the four corners to be rounded differently, you can specify four values, one for each corner, going clockwise from the top left.

For greater control over the shape of the corners, you can specify each one separately using the properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius. These properties expect you to provide an (x,y) pair of values, which represent an inside offset, from the corner to an imaginary focal point, for drawing a quarter-ellipse.

border-radius: 30px;
border-radius: 30px 30px 10px 10px;
border-top-right-radius: 30px 30px;
border-top-right-radius: 50px 50px;
border-top-right-radius: 50px 30px;
border-top-right-radius: 30px 50px;
advanced topic: box shadows

Shading effects can be applied to the rectangular shape that outlines a phrase. Conceptually, the idea is to shine a light on the rectangular area surrounding a phrase, and cast a shadow across it, creating a lively pseudo-3D effect. Typically this effect is used with rectangular areas that have a visible border or a background color.

This effect is possible with the box-shadow property, which uses six values to achieve its results: 1) a color, 2 & 3) a pair of coordinates, 4) a sharpness value, 5) an enlargement value, and 6) an indicator of whether the rectangle is raised or sunken.

The shadow color can be specified using any of the methods described elsewhere in this note.

The coordinate pair are inversely related to the position of the imaginary light source that is casting the shadow. For example, if the light source is situated in the northwest quadrant, 8 pixels left and 12 pixels above the rectangular area, the shadow effect will extend 8 pixels to the right and 12 pixels down from the rectangle. Larger values cast a longer shadow. Negative values can be specified as well, allowing the light source to be in the northeast, southeast, or southwest quadrants.

The sharpness of the shadow's edge may be defined using the 4th value, the so-called blur distance. This is the amount of the shadow's edge to make fuzzy. A smaller value simulates a stronger light source, making the shadow crisp. A larger value simulates a weaker light source, making the shadow blurry.

The 5th value allows you to enlarge the size of the shadow in relation to the original rectangular area. If you imagine the light source coming into very close proximity with the rectangle, the shadow it casts will become larger than the original itself.

The 6th value can be either outset, effectively casting a shadow across a raised rectangle; or inset, effectively casting a shadow across a sunken rectangle. If you don't specify either, the effect will be outset.

Double shadows can also be created, simulating two separate light sources. To do this, use a comma between the two sets of values.

box-shadow: gray -8px -8px;
box-shadow: gray 8px 8px;
box-shadow: gray 8px 8px 4px;
box-shadow: gray 0px 0px 0px 8px;
box-shadow: gray 0px 0px 4px 8px;
box-shadow: gray 0px 0px 4px 8px inset;
box-shadow: gray 8px 8px 4px,
teal 0px 0px 4px 4px inset;

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.

outline examples
outline: none;
outline: 1px red dashed; outline-offset: 0px;
outline: 1px red dashed; outline-offset: 2px;
outline: 1px red dashed; outline-offset: 4px;
outline: 3px yellow solid; outline-offset: 0px;
outline: 3px yellow solid; outline-offset: -2px;
outline: 3px yellow solid; outline-offset: -4px;

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.

padding examples

margin: 0px; padding: 0px;

Future advances in the study of skelverts will rely on rigorous application of the scientific method by bathymetrists.

At no time has there been such interest in this topic. Recent discoveries have energized the oceanic research community, with young students entering the field hoping to be the next Charles Goodall.

margin 0px; padding: 20px;

Future advances in the study of skelverts will rely on rigorous application of the scientific method by bathymetrists.

At no time has there been such interest in this topic. Recent discoveries have energized the oceanic research community, with young students entering the field hoping to be the next Charles Goodall.

margin 20px; padding: 20px;

Future advances in the study of skelverts will rely on rigorous application of the scientific method by bathymetrists.

At no time has there been such interest in this topic. Recent discoveries have energized the oceanic research community, with young students entering the field hoping to be the next Charles Goodall.

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.

comparison of units

Here are all the unit types that CSS understands:

units definition typical usage
pt one point is 1/72 of an inch font-size
pc one pica is 1/6 of an inch font-size
   
em one em = size of parent font font-size
rem one rem = size of root font font-size
ex one ex = size of font's x-height font-size
ch one ch = width of font's "0" font-size
   
px one pixel is 1/96 of an inch * margin, border, padding, box-shadow
   
in inches @page rule, @media print
cm centimeters @page rule, @media print
mm millimeters @page rule, @media print
   
% percent width, height
vw one vw = 1/100 browser's width width, height
vh one vh = 1/100 browser's height width, height
vmin % viewport's smaller dimension width, height
vmax % viewport's larger dimension width, height

* CSS pixels are always 96 per inch, regardless of how many screen pixels or printer pixels a high-resolution device may have.

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.

RGB and HSL

Wherever color values are needed, they can be supplied using any of these expressions:

  • rgb(R,G,B) red-green-blue components, each value is between 0 (no color) and decimal value 255 (full color).
  • rgba(R,G,B,A) red-green-blue-alpha components, where the alpha channel is between 0.0 (transparent) and 1.0 (opaque).
  • #RRGGBB red-green-blue components, each value is between 00 (no color) and hexadecimal FF (full color).
  • #RRGGBBAA red-green-blue-alpha components, where the alpha channel is between 00 (transparent) and hexadecimal FF (opaque).
  • #RGB red-green-blue components, each value is between 0 (no color) and hexadecimal F (full color).
  • #RGBA red-green-blue-alpha components, where the alpha channel is between 0 (transparent) and hexadecimal F (opaque).
  • hsl(H,S,L) hue-saturation-lightness components, where the H value is an arc of the color wheel, between 0 and 360 degrees; S is the saturation percentage from 0% (gray) to 100% (fully saturated); and L is the lightness percentage from 0% (black) to 100% (white).
  • hsla(H,S,L,A) hue-saturation-light-alpha components, where the alpha channel is between 0.0 (transparent) and 1.0 (opaque).

Each of the color expressions that accept an alpha component, adjust the relative opacity of the color and background-color separately.

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 example
@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

  • The typeface for the words of your composition are specified with the font-family and font-size property.
  • Special effects can be achieved by setting the properties for font-style, font-weight, font-variant, letter-spacing, text-decoration, text-shadow and text-transform.
  • Paragraphs are formatted with the text-align, text-indent, and line-height properties.
  • Sections are formatted with the margin, border, border-radius, box-shadow, outline, and padding properties.
  • Properties that expect measurement values should be specified with units; different units are available for type size, device size, print size, viewport size, and relative size.
  • Colors can be specified using the red-green-blue model or the hue-saturation-lightness model. Transparency can be set by specifying a value for the alpha channel.
  • Documents are not bound in the vertical direction. Use the @page rule to specify how documents should be formatted for print or PDF.

rachael

The fundamentals of styling