In this fourth part of a seven-part series on styling code blocks with CSS, I explain how to enhance the visual presentation of code blocks on web pages by using something as simple as an ordered HTML list. This approach permits you to automatically generate line numbers, which makes code fragments much more readable.
Using Ordered Lists to Style Code Blocks with CSS - Review: using pre and code tags with online code blocks (Page 2 of 4 )
Before I start illustrating how to provide online code blocks with a refined and readable appearance with ordered HTML lists, first I’d like to spend a few moments reintroducing the example built in the preceding chapter of the series. That example showed how to accomplish a similar task, but by means of <pre> and <code> tags.
With that said, here’s how this example was originally developed. Take a look at it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Styling code snippets with CSS (uses pre and code tags with a background image)</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
background: #000;
font: 0.9em Arial, Helvetica, sans-serif;
color: #000;
}
#wrapper {
width: 960px;
margin: 0 auto;
background: #c0c0ff;
}
#header, #content, #footer {
padding: 20px;
}
p {
margin-bottom: 20px;
}
/* <pre> selector */
pre {
width: 600px;
padding: 0;
margin: 0;
background: #fff url("bg_code_block.gif") left top;
overflow: auto;
overflow-Y: hidden;
font-size: 12px;
line-height: 15px;
border: 1px solid #808080;
}
/* <code> selector */
pre code {
display: block;
padding: 0;
margin: 0 0 0 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Styling code snippets with CSS</h1>
<h2>Header section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
</div>
<div id="content">
<h2>Example of a code snippet styled with CSS</h2>
<pre>
<code>
class Autoloader
{
private static $_instance = null;
// get Singleton instance of the autoloader
public static function getInstance()
{
if (self::$_instance === null)
{
self::$_instance = new self;
}
}
// private constructor
private function __construct()
{
spl_autoload_register(array($this, 'autoload'));
}
// prevent cloning instance of the autoloader
private function __clone(){}
// autoload classes
public static function autoload($class)
{
$file = $class . '.php';
if (!file_exists($file))
{
require_once 'ClassNotFoundException.php';
throw new ClassNotFoundException('The file containing the requested class was not found.');
}
require_once $file;
unset($file);
if (!class_exists($class))
{
require_once 'ClassNotFoundException.php';
throw new ClassNotFoundException('The requested class was not found.');
}
}
}
</code>
</pre>
</div>
<div id="footer">
<h2>Footer section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Sed quis elit erat, et ultricies diam. Phasellus non turpis malesuada erat ultrices tincidunt sed vitae magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis purus risus, lacinia at faucibus id, luctus nec diam. In nulla neque, consequat ac hendrerit ac, pulvinar eu dui. Aenean in arcu felis, non hendrerit est.</p>
</div>
</div>
</body>
</html>
True to form, the CSS styles applied to the <pre> and <code> selectors are self-explanatory, as they simply assign slim borders, padding and a fixed width of 600px to any HTML element wrapped by the pertinent selectors. Quite possibly the most interesting facet of the whole styling process is the assignment of a tiled background image to the <code> tag, which produces the following zebra effect:
Not too bad, huh? Considering that generating this pretty stylish output only required us to combine a couple of tags and some simple CSS properties, the approach is worth considering. But, have you launched Firefox and seen how the previous code snippet is rendered on screen? Good. Now, it’s time to move on and dig more deeply into the approach mentioned in the introduction, which bases its functionality on using ordered lists to polish the visual presentation of code blocks.
The basic concepts of this brand new method will be discussed in the following section. So, click on the link below and keep reading.
Style Sheets 
HTML5 Boilerplate Introduction
