2001 Prentice Hall, Inc. All rights reserved. Declared.html ?xmlversion = "1.0" !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" !--Fig. 6.2: declared.html --&#x!---;ؒ.;Ÿig;&#x-16.;. 6;&#x.-16;&#x.12:;&#x d-1;.1e;la-;.1;&#xre-1;.1d;&#x.htm;&#x-16.;l ;ê&#x.1 ;ÿ.1 ;&#x -;.1;&#x ;&#x-16.; ;ê&#x.1 ;&#x-16.; ;&#x---1;.10; !--Declaring a style sheet in the header section. --&#x!---;ؒ.;鷬&#x-16.;lar;&#xi-16;&#x.1ng;&#x a-1;.1 ;&#xsty-;.1;&#xle-1;.1 ;&#xshee;&#x-16.;t i;&#xn-16;&#x.1 t;&#xhe-1;.1 ;&#xhea-;.1;Þr ;&#x-16.;sec;&#xt-16;&#x.1io;&#x-16.;n. ;&#x---1;.10; htmlxmlns= "http://www.w3.org/1999/xhtml" head&#x-16.;hea; -16;&#x.100; title&#xt-16;&#x.1it;&#xle-1;.10; Styles placed in the head apply to all elements in the document. A style class named special is created. Style classes inherit the More style properties include font type ( font-family ) and background color ( background-color Use the style element to create an embedded CSS. 2001 Prentice Hall, Inc. All rights reserved. Declared.html body&#x-16.;od;&#xy-16;&#x.100; !--This class attribute applies the .blue style --&#x!-16;&#x.1--;j&#x.8T-;.1;&#xhis ;&#x-16.; la;&#xs-16;&#x.1s ;&#x-16.;tt;&#xri-1;.1b;&#xute-;.1;&#x app;&#x-16.;lie;&#xs-16;&#x.1 t;&#xhe-1;.1 ;&#x.bl-;.1;&#xue-1;.1 ;&#xstyl;&#x-16.; -;&#x--16;&#x.100; h1 class = "special" Deitel& Associates, Inc. &#x-16.;/h1;/h1 p&#xp-16;&#x.100; Deitel& Associates, Inc. is an internationally recognized corporate training and publishing organization The styles associated with the special class are applied to the header and paragraph elements. 2001 Prentice Hall, Inc. All rights reserved. Program Output Notice the styles defined in the CSS are applied to all paragraphs, headers, and bolded text. Elements that have the special class applied have the class’s styles as well as the CSS styles applied. 2001 Prentice Hall, Inc. All rights reserved. Advanced.html ?xmlversion = "1.0" !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" !--Fig 6.3: advanced.html &#x!---;ؒ.;Ÿig;&#x-16.; 6.;-16;&#x.1: ;-1;.1v; nc-;.1;í-1;.1.;&#xhtml;&#x-16.; ;ê&#x.1 -; -- A style class is defined specifically for elements. The style is applied if the element’s class attribute is set to nodec hover psuedoclass defined for the element is activated dynamically when the user rolls over the element with a mouse. element for elements is defined to have bold red font. Elements of an unordered list in another nested unordered list will be underlined and have a left-hand margin of 15 pixels. 2001 Prentice Hall, Inc. All rights reserved. Advanced.html u&#xu-16;&#x.1l0;l li&#xli-1;.10; Milk /l&#x/l-1;.1i;i li&#xli-1;.10; Bread &#x-16.;li0;li White bread &#x-16.;/li;/li &#x-16.;li0;li Rye bread /l&#x/l-1;.1i;i &#x-16.;li0;li Whole wheat bread /l&#x/l-1;.1i;i /ul&#x/ul-;.1; /l&#x/l-1;.1i;i li&#xli-1;.10; Rice /l&#x/l-1;.1i;i li&#xli-1;.10; Potatoes &#x-16.;/li;/li li&#xli-1;.10; Pizza eถ.;m00;m with mushrooms /&#x/-16;&#x.1em;em&#x-16.;/li;/li /&#x/-16;&#x.1ul;ul p&#xp-16;&#x.100;a class = "nodec" href= "http://www.food.com" Go to the Grocery store /&#x/-16;&#x.1a0;a/&#x/-16;&#x.1p0;p /bod&#x-16.;/bo; -16;&#x.1y0;y /ht&#x/ht-;.1;&#xml00;ml According to the CSS defined, the three elements listed under bread should be underlined and indented 15 pixels from the left margin when rendered. The text placed between the tags should be bolded and colored red when rendered. When the user scrolls over the text anchoring the link, the hover class will be activated and the text will change to the style defined by the hover class. 2001 Prentice Hall, Inc. All rights reserved. Program Output The elements in the nested unordered list are underlined and indented 15 pixels from the left margin. By applying the hover psuedoclass to this anchor, the anchor’s background and text color changes when the use r rolls over it with the mouse. 2001 Prentice Hall, Inc. All rights reserved. Styles.css /* Fig. 6.4: styles.css */ 2001 Prentice Hall, Inc. All rights reserved. External.html ?xmlversion = "1.0" !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" !--Fig. 6.5: external.html &#x!---;ؒ.;Ÿig;&#x-16.;. 6;&#x.-16;&#x.15:;&#x e-1;.1x;&#xter-;.1;&#xna-1;.1l;&#x.htm;&#x-16.;l ;ê&#x.1 ;ÿ.1 ;&#x--00; -- element is used to reference an external style sheet. rel attribute is used to define the linking relationship. type attribute defines the MIME type. 2001 Prentice Hall, Inc. All rights reserved. External.html Program Output p&#xp-16;&#x.100; ahref= "http://www.food.com" Go to the Grocery store &#x-16.;/a0;/a /&#x/-16;&#x.1p0;p /bod&#x-16.;/bo; -16;&#x.1y0;y /ht&#x/ht-;.1;&#xml00;ml The documents rendered with an external CSS should be the same as those rendered with an internal CSS. 2001 Prentice Hall, Inc. All rights reserved. 6.6 W3C CSS Validation Service Fig. 6.6Validating a CSS doc ument. (Courtesy of World Wide Web Consortium (W3C).) 2001 Prentice Hall, Inc. All rights reserved. 6.6 W3C CSS Validation Service Fig. 6.7CSS validation results. (Courtesy of World Wide Web Consortium (W3C).) 2001 Prentice Hall, Inc. All rights reserved. Positioning.html ?xmlversion = "1.0" !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" !--Fig 6.8: positioning.html --&#x!---;ؒ.;Ÿig;&#x-16.; 6.;-16;&#x.1: ;&#xpo-1;.1s;&#xiti-;.1;&#xon-1;.1i;&#xng.h;&#x-16.;tml;ê&#x.1 ;ÿ.1 ;&#x --;.1; !--Absolute positioning of elements --&#x!---;ؒ.;ফs;&#x-16.;olu;&#xt-16;&#x.1e ;&#xpo-1;.1s;&#xiti-;.1;&#xon-1;.1i;&#xng o;&#x-16.;ǰ ;l-1;.1e;&#xmen-;.1;&#xts -;&#x-16.;-00; htmlxmlns= "http://www.w3.org/1999/xhtml" head&#x-16.;hea; -16;&#x.100; title&#xt-16;&#x.1it;&#xle-1;.10; Absolute Positioning /titl&#x/-16;&#x.1ti;&#xtl-1;.1e;e /hea&#x-16.;/he; -16;&#x.1d0;d body&#x-16.;od;&#xy-16;&#x.100; p&#xp-16;&#x.100;img src= "i.gif" style = "position: absolute; top: 0px; left: 0px; z-index: 1" alt = "First positioned image" / /p&#x/p-1;.10; p style = "position: absolute; top: 50px; left: 50px; z-index: 3; font-size: 20pt;" Positioned Text p&#xp-16;&#x.100;img src= "circle.gif" style = "position: absolute; top: 25px; left: 100px; z-index: 2 alt = "Second positioned image" //&#x/-16;&#x.1p0;p /bod&#x-16.;/bo; -16;&#x.1y0;y /ht&#x/ht-;.1;&#xml00;ml position property of the style element allows for positioning of an element. z-index property allows layering of multiple images.The images are layered such that images with lower z-indexes are placed under images with higher ones. 2001 Prentice Hall, Inc. All rights reserved. Program Output The effect of the z-index property is several images layered on top of one another. 2001 Prentice Hall, Inc. All rights reserved. Positioning2.html ?xmlversion = "1.0" !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" !--Fig. 6.9: positioning2.html &#x!---;ؒ.;Ÿig;&#x-16.;. 6;&#x.-16;&#x.19:;&#x p-1;.1o;&#xsit-;.1;&#xio-1;.1n;&#xing2;&#x-16.;.ht;&#xm-16;&#x.1l ;ÿ.1 ;&#x -;.1;&#x--00;-- !--Relative positioning of elements &#x!---;ؒ.; Rel;&#x-16.;ti;&#xv-16;&#x.1e ;&#xpo-1;.1s;&#xiti-;.1;&#xon-1;.1i;&#xng o;&#x-16.;ǰ ;l-1;.1e;&#xmen-;.1;&#xts ;&#x-16.;--0;-- htmlxmlns= "http://www.w3.org/1999/xhtml" head&#x-16.;hea; -16;&#x.100; title&#xt-16;&#x.1it;&#xle-1;.10; Relative Positioning /titl&#x/-16;&#x.1ti;&#xtl-1;.1e;e style type = "text/css" font-size: 1.3em font-family: verdana,arial, sans-serif span color: red font-size: .6em height: .super position: relative -1ex .sub position: relative bottom: .shiftleft position: relative left: -1ex .shiftright position: relative right: -1ex /styl&#x/-16;&#x.1st;&#xyl-1;.1e;e /hea&#x-16.;/he; -16;&#x.1d0;d Relative positioning places an element relative to a reference point on the page. For instance, when this class is applied the element will be displayed –1cm relative to the left of where it would be placed. 2001 Prentice Hall, Inc. All rights reserved. Positioning2.htm Program Output body&#x-16.;od;&#xy-16;&#x.100; p&#xp-16;&#x.100; The text at the end of this sentence span class = "super" is in superscript /sp&#x/-16;&#x.1sp;&#x-16.;n0;an &#x-16.;/p0;/p p&#xp-16;&#x.100; The text at the end of this sentence span class = "sub" is in subscript /span&#x/-16;&#x.1sp; n-1;.10; p&#xp-16;&#x.100; The text at the end of this sentence span class = "shiftleft" is shifted left /&#x/-16;&#x.1sp; n00;span /p&#x/p-1;.10; p&#xp-16;&#x.100; The text at the end of this sentence span class = "shiftright" is shifted right /spa&#x/spa;&#x-16.;n00;n &#x-16.;/p0;/p /bod&#x-16.;/bo; -16;&#x.1y0;y /ht&#x/ht-;.1;&#xml00;ml The text in red has the shiftleft class applied, and is shifted left relative to where it would have initially been placed. 2001 Prentice Hall, Inc. All rights reserved. Background.html ?xmlversion = "1.0" !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" !--Fig. 6.10: background.html --&#x!---;ؒ.;Ÿig;&#x-16.;. 6;&#x.-16;&#x.110;&#x: -1;.1b;¬k-;.1;&#xgr-1;.1o;&#xund.;&#x-16.;htm;&#xl-16;&#x.1 ;ÿ.1 ;&#x -;.1;&#x ;&#x-16.; ;&#x--16;&#x.1-0; !--Adding background images and indentation --&#x!---;ؒ.;髝&#x-16.;ing;ê&#x.1ba;k-1;.1g;&#xrou-;.1;&#xnd-1;.1 ;&#ximag;&#x-16.; s ; -16;&#x.1nd;&#x i-1;.1n;Þn-;.1;&#xtati;&#x-16.;on ;&#x--16;&#x.1-0; htmlxmlns= "http://www.w3.org/1999/xhtml" head&#x-16.;hea; -16;&#x.100; title&#xt-16;&#x.1it;&#xle-1;.10; Background Images /tit&#x-16.;/ti;&#xt-16;&#x.1le;le style type = "text/css" body background-image: url(logo.gif) background-position: bottom right background-repeat: no-repeat background-attachment: fixed p font-size: 18pt color: #aa5588 text-indent: 1em font-family: arial, sans-serif .dark font-weight: bold /styl&#x/-16;&#x.1st;&#xyl-1;.1e;e /hea&#x-16.;/he; -16;&#x.1d0;d background-image property assigns a background to the body of the page. background–position property assigns a location for the image on the page. If set to repeat , the background- repeat property will tile the image as the background. The value of the background- attachment property determines if the image moves as the user scrolls the page. The font format specified will be applied to all elements. 2001 Prentice Hall, Inc. All rights reserved. Background.html rogram Output body&#x-16.;od;&#xy-16;&#x.100; p&#xp-16;&#x.100; This example uses the background-image, background-position and background-attachment styles to place the span class = "dark" Deitel & Associates, Inc. /s&#x/s-1;.1p; n00;pan logo in the bottom, right corner of the page. Notice how the logo stays in the proper position when you resize the browser window. /&#x/-16;&#x.1p0;p /bod&#x-16.;/bo; -16;&#x.1y0;y /ht&#x/ht-;.1;&#xml00;ml Note that no formatting needed to be set in the element itself because it has already been defined in the CSS. 2001 Prentice Hall, Inc. All rights reserved. Width.html ?xmlversion = "1.0" !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" !--Fig. 6.11: width.html --&#x!---;ؒ.;Ÿig;&#x-16.;. 6;&#x.-16;&#x.111;&#x: -1;.1w;&#xidt-;.1;&#xh.-1;.1h;&#xtml ;&#x-16.; ;ê&#x.1 ;ÿ.1 ;&#x -;.1;&#x ;&#x-16.; ;ê&#x.1--;&#x-16.;က width height attributes of style allow the user to indicate the percentage of the width and height of the screen the element can occupy. 2001 Prentice Hall, Inc. All rights reserved. Width.html Program Output div style = "width: 20%; height: 30%; overflow: scroll" This box is only twenty percent of the width and thirty percent of the height. What do we do if it overflows? Set the overflow property to scroll! /div&#x-16.;/di;&#xv-16;&#x.100; /bod&#x-16.;/bo; -16;&#x.1y0;y /ht&#x/ht-;.1;&#xml00;ml This will set the overflow attribute to add scroll bars for text that overflows. 2001 Prentice Hall, Inc. All rights reserved. Floating.html ?xmlversion = "1.0" !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" !--Fig. 6.12: floating.html --&#x!---;ؒ.;Ÿig;&#x-16.;. 6;&#x.-16;&#x.112;&#x: -1;.1f;&#xloa-;.1;&#xti-1;.1n;&#xg.ht;&#x-16.;ml ;ê&#x.1 ;ÿ.1 ;&#x -;.1;&#x --;&#x-16.;က !--Floating elements and element boxes --&#x!---;ؒ.;Ÿlo;&#x-16.;ti;&#xn-16;&#x.1g ;l-1;.1e;&#xmen-;.1;&#xts-1;.1 ; nd ;&#x-16.; le;&#xm-16;&#x.1en;&#xt -1;.1b;&#xoxe-;.1;&#xs --;&#x-16.;က htmlxmlns= "http://www.w3.org/1999/xhtml" head&#x-16.;hea; -16;&#x.100; title&#xt-16;&#x.1it;&#xle-1;.10; Flowing Text Around Floating Elements /ti&#x/ti-;.1;&#xtle0;tle style type = "text/css" background-color: #ffccff margin-bottom: .5em font-size: 1.5em width: text-align: justify /styl&#x/-16;&#x.1st;&#xyl-1;.1e;e /hea&#x-16.;/he; -16;&#x.1d0;d body&#x-16.;od;&#xy-16;&#x.100; div style = "text-align: center" Deitel& Associates, Inc. /div&#x-16.;/di;&#xv-16;&#x.100; div style = "float: right; margin: .5em; text-align: right" Corporate Training and Publishing /div&#x-16.;/di;&#xv-16;&#x.100; margin property specifies the distance between the edge of the element and any other element on the page. The float propertyallows you to move an element to one side of the screen such that other content in the document then flows around the floated element. 2001 Prentice Hall, Inc. All rights reserved. Floating.html p&#xp-16;&#x.100; Deitel& Associates, Inc. is an internationally recognized corporate training and publishing organization clear property can be used to interrupt the flow of text around a floating element. 2001 Prentice Hall, Inc. All rights reserved. Program Output A floating element with 5 em padding. 2001 Prentice Hall, Inc. All rights reserved. 6.10 Test Flow and Box Model Margin Border Padding Fig. 6.13Box model for block-level elements. 2001 Prentice Hall, Inc. All rights reserved. Borders.html ?xmlversion = "1.0" !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" !--Fig. 6.14: borders.html &#x!---;ؒ.;Ÿig;&#x-16.;. 6;&#x.-16;&#x.114;&#x: -1;.1b;&#xord-;.1;r-1;.1s;&#x.htm;&#x-16.;l ;ê&#x.1 ;ÿ.1-; -- border-width property is the width of the border around an element. border-style property is the style of border used. border-color property is the color of the border. 2001 Prentice Hall, Inc. All rights reserved. Borders.html Program Output /styl&#x/-16;&#x.1st;&#xyl-1;.1e;e /hea&#x-16.;/he; -16;&#x.1d0;d body&#x-16.;od;&#xy-16;&#x.100; div class = "thick groove" This text has a border /&#x/-16;&#x.1di;&#xv000;div div class = "medium groove" This text has a border /div&#x-16.;/di;&#xv-16;&#x.100; div class = "thin groove" This text has a border /d&#x/d-1;.1i;&#xv000;iv p class = "thin red inset" A thin red line... /&#x/-16;&#x.1p0;p p class = "medium blue outset" And a thicker blue line /p&#x/p-1;.10; /bod&#x-16.;/bo; -16;&#x.1y0;y /ht&#x/ht-;.1;&#xml00;ml A sampling of the different types of borders that can be specified. 2001 Prentice Hall, Inc. All rights reserved. Borders2.html ?xmlversion = "1.0" !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" !--Fig. 6.15: borders2.html &#x!---;ؒ.;Ÿig;&#x-16.;. 6;&#x.-16;&#x.115;&#x: -1;.1b;&#xord-;.1;r-1;.1s;.ht;&#x-16.;ml ;ê&#x.1 -; -- !--Various border-styles &#x!---;ؒ.; Var;&#x-16.;iou;&#xs-16;&#x.1 b;&#xor-1;.1d;r--;.1;&#xst-1;.1y;&#xles ;&#x-16.; ;ê&#x.1 -; -- htmlxmlns= "http://www.w3.org/1999/xhtml" head&#x-16.;hea; -16;&#x.100; title&#xt-16;&#x.1it;&#xle-1;.10; Borders /title&#x/-16;&#x.1ti;&#xtle-;.1; style type = "text/css" body background-color: #ccffcc text-align: center margin-bottom: .3em width: 50% position: relative left: 25% padding: .3em /styl&#x/-16;&#x.1st;&#xyl-1;.1e;e /hea&#x-16.;/he; -16;&#x.1d0;d body&#x-16.;od;&#xy-16;&#x.100; div style = "border-style: solid" Solid border /div&#x-16.;/di;&#xv-16;&#x.100; div style = "border-style: double" Double border /d&#x/d-1;.1i;&#xv000;iv div style = "border-style: groove" Groove border /d&#x/d-1;.1i;&#xv000;iv div style = "border-style: ridge" Ridge border /div&#x-16.;/di;&#xv-16;&#x.100; div style = Specifying a border directly through the style attribute of the element. 2001 Prentice Hall, Inc. All rights reserved. Program Output 2001 Prentice Hall, Inc. All rights reserved. User_absolute.html ?xmlversion = "1.0" !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" !--Fig. 6.16: user_absolute.html --&#x!---;ؒ.;Ÿig;&#x-16.;. 6;&#x.-16;&#x.116;&#x: -1;.1u;&#xser-;.1;&#x_a-1;.1b;&#xsolu;&#x-16.;te.;&#xh-16;&#x.1tm;&#xl -1;.1 ;&#x ---;.1; !--User styles --&#x!---;ؒ.; Use;&#x-16.;r s;&#xt-16;&#x.1yl;s-1;.1 ;&#x -;.1;ÿ.1 ;&#x ;&#x-16.; ;ê&#x.1 ;ÿ.1 ;&#x ---;.1; htmlxmlns= "http://www.w3.org/1999/xhtml" head&#x-16.;hea; -16;&#x.100; title&#xt-16;&#x.1it;&#xle-1;.10; User Styles /title&#x/t-1;.1i;&#xtle-;.1; style type = "text/css" .note font-size: /styl&#x/-16;&#x.1st;&#xyl-1;.1e;e /hea&#x-16.;/he; -16;&#x.1d0;d body&#x-16.;od;&#xy-16;&#x.100; p&#xp-16;&#x.100; Thanks for visiting my Web site. I hope you enjoy it. /&#x/-16;&#x.1p0;pp class = "note" Please Note: This site will be moving soon. Please check periodically for updates. &#x-16.;/p0;/p /bod&#x-16.;/bo; -16;&#x.1y0;y /ht&#x/ht-;.1;&#xml00;ml Author defined style sheets are ones defined within the page. By using absolute measurement ( in this case) the developer will override user defined style sheets. 2001 Prentice Hall, Inc. All rights reserved. Program Output Developer defined class applied to this element decrease the font size of the text. 2001 Prentice Hall, Inc. All rights reserved. Userstyles.css /* Fig. 6.17:userstyles.css*/ User defined style sheets are usually external. A user’s style sheet is not linked to a page, they are set in the browser’s options. 2001 Prentice Hall, Inc. All rights reserved. Setting the user’s style sheet in IE. 2001 Prentice Hall, Inc. All rights reserved. Fig. 6.19Web page with user styles applied. 2001 Prentice Hall, Inc. All rights reserved. User_relative.html ?xmlversion = "1.0" !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" !--Fig. 6.20: user_relative.html --&#x!---;ؒ.;Ÿig;&#x-16.;. 6;&#x.-16;&#x.120;&#x: -1;.1u;&#xser-;.1;&#x_r-1;.1e;&#xlati;&#x-16.;ve.;&#xh-16;&#x.1tm;&#xl -1;.1 ;&#x ---;.1; !--User styles --&#x!---;ؒ.; Use;&#x-16.;r s;&#xt-16;&#x.1yl;s-1;.1 ;&#x -;.1;ÿ.1 ;&#x ;&#x-16.; ;ê&#x.1 ;ÿ.1 ;&#x ---;.1; htmlxmlns= "http://www.w3.org/1999/xhtml" head&#x-16.;hea; -16;&#x.100; title&#xt-16;&#x.1it;&#xle-1;.10; User Styles /title&#x/t-1;.1i;&#xtle-;.1; style type = "text/css" .note font-size: .75em /styl&#x/-16;&#x.1st;&#xyl-1;.1e;e /hea&#x-16.;/he; -16;&#x.1d0;d body&#x-16.;od;&#xy-16;&#x.100; p&#xp-16;&#x.100; Thanks for visiting my Web site. I hope you enjoy it. /&#x/-16;&#x.1p0;pp class = "note" Please Note: This site will be moving soon. Please check periodically for updates. &#x-16.;/p0;/p /bod&#x-16.;/bo; -16;&#x.1y0;y /ht&#x/ht-;.1;&#xml00;ml By using relative measurements (in this case, ), the developer will not override user defined style sheet formats. When rendered the font size displayed will be .75 percent times the value of the font size defined in the user style sheet. 2001 Prentice Hall, Inc. All rights reserved. Program Output Output before relative measurement is used to define the font inthe document. 2001 Prentice Hall, Inc. All rights reserved. Fig. 6.21Using relative measurements in author styles. Output when relative measurement is used. By using relative measurements the user defined styles are not overwritten.