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 - Assigning a basic style to the pre tags (Page 4 of 4 )
As I said in the segment that you just read, it’d be really useful to assign a basic style to the <pre> tags, which will make the code fragments look more readable and engaging. In consonance with this idea, below I coded an improved version of the previous web page, which this time adds a few simple styles to the aforementioned tags. Check it out:
<!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;
}
/* <pre> selector */
pre {
width: 400px;
padding: 0;
margin: 0;
background: #fff;
overflow: auto;
font-size: 12px;
line-height: 15px;
border: 1px solid #808080;
}
</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>
There you have it. At this point, the <pre> tags have been assigned a width of 600px, along with a white background color, an “auto” overflow and a thin solid border. The result of this “make up” process can be seen in the following image:
That looks much better. The utilization of a couple of <pre> tags along with a few simple styles have finally provided my sample PHP class with a more polished and professional look, and best of all, its source code is much more readable as well. But wait a minute! The inclusion of a code fragment in a web page should always be reflected semantically in the structure of the document, which certainly doesn’t occurs with the previous example.
Fortunately, there’s a simple solution to this issue. However, that will be covered in the next tutorial.
Final thoughts
In this first episode of the series you learned 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. Even though it’s fair to say that this approach does a decent job when it comes to styling online code blocks, it still lacks an important feature: yes, as I mentioned a moment ago, the inclusion of such blocks must also be reflected semantically in the page.
The good news is that this can be easily done with a couple of <code> tags, and the next part of this series will offer a more detailed explanation of how use them in conjunction with the <pre> elements discussed before.
Don’t miss the next tutorial!
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
Style Sheets 
HTML5 Boilerplate Introduction
