Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

transcript

484 Dynamic HTML: Cascading Style Sheets™ (CSS) Chapter 14

14Dynamic HTML: Cascading Style Sheets™ (CSS)

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>34 5 67 <HEAD><TITLE>Inline Styles </TITLE></HEAD>89 <BODY>

1011 <P>Here is some text </P>1213 14 15 <P STYLE = "font-size: 20pt" >Here is some more text </P>16 <P STYLE = "font-size: 20pt; color: #0000FF" >Even more text </P>1718 </BODY>19 </HTML>

Fig. 14.1 Inline styles .

Chapter 14 Dynamic HTML: Cascading Style Sheets™ (CSS) 485

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>34 5 67 <HEAD>8 <TITLE> Style Sheets </TITLE>9

10 11 <STYLE TYPE = "text/css" >1213 EM { background-color: #8000FF ;14 color: white } 1516 H1 { font-family: Arial, sans-serif }1718 P { font-size: 18pt }1920 .blue { color: blue } 2122 </STYLE>23 </HEAD>2425 <BODY>2627 28 <H1 CLASS = "blue" >A Heading </H1>29 <P>Here is some text. Here is some text. Here is some text.30 Here is some text. Here is some text. </P>3132 <H1>Another Heading </H1>33 <P CLASS = "blue" >Here is some more text. Here is some more text.34 Here is some <EM>more</EM> text. Here is some more text. </P>3536 </BODY>37 </HTML>

Fig. 14.2 Declaring styles in the header section of a document (part 1 of 2).

Fig. 14.2 Declaring styles in the header section of a document (part 2 of 2).

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>34 5 67 <HEAD>8 <TITLE> More Styles </TITLE>9 <STYLE TYPE = "text/css" >

1011 A.nodec { text-decoration: none }1213 A:hover { text-decoration: underline ;14 color: red ;15 background-color: #CCFFCC }1617 LI EM { color: red ;18 font-weight: bold }1920 UL { margin-left: 75px }2122 UL UL { text-decoration: underline ;23 margin-left: 15px }2425 </STYLE>26 </HEAD>2728 <BODY>2930 <H1>Shopping list for <EM>Monday</EM>: </H1>31 <UL>32 <LI> Milk </LI>33 <LI> Bread34 <UL>35 <LI> White bread </LI>36 <LI> Rye bread </LI>37 <LI> Whole wheat bread </LI>38 </UL></LI>39 <LI> Rice </LI>40 <LI> Potatoes </LI>41 <LI> Pizza <EM>with mushrooms </EM></LI>42 </UL>4344 <P><A CLASS = "nodec" HREF = "http://food.com" >Go to the Grocery45 store </A></P>4647 </BODY>48 </HTML>

Fig. 14.3 Inheritance in style sheets (part 1 of 2).

1 A { text-decoration: none }23 A:hover { text-decoration: underline ;4 color: red ;5 background-color: #CCFFCC }67 LI EM { color: red ;8 font-weight: bold }9

10 UL { margin-left: 2cm }1112 UL UL { text-decoration: underline ;13 margin-left: .5cm }

Fig. 14.4 An external style sheet (styles.css ).

Fig. 14.3 Inheritance in style sheets (part 2 of 2).

Hovering over a link

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>34 5 67 <HEAD>8 <TITLE> Importing style sheets </TITLE>9 <LINK REL = "stylesheet" TYPE = "text/css" HREF = "styles.css" >

10 </HEAD>1112 <BODY>1314 <H1>Shopping list for <EM>Monday</EM>: </H1>15 <UL>16 <LI> Milk </LI>17 <LI> Bread18 <UL>19 <LI> White bread </LI>20 <LI> Rye bread </LI>21 <LI >Whole wheat bread </LI>22 </UL></LI>23 <LI> Rice </LI>24 <LI> Potatoes </LI>25 <LI> Pizza <EM>with mushrooms </EM></LI>26 </UL>2728 <A HREF = "http://food.com" >Go to the Grocery store </A>2930 </BODY>31 </HTML>

Fig. 14.5 Linking an external style sheet.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>34 5 67 <HEAD>8 <TITLE> Absolute Positioning </TITLE>9 </HEAD>

1011 <BODY>1213 <IMG SRC = "i.gif" STYLE = "position: absolute; top: 0px; 14 left: 0px; z-index: 1" >15 <H1 STYLE = "position: absolute; top: 50px; left: 50px; 16 z-index: 3" >Positioned Text </H1>17 <IMG SRC = "circle.gif" STYLE = "position: absolute; top: 25px;18 left: 100px; z-index: 2" >1920 </BODY>21 </HTML>

Fig. 14.6 Positioning elements with CSS .

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>34 5 67 <HEAD>8 <TITLE> Relative Positioning </TITLE>9

10 <STYLE TYPE = "text/css" >1112 P { font-size: 2em;13 font-family: Verdana, Arial, sans-serif }1415 SPAN { color: red ;16 font-size: .6em ; 17 height: 1em }1819 .super { position: relative ;20 top: -1ex }2122 .sub { position: relative ;23 bottom: -1ex }2425 .shiftl { position: relative ;26 left: -1ex }2728 .shiftr { position: relative ;29 right: -1ex }30 </STYLE>31 </HEAD>3233 <BODY>3435 <P> 36 Text text text text <SPAN CLASS = "super" >superscript </SPAN>37 text text text text <SPAN CLASS = "sub" >subscript </SPAN>38 text Text text <SPAN CLASS = "shiftl" >left-shifted </SPAN> 39 text text text <SPAN CLASS = "shiftr" >right-shifted </SPAN>40 Text text text text text 41 </P>4243 </BODY>44 </HTML>

Fig. 14.7 Relative positioning of elements (part 1 of 2).

Fig. 14.7 Relative positioning of elements (part 2 of 2).

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>34 5 67 <HEAD>8 <TITLE> Background Images </TITLE>9

10 <STYLE TYPE = "text/css" >1112 BODY { background-image: url(watermark.gif) ;13 background-position: bottom right ;14 background-repeat: no-repeat ;15 background-attachment: fixed }1617 P { font-size: 2em;18 color: #AA5588;19 text-indent: 1em;20 font-family: Arial, sans-serif }2122 .dark { font-weight: bold }2324 </STYLE>25 </HEAD>2627 <BODY>2829 <P>30 This is some sample text to fill in the page. 31 <SPAN CLASS = "dark" >This is some sample 32 text to fill in the page. </SPAN>33 This is some sample text to fill in the page.34 This is some sample text to fill in the page.35 This is some sample text to fill in the page.36 This is some sample text to fill in the page.37 </P>3839 </BODY>40 </HTML>

Fig. 14.8 Adding a background image with CSS (part 1 of 2).

Fig. 14.8 Adding a background image with CSS (part 2 of 2).

Background image

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>34 5 67 <HEAD>8 <TITLE> Box Dimensions </TITLE>9 <STYLE TYPE = "text/css" >

1011 DIV { background-color: #FFCCFF;12 margin-bottom: .5em }1314 </STYLE>15 </HEAD>1617 <BODY>1819 <DIV STYLE = "width: 20%" >Here is some20 text that goes in a box which is21 set to stretch across twenty precent 22 of the width of the screen. </DIV>2324 <DIV STYLE = "width: 80%; text-align: center" >25 Here is some CENTERED text that goes in a box 26 which is set to stretch across eighty precent of 27 the width of the screen. </DIV>2829 <DIV STYLE = "width: 20%; height: 30%; overflow: scroll" >30 This box is only twenty percent of31 the width and thirty percent of the height.32 What do we do if it overflows? Set the33 overflow property to scroll! </DIV>3435 </BODY>36 </HTML>

Fig. 14.9 Setting box dimensions and aligning text (part 1 of 2).

Fig. 14.9 Setting box dimensions and aligning text (part 2 of 2).

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>34 5 67 <HEAD>8 <TITLE> Flowing Text Around Floating Elements </TITLE>9 <STYLE TYPE = "text/css" >

1011 DIV { background-color: #FFCCFF;12 margin-bottom: .5em ;13 font-size: 1.5em ;14 width: 50% }1516 </STYLE>17 </HEAD>1819 <BODY>2021 <DIV STYLE = "text-align: center" >Centered text </DIV>22 <DIV STYLE = "text-align: right" >Right-aligned text </DIV>2324 <DIV STYLE = "float: right; margin: .5em" >This is some floated25 text, floated text, floated text, floated text. </DIV>26 <P>27 Here is some flowing text, flowing text, flowing text.28 Here is some flowing text, flowing text, flowing text.29 Here is some flowing text, flowing text, flowing text.30 Here is some flowing text, flowing text, flowing text.31 Here is some flowing text, flowing text, flowing text.32 Here is some flowing text, flowing text, flowing text.33 Here is some flowing text, flowing text, flowing text.34 Here is some flowing text, flowing text, flowing text.35 </P>3637 <P><DIV STYLE = "float: right; padding: .5em" >This is some floated38 text, floated text, floated text, floated text. </DIV>39 Here is some flowing text, flowing text, flowing text.40 Here is some flowing text, flowing text, flowing text.41 Here is some flowing text, flowing text, flowing text.42 <SPAN STYLE = "clear: right" >Here is some unflowing text.43 Here is some unflowing text. </SPAN>44 </P>4546 </BODY>47 </HTML>

Fig. 14.10 Floating elements, aligning text and setting box dimensions (part 1 of 2).

Fig. 14.10 Floating elements, aligning text and setting box dimensions (part 2 of 2).

.5 em margin

.5 em padding

Fig. 14.11 Box model for block-level elements.

Margin

Border

Padding

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>34 5 67 <HEAD>8 <TITLE> Borders </TITLE>9 <STYLE TYPE = "text/css" >

1011 BODY { background-color: #CCFFCC }1213 DIV { text-align: center ;14 margin-bottom: 1em;15 padding: .5em }1617 .thick { border-width: thick }1819 .medium { border-width: medium }2021 .thin { border-width: thin }2223 .groove { border-style: groove }2425 .inset { border-style: inset }2627 .outset { border-style: outset }2829 .red { border-color: red }3031 .blue { border-color: blue }3233 </STYLE>34 </HEAD>3536 <BODY>3738 <DIV CLASS = "thick groove" >This text has a border </DIV>39 <DIV CLASS = "medium groove" >This text has a border </DIV>40 <DIV CLASS = "thin groove" >This text has a border </DIV>4142 <P CLASS = "thin red inset" >A thin red line... </P>43 <P CLASS = "medium blue outset" >And a thicker blue line </P>4445 </BODY>46 </HTML>

Fig. 14.12 Applying borders to elements (part 1 of 2).

Fig. 14.12 Applying borders to elements (part 2 of 2).

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>34 5 67 <HEAD>8 <TITLE> Borders </TITLE>9

10 <STYLE TYPE = "text/css" >1112 BODY { background-color: #CCFFCC }1314 DIV { text-align: center ;15 margin-bottom: .3em ;16 width: 50%;17 position: relative ; 18 left: 25%;19 padding: .3em }20 </STYLE>21 </HEAD>2223 <BODY>2425 <DIV STYLE = "border-style: solid" >Solid border </DIV>26 <DIV STYLE = "border-style: double" >Double border </DIV>27 <DIV STYLE = "border-style: groove" >Groove border </DIV>28 <DIV STYLE = "border-style: ridge" >Ridge border </DIV>29 <DIV STYLE = "border-style: inset" >Inset border </DIV>30 <DIV STYLE = "border-style: outset" >Outset border </DIV>31 </BODY>32 </HTML>

Fig. 14.13 Various border-style s.

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >2 <HTML>34 5 67 <HEAD>8 <TITLE> User Styles </TITLE>9

10 <STYLE TYPE = "text/css" >1112 .note { font-size: 1.5em }1314 </STYLE>15 </HEAD>1617 <BODY>1819 <P>Thanks for visiting my Web site. I hope you enjoy it. </P>20 <P CLASS = "note" >Please Note: This site will be moving soon.21 Please check periodically for updates. </P>2223 </BODY>24 </HTML>

Fig. 14.14 Modifying text size with the em measurement.

Fig. 14.15 Adding a user style sheet in Internet Explorer 5.

1 BODY { font-size: 20pt ;2 background-color: #CCFFCC }3 A { color: red }

Fig. 14.16 A sample user style sheet.

Fig. 14.17 A Web page with user styles enabled.

Dynamic HTML: Cascading Style Sheets (CSS)Dynamic HTML: Cascading Style Sheets (CSS) ... 3

Documents