Using a Zebra Background Effect to Style Code Blocks with CSS
In this third part of a seven-part series on styling code blocks, I demonstrate how to add an engaging zebra background effect to a PHP fragment included in a web page. This background effect improves its readability. As you'll see, the process is very similar to assigning background images to other HTML elements, so you shouldn’t have major trouble implementing this effect in your own website.
Using a Zebra Background Effect to Style Code Blocks with CSS - Review: adding an elegant and readable look to online code fragments (Page 2 of 4 )
Just in case you haven’t read the previous installment of the series, where I explained how to improve the visual presentation of an online code fragment (a PHP class, to be more specific) while keeping its semantic meaning intact, below I listed this example, so you can analyze it in detail and grasp its driving logic. Here it is:
<!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)</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;
overflow: auto;
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>
There you have it. As the above web page shows, making a code fragment look pretty elegant and readable with CSS is truly a breeze. Of course, aside from tweaking the visual presentation of the fragment, by playing around with background colors, borders or typefaces, the semantic aspect of the process must also be tackled correctly. This is achieved, in this case, by the inclusion of the corresponding <code> tags within the web page.
In addition, here’s a screen capture that depicts pretty clearly how the previous code fragment is displayed on the browser. Check it out:
Okay, at this stage feel free to stop reading and look for more interesting things to do. But wait a minute! Didn’t I say before that it was possible to decorate code snippets with a nifty zebra background effect to improve their readability? Well, that’s right. So, if you’re interested in learning how to accomplish this in a simple manner, then read the following section.
Style Sheets 
HTML5 Boilerplate Introduction
