Cascading Style Sheets Text Controls

Tracking Amount of space between words and letters (kerning = space between letters, usually pair-wise). CSS uses word-spacing: and letter-spacing: Helps to improve readability

letter-spacing length value such as .2em; 8px; normal h2{letter-spacing : .3em;} this adds .3 em to normal spacing (so approx = 1.3 em) Positive values add more space; negative values close up the space

word-spacing Changes the spacing between words length value normal word-spacing: 8px; Like letter-spacing, a positive value increases white space and a negative value lessens space.

line-height Used to adjust the spacing between lines Use percent or ems: line-height: 100%; line-height: 1.5em; a number which is then multiplied by the font size to get the spacing; line-height: 1.5 A length value (such as line-height: 24px;) normal line-height: 2.0; or line-height:200% will double space. Often combine with font-size: font: 12px/14px serif;

Setting Text Case text-transform: text-shadow (in CSS 3) small-caps (uppercase, the first letter is larger) uppercase lowercase none text-shadow (in CSS 3)

Text Alignment-Horizontal left right center justify

Text Alignment - Vertical vertical-align: super (used for superscripting) sub (used for subscripting) baseline (natural state) relative value sets the alignment relative to the parent –top, middle, bottom, text-top and text-bottom percentage – raises or lowers the baseline proportional to the parent

Paragraph Indentation text-indent length value e.g. .intro {text-indent: 2em;} percentage (proportionate to the paragraph’s width)

Controlling White Space p {white-space: pre;} which preserves the multiple line settings h2{white-space: nowrap;} Prevents line wrapping, no break tag <br/> :normal

Text Decoration Used for emphasis text-decoration: underline overline line-through None So often see a:link {text-decoration: none;} a:hover {text-decoration: underline;}

Text direction For non-Western languages direction: