CSU — DCE 0715 — Introduction to CSS

CSU - DCE 0715 - Introduction to CSS Length - Fort Collins, CO Cascading Style Sheets Specifying Length Instructor: Joseph Di. Verdi, Ph. D. , M. B. A. Copyright © XTR Systems, LLC

Specifying Length Values CSU - DCE 0715 - Introduction to CSS Length - Fort Collins, CO • Length values – Can be positive or negative • Certain properties cannot have negative length units – Have a numerical value – Followed by a unit of measurement 200 px • There are three basic kinds of length unit – relative – absolute – percentage Copyright © XTR Systems, LLC

Specifying Length Values CSU - DCE 0715 - Introduction to CSS Length - Fort Collins, CO • Absolute units should be used only when the physical characteristics of the output device are absolutely known • This means that units like points and pixels should be avoided for monitors – Can not be certain of the logical resolution or screen size Copyright © XTR Systems, LLC

Absolute Length Units • • CSU - DCE 0715 - Introduction to CSS Length - Fort Collins, CO Inches - as found on rulers Centimeters - also as found on rulers Millimeters - also as found on rulers Points - standard typographical measure – 72 points per inch – Size of text capital letters • 12 point font <=> 1/6" tall • Picas - standard typographical measure – 6 picas per point Copyright © XTR Systems, LLC

Length Units CSU - DCE 0715 - Introduction to CSS Length - Fort Collins, CO Copyright © XTR Systems, LLC

Absolute Length Units CSU - DCE 0715 - Introduction to CSS Length - Fort Collins, CO • Inch, Centimeter, and Millimeter – All have standard meanings – Are only applicable with calibrated output devices • Point and Pica – Standard (and classic) printer's measures – Font sizes are usually defined in terms of points – Are only applicable with calibrated output devices Copyright © XTR Systems, LLC

Relative Length Units CSU - DCE 0715 - Introduction to CSS Length - Fort Collins, CO • em - standard typographical measure – Called "em-height" – Relative to the current font size • Equal to the font size – For 14 -point font, one em is 14 points – Change the font size and the em size will change Copyright © XTR Systems, LLC

Relative Length Units CSU - DCE 0715 - Introduction to CSS Length - Fort Collins, CO • ex - standard typographical measure – – Called "ex-height" Equal to the height of a lowercase "x" in the font This measure can and will vary with font Even worse. . . • Many fonts do not specify x-height • It is non-trivial for the browser to calculate • Browsers often take em value divided by two as ex value – ouch! Copyright © XTR Systems, LLC

Relative Length Units CSU - DCE 0715 - Introduction to CSS Length - Fort Collins, CO • pixels - the linear size in one dimension of a computer monitor divided by the number of pixels displayed in that dimension – OS Defaults: • Macintosh - 72 dpi • Windows - 96 dpi – However, # of pixels is under user control • ouch! – This is why it is considered relative Copyright © XTR Systems, LLC

Percentage Length Units CSU - DCE 0715 - Introduction to CSS Length - Fort Collins, CO • A numeric value followed by percentage sign 50% • Always computed relative to another value – Usually a length unit H 1 { font-size: 18 pt; } H 1. TALL { line-height: 150%; } Copyright © XTR Systems, LLC

Percentage Units CSU - DCE 0715 - Introduction to CSS Length - Fort Collins, CO • Specifying width with percentage – Element width will be the percentage of the element which contains it P { width: 75%; } – Means that paragraphs will be 75% the width of their container • Usually the BODY • Unless contained in something else – e. g. , TABLE Copyright © XTR Systems, LLC

Fluid Web Site Design CSU - DCE 0715 - Introduction to CSS Length - Fort Collins, CO • Developing a Fluid Web Site Design – The same basic layout is realized • With different size monitors • On different OSes • When the window is resized • Use percentage WIDTHs • Don't use absolute WIDTHs in TABLEs Copyright © XTR Systems, LLC

Fluid Web Site Design CSU - DCE 0715 - Introduction to CSS Length - Fort Collins, CO

Personal Web Pages CSU - DCE 0715 - Introduction to CSS Length - Fort Collins, CO • Apply these various length measures to your Web Site • Modify your "main" style sheet to apply each measure to some element • Note what happens when the Browser's window is resized • Verify that each method works in your hands Copyright © XTR Systems, LLC