1. CSU - DCE 0715 - Introduction to CSS CSS Text - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Text Control Instructor: Joseph DiVerdi, Ph.D., M.B.A.

2. CSU - DCE 0715 - Introduction to CSS CSS Text - Fort Collins, CO Copyright © XTR Systems, LLC Font Properties Several different properties will be discussed –Text Indentation –Text Alignment –Treatment of White Space –Line Height –Vertical Alignment –Word & Letter Spacing –Text Transformation –Text Decoration

3. CSU - DCE 0715 - Introduction to CSS CSS Text - Fort Collins, CO Copyright © XTR Systems, LLC Font or Text? Text –Written words & form of a literary work Font –An assortment of type all of one size & style Type –Alphanumeric characters for print & display IMHO –Distinction is semantic as far as style is concerned –We'll just accept it & examine the two separately

4. CSU - DCE 0715 - Introduction to CSS CSS Text - Fort Collins, CO Copyright © XTR Systems, LLC Text Indentation Controls paragraph's first line positioning text-indentation: | Either absolute or relative values are OK Can be negative value –Useful for hanging indent Padding may be required to prevent clipping All features are well supported

5. CSU - DCE 0715 - Introduction to CSS CSS Text - Fort Collins, CO Copyright © XTR Systems, LLC Text Alignment Controls element text's horizontal position text-align: left | center | right | justify Use this to replace HTML's ALIGN attribute Use this to replace –Please! left, center, & right are well supported across browsers & OSes justify is buggy in some combinations –Try it anyway because it looks so good

6. CSU - DCE 0715 - Introduction to CSS CSS Text - Fort Collins, CO Copyright © XTR Systems, LLC White Space Controls whitespace treatment between words & lines white-space: pre | nowrap | normal whitespace - space, tab, return normal collapses multiple whitespace characters pre preserves multiple whitespace characters nowrap prevents wrapping within block-level element normal & pre are well supported in Navigator All are supported in Explorer on Mac OS No other support

7. CSU - DCE 0715 - Introduction to CSS CSS Text - Fort Collins, CO Copyright © XTR Systems, LLC Line Height Controls distance between lines of text line-height: | | | normal Does not modify text size Controls leading (pronounced as in "led") –Extra space between lines of text Difference between line-height & font size is leading Number is mis-interpreted in IE v3 Well supported in Explorer Partial support in Navigator Consistent across OSes

8. CSU - DCE 0715 - Introduction to CSS CSS Text - Fort Collins, CO Copyright © XTR Systems, LLC Vertical Alignment Controls vertical position in some instances vertical-align: baseline | sub | super | bottom | text-bottom | middle | top | text-top | –See pp 100-107 in textbook for details Number is mis-interpreted in IE v3 Excellent support in Explorer on Mac OS No support in Navigator Poor support elsewhere

9. CSU - DCE 0715 - Introduction to CSS CSS Text - Fort Collins, CO Copyright © XTR Systems, LLC Word Space Modifies space between words word-spacing: | normal Value is added to customary space Can be positive or negative Word is –A string of non-whitespace characters –Surrounded by whitespace Supported in Explorer on Mac OS No other support

10. CSU - DCE 0715 - Introduction to CSS CSS Text - Fort Collins, CO Copyright © XTR Systems, LLC Letter Space Modifies space between letter letter-spacing: | normal Value is added to customary space Can be positive or negative Can be complicated when justifying –See p111 in textbook Well supported in Explorer Not supported in Navigator

11. CSU - DCE 0715 - Introduction to CSS CSS Text - Fort Collins, CO Copyright © XTR Systems, LLC Text Transformation Modifies text capitalization text-transform: uppercase | lowercase | capitalize | normal capitalize capitalizes first letter of each word –Word is A string of non-whitespace characters Surrounded by whitespace Others are as expected Well supported across browsers & OSes

12. CSU - DCE 0715 - Introduction to CSS CSS Text - Fort Collins, CO Copyright © XTR Systems, LLC Text Decoration Modifies text line & other text-decoration: none | [ underline || overline || line-through || blink ] Most can be used simultaneously –And are self explanatory –Please do not use blink none can be used for –Use it very carefully Spotty support across browsers & OSes

13. CSU - DCE 0715 - Introduction to CSS CSS Text - Fort Collins, CO Copyright © XTR Systems, LLC Hands On Verify that various combinations conform to the rules provided