Displaying blocks of code online

1. Create the list. Code blocks require terminology and descriptions, meaning that a
definition list can be used to mark them up. For this example, the code block from
the preceding “List style shorthand” section will be used. Within the wrapper div,
create a definition list and give it a class value of codeList. For the term, add a
description of the code, and for the definition, add an ordered list, with each line
of code within its own list item. Each line of code should also be nested within a
code element.
<dl class="codeList">
<dt>Writing out list styles in full</dt>
<dd>
<ol>
<li><code>ul {</code></li>
<li><code>list-style-type: square;</code></li>
<li><code>list-style-position: inside;</code></li>
<li><code>list-style-image: url(bullet.gif);</code></li>
<li><code>}</code></li>
</ol>
</dd>
</dl>
2. Amend the body and #wrapper CSS rules, adding some padding to the former (so
the content doesn’t hug the browser window edges during testing) and a shorthand
font definition to the latter (in place of existing content).
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
padding: 20px;
}
#wrapper {
font: 1.2em/1.5em 'Lucida Grande', 'Lucida Sans Unicode', Lucida,
å Arial, Helvetica, sans-serif;
}

3. Style the list. Add the following rule, which adds a solid border around the definition
list that has a codeList class value:
.codeList {
border: 1px solid #aaaaaa;
}
4. Style the definition term element. Add the following rule, which styles the dt element.
The rule colors the background of dt elements within any element with a
class value of codeList, and also adds some padding so the content of the dt
elements doesn’t hug their borders. The font-weight value of bold ensures the
content stands out, while the border-bottom value will be used as a device
throughout the other rules, separating components of the design with a fairly thin
white line.
.codeList dt {
background: #dddddd;
padding: 7px;
font-weight: bold;
border-bottom: 2px solid #ffffff;
}
5. Style the list items within the ordered list by adding the following rule. The
margin-left value places the bullets within the definition list, rather than outside
of it.
.codeList li {
background: #ffffff;
margin-left: 2.5em;
}

**Note : Note that in Internet Explorer, the bullets typically display further to the left than in
other browsers. This behavior can be dealt with by overriding the margin-left value
of .codeList li in an IE-specific style sheet attached using a conditional comment—
see Chapter 9 for more on this technique.

.codeList code {
background: #eaeaea;
display: block;
border-bottom: 2px solid #ffffff;
border-right: 2px solid #ffffff;
font : 1.2em "Courier New", Courier, monospace;
padding: 2px 10px;
}

  Finally, style the code elements. The background value is slightly lighter than that
used for the dt element, ensuring that each element is distinct. By setting display
to block, the code elements stretch to fill their container (meaning that the background
color also does this). The borders ensure that each line of code is visibly
distinct, and the border-right setting essentially provides a border all the way
around the code lines, seeing as the border-bottom setting in .codeList dt
defines one at the top of the first line of code. The font is set to a monospace font,
and the padding values place some space around the code, making it easier to
read.