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 - Building enumerated online code fragments with ordered HTML lists (Page 3 of 4 )
Unquestionably, HTML lists are very flexible elements that can be used for defining the base structure of a huge variety of more complex components on web pages, such as forms, navigational bars and so forth. In reality, they’re so versatile that I’m going to use them as an alternative method for creating elegant and readable code snippets.
To shed some light on this concept, below I redefined the web page shown in the preceding section. This time, the embedded PHP code has been wrapped by a simple ordered list. Take a peek at this example, please:
<!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 an ordered HTML list)</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;
}
</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>
<li><code>throw new ClassNotFoundException('The requested class was not found.');</code></li>
<li><code>}</code></li>
<li><code>}</code></li>
<li><code>}</code></li>
</ol>
</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>
Admittedly, there’s a couple of things worth analyzing in detail here. Each line of the sample PHP fragment now lives inside an item of an ordered list, and the lines in question have been wrapped by a pair of <code> tags. In doing so, we achieve two benefits: on one hand, the list generates enumerated lines of code (one per item), while on the other hand, the semantic meaning of the code fragment is reflected correctly in the web page. In summary, we get the best of both worlds.
Of course, testing the previous web page in its current state is pretty pointless, as it will only display the PHP code as a rough list containing a few items. That's far from the polished look that we’re looking for here. This implies that it’s time to start adding some CSS styles to the list and its items.
Want to see how this will be done? Then jump ahead and read the lines to come.
Style Sheets 
HTML5 Boilerplate Introduction
