In this first part of a series you will learn how to improve the look and readability of code snippets in web pages, thanks to the use of something as simple as a pair of <pre> tags and some CSS styles. This approach does a decent job of styling online code blocks.
Styling Code blocks with CSS: Using pre HTML Tags - Formatting with the pre HTML tag (Page 3 of 4 )
In reality, using <pre> elements for formatting code snippets on web pages is a breeze. The entire process is reduced to wrapping the fragment with the corresponding opening and closing tags, and the job gets done nicely.
Provided that you've grasped how the <pre> tag does its thing, it’s time to use it with the previous web page to preserve the format assigned to the PHP class that you saw before. After adding these formatting elements, the modified version of this web page will now look as follows:
<!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 only the pre tag)</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>
<pre>
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.');
}
}
}
</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>
Even though at first sight the pair of <pre> tags added to the web page seem to do nothing particularly useful, this is a mistaken impression, trust me. In reality, when the page is rendered on the browser with the tags, the code fragment will be displayed in the proper format. This includes the preservation of blank spaces and line breaks. Still not convinced? Well, take a look at the following screen capture and see for yourself:
This is definitely a considerable improvement over the chunk of unreadable and amorphous code shown in the preceding section. Even so, the improvement produced by the <pre> tags can be taken one step further, as they haven’t been given any visual style yet. For instance, it’d be helpful to make the sample code snippet stand out from the rest of the page by assigning to it a width, a different background color, borders and so forth.
That’s exactly what I plan to do in the following section. So, if you wish to learn the full details of this process, click on the link below and read the lines to come.
Style Sheets 
HTML5 Boilerplate Introduction
