Putting It Together | Blogging in a Snap (Sams Teach Yourself)

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>

1.	Default body text style. The `<body>` tag is given a style in lines 713, and as such this style becomes the default for any markup within the BODY element that does not have its own style definition.
2.	Specific style for bold text. The `<b>` tag is styled in lines 1519 and used in line 48. If you were viewing this screenshot in color, it would appear as bold red text.
3.	Custom style using a crazy font. A custom class is defined in lines 2123 and used in line 50.
4.	Custom list item indicator. Lines 2529 define the styles used for all list items. When used, as in lines 5456, a square item indicator will appear before the text of each line item.
5.	Border and padding styles to create a box. Lines 3135 define an ID called `myBox` that creates the bordered and padded box shown here.
6.	Custom style using text and background colors. A custom class is defined on lines 3640, which produces a green text on a purple background when used as in line 61. Browser display of CSS used in code listing