STYLE SHEETS

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.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

March 30, 2010

TABLE OF CONTENTS:

<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>

<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>

<h2>Footer section</h2>

</div>

</body>

</html>

Mission accomplished. At this point, if you test the sample web page on your own browser, the embedded PHP fragment should be displayed with an elegant zebra background behind it, like the one show below:

There you have it. As you can see, improving the visual presentation of online code fragments with CSS is a straightforward process that can yield remarkable results. The zebra effect is only a typical example of what can be made to enhance the readability of code snippets, but if you need to implement more complex features, such as syntax highlighting, then a server-side or a JavaScript-based solution is possibly the best option to pick up.

Final thoughts

In this third episode of the series, I demonstrated in a step-by-step fashion how to add an engaging zebra background effect to a PHP fragment included in a web page, something that contributed to improving its readability. As shown before, 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.

All of the hands-on examples developed so far have shown how to decorate code blocks using the classical <pre><code> tandem. It’s possible, however, to achieve more polished results with ordered lists, as they allow you to enumerate code lines automatically. This handy approach will be covered in depth in the next tutorial, so don’t miss it!

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.