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

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

CSU - DCE Introduction to CSS CSS Length - Fort Collins, CO Copyright © XTR Systems, LLC Specifying Length Values 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

CSU - DCE Introduction to CSS CSS Length - Fort Collins, CO Copyright © XTR Systems, LLC Absolute Length Units 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

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

CSU - DCE Introduction to CSS CSS Length - Fort Collins, CO Copyright © XTR Systems, LLC Absolute Length Units 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

CSU - DCE Introduction to CSS CSS Length - Fort Collins, CO Copyright © XTR Systems, LLC Relative Length Units 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

CSU - DCE Introduction to CSS CSS Length - Fort Collins, CO Copyright © XTR Systems, LLC Relative Length Units 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!

CSU - DCE Introduction to CSS CSS Length - Fort Collins, CO Copyright © XTR Systems, LLC Relative Length Units 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

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

CSU - DCE Introduction to CSS CSS Length - Fort Collins, CO Copyright © XTR Systems, LLC Percentage Units 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

CSU - DCE Introduction to CSS CSS Length - Fort Collins, CO Copyright © XTR Systems, LLC Fluid Web Site Design 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

CSU - DCE Introduction to CSS CSS Length - Fort Collins, CO Copyright © XTR Systems, LLC Fluid Web Site Design <TABLE BORDER=0 CELLPADDING=10 CELLSPACING=0 VALIGN=TOP WIDTH="100%"> Yadda, yadda, yadda,... Bla, bla, bla,...

CSU - DCE Introduction to CSS CSS Length - Fort Collins, CO Copyright © XTR Systems, LLC Personal Web Pages 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