Using a Zebra Background Effect to Style Code Blocks with CSS
(Page 1 of 4 )
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.
Have you ever wanted to empower your technical-minded blog with tons of carefully-crafted code snippets, but you still don’t know how to make them look attractive and readable to your demanding visitors? Fortunately, the solution to your problem is much easier to implement than you might think. Best of all, it requires you to have only an average background in (X)HTML and CSS.
A simple combination of style sheets and HTML tags can be the perfect recipe to provide your online code blocks with an elegant appearance that will please your loyal users, without having to appeal to the functionality offered by complex server-side and JavaScript-based syntax highlighters.
Naturally, just saying how simple it is to polish the visual presentation of code fragments on web pages with CSS needs to be backed up with a bunch of demonstrative and functional examples. In previous articles of the series I demonstrated how to style a short PHP fragment embedded in an (X)HTML document by using a couple of <pre> and <code> tags, in conjunction with a few basic CSS properties.
This process not only turned the PHP fragment into a piece of appealing and readable code, but its inclusion was semantically reflected in the document, thanks to the correct utilization of <code> elements. Also, while this CSS-based approach will work remarkably well with most online code snippets, it can be enhanced even further with the incorporation of the so-called “zebra background” effect. This effect assigns different colors to odd and even lines of code.
Adding this little decorative touch is very easy with CSS, so in the lines to come I’ll be explaining how to implement it within the sample web page defined in the previous chapter of the series.
Are you ready to learn how to add a cool “zebra effect” to your code snippets? Then start reading right now!
Next: Review: adding an elegant and readable look to online code fragments >>
More Style Sheets Articles
More By Alejandro Gervasio
