Text Styling, Part 2 | Learning to Code

letter-spacing Property

Property	Usage and Effect	Values	Recommendations
letter-spacing	Used to control the amount of empty space between letters.	Number and a sizing unit (`px`, `pt`, `em`, `%`, `rem`)	Useful for making headings more visually distinctive. Less is more; small amounts give the best visual result.

letter-spacing Example

See the Pen Letter Spacing by Jason Withrow (@jwithrow) on CodePen.

word-spacing Property

Property	Usage and Effect	Values	Recommendations
word-spacing	Used to control the amount of empty space between words.	Number and a sizing unit (`px`, `pt`, `em`, `%`, `rem`)	Not frequently used.

word-spacing Example

See the Pen Word Spacing by Jason Withrow (@jwithrow) on CodePen.

text-align Property

Property	Usage and Effect	Values	Replaces	Recommendations
text-align	Controls the horizontal alignment of text inside a block-level element.	`center` `left` `right` `justify`	Deprecated `align` attribute for headings, `<p>`, `<img />`, and `<div>`. Also replaces `align` for `<tr>`, `<td>`, and `<th>` tags.	`justify` is useful for getting rid of jagged right edges in paragraphs (assuming you have a lot of text).

text-align Example

See the Pen Text Align by Jason Withrow (@jwithrow) on CodePen.

Pseudo-Classes

Pseudo-classes specify different visual effects for an element.
They are typically used with the anchor tag, as anchors have various states (visited, actively being clicked, etc.).

When specifying these pseudo-classes the proper sequence is:

:link {}    /* unvisited links; only for anchors */
:visited {} /* visited links; only for anchors */
:hover {}   /* mousing over activates this; can be applied to any element */
:focus {}   /* anchors and form elements automatically receive focus */
:active {}  /* styling when the link has been selected; only for anchors */

Deviating from this sequence will cause some of them to stop functioning. Often the states exist concurrently (e.g., a link is visited and is now active and has focus, or the user is mousing over an unvisited link) and the combination of those states only works correctly in the indicated sequence.
It is also possible to have your styling target when multiple states are occuring, such as:
```
a:hover:focus {}   /* anchor has focus and is moused over */
```

Pseudo-Class	Occurs	Replaces	Recommendations
:link	This is the unvisited state (this state occurs before the document linked to has been viewed by that device)	Deprecated `link` attribute for `<body>`	Blue links get the highest rate of click-through; users associate blue with links.
:visited	This state occurs after the document linked to has been viewed.	Deprecated `vlink` attribute for `<body>`	Make sure that visited links maintain acceptable contrast with background colors; a contrast checking tool is strongly recommended.
:hover	This state occurs when the element is moused over.	N/A	Avoid visual changes that cause surrounding content to shift left / right (boldface and italics would cause such a shift). Favor minimalist / clean visual style changes when using the `:hover` pseudo-class.
:focus	This state occurs when the link or form element has been selected via tabbing or clicking.	N/A	Helpful for keyboard accessibility when used with the outline property.
:active	This state occurs when the link is in the process of being selected, usually via clicking.	Deprecated `alink` attribute for `<body>`	Typically this will only be seen for a brief moment (such as when a link is being clicked).

Specifying Default Colors and Behavior

a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: #000;}
a:focus {color: #000;}
a:active {color: #000;}

And a streamlined version:

a:link {color: blue;}
a:visited {color: purple;}
a:hover, a:focus, a:active {color: #000;}

In the preceding examples all unvisited links are blue, all visited links are purple, and all links are black when moused over, tabbed to, and selected. Every link in the document is affected.

Pseudo-Class Considerations

Styling the anchor element (a) will automatically apply that to every pseudo-class as well. The following code impacts every pseudo-class for every anchor:
```
a {color: #000;}
```
:focus only works for elements that can be tabbed to, such as anchors and form elements (which can receive tab focus automatically, without any extra code being added). Other elements with tabindex="0" specified can also receive tab focus.
:hover applies to anything that can be moused over, which is anything inside of body.
Important: Do not specify :hover or :focus without an element as part of the selector, because browsers will take on that behavior for all elements. Hover effects then start popping up all over the place and focus effects could start happening in undesired places as well. Be specific about when and where :hover and :focus should be applied.

vertical-align Property

Property	Usage and Effect	Values	Replaces	Recommendations
vertical-align	Controls the vertical alignment of content inside an element; sometimes will cause other content to align in a certain direction relative to the element being styled (for example, with images).	`top` `middle` `bottom`	Deprecated `align` attribute for `<img />`. Also replaces `valign` for `<tr>`, `<td>`, and `<th>` tags.	Works well with images, table cells, and form elements. For other elements your results will be mixed.

vertical-align Example

See the Pen Vertical Align by Jason Withrow (@jwithrow) on CodePen.

text-decoration Property

Property	Usage and Effect	Values	Replaces	Recommendations
text-decoration	Used for text (typically anchor/link) styling. This property is a shorthand for four other properties, with these values space-separated.	`text-decoration-line` property: `none` `underline` `overline` `line-through` `blink` `text-decoration-style` property: `dashed` `dotted` `double` `solid` `wavy` `text-decoration-color` property: Pre-defined color name (e.g., purple) Hexadecimal value rgb() or rgba() value hsl() or hsla() value `transparent` `text-decoration-thickness` property: Number and a sizing unit (`px`, `pt`, `em`, `%`, `rem`)	Deprecated `<s>` and `<strike>` elements are replaced by `line-through`. Deprecated `<u>` element replaced by `underline`.	Users assume that underlined text is a link, so only underline links!

text-decoration Example

See the Pen Text Decoration by Jason Withrow (@jwithrow) on CodePen.

text-indent Property

Property	Usage and Effect	Values	Recommendations
text-indent	Used to control the indent before the first line of text in the element.	Number and a sizing unit (`px`, `pt`, `em`, `%`, `rem`)	Not frequently used, but better than the numerous non-breaking spaces used in years past. Best applied to block-level elements and elements displayed as block or inline-block. Elements rendering as inline may ignore this instruction.

text-indent Example

See the Pen Text Indent by Jason Withrow (@jwithrow) on CodePen.

text-transform Property

Property	Usage and Effect	Values	Recommendations
text-transform	Used to change text from its original case to another case.	`none` `capitalize` `uppercase` `lowercase`	Not frequently used, but could be helpful in cases where users are entering data into a content management system and you want the end result to display consistently.

text-transform Example

See the Pen Text Transform by Jason Withrow (@jwithrow) on CodePen.

text-shadow Property

Property	Usage and Effect	Values	Recommendations
text-shadow	Shorthand property indicating color of the text shadow, its location relative to the text, and the blur radius of the shadow.	The sequence is: color x-coordinate y-coordinate blur-radius. The coordinates and blur radius accept the standard sizing units. Setting a negative value for the x- or y-coordinate causes the shadow to move in the opposite direction. Positive values have the shadow down and to the right of the text. Negative values would move the shadow above and to the left of the text.	Be careful not to blur text too much. A value of 0 is no blur; 2px is pretty blurry. Too high of a value and the text cannot be read. Keep in mind the usability problems (readability issues) that inappropriate use can cause. Also make sure that content is still readable if text-shadow is not supported but the rest of the CSS is used (a good example is white text with a black `text-shadow` on a white `background`).

text-shadow Example

See the Pen Text Shadow by Jason Withrow (@jwithrow) on CodePen.