The following code listing uses some of the CSS described in this appendix. You can match some of the items to the visual display in the figure that follows the listing. 1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 2: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3: <html> 4: <head> 5: <title>CSS Markup Example</title> 6: <style> 7: body { 8: font-family: Verdana, Arial, Helvetica, sans-serif; 9: font-weight: normal; 10: font-size: 12px; 11: color: #000000; 12: background-color: #FFFFFF; 13: } 14: 15: b { 16: color: #FF0000; 17: font-weight: bold; 18: font-family: Verdana; 19: } 20: 21: .crazytext { 22: font: normal normal 22px ZapfDingbats; 23: } 24: 25: li { 26: display: list-item; 27: list-style-type: square; 28: list-style-position: inside; 29: } 30: 31: #myBox { 32: border: 2px dashed #00F; 33: padding: 15px; 34: width: 150px; 35: } 36: .mossonpurple { 37: font-size: 7pt; 38: color: #669966; 39: background-color: #CC99FF; 40: } 41: 42: </style> 43: </head> 44: <body> 45: 46: <p>Text in the body has a default style.</p> 47: 48: <p><b>bolded text, with style</b></p> 49: 50: <p >the crazytext class in action.</p> 51: 52: <p>An unordered list with square item indicator.</p> 53: <ul> 54: <li>item #1</li> 55: <li>item #2</li> 56: <li>item #3</li> 57: </ul> 58: 59: <div >This is a bordered box with padding.</div> 60: 61: <p><span >This is icky colored.</span></p> 62: 63: </body> 64: </html>
|