CSU - DCE 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.

CSU - DCE 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

CSU - DCE 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

CSU - DCE 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

CSU - DCE 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

CSU - DCE 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

CSU - DCE 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

CSU - DCE 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 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

CSU - DCE 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

CSU - DCE 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

CSU - DCE 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

CSU - DCE 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

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