Home arrow Style Sheets arrow Using a Zebra Background Effect to Style Code Blocks with CSS

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
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
March 30, 2010
  1. · Using a Zebra Background Effect to Style Code Blocks with CSS
  2. · Review: adding an elegant and readable look to online code fragments
  3. · Enhancing code snippet readability with a zebra background effect
  4. · Displaying the zebra background on screen

print this article

Using a Zebra Background Effect to Style Code Blocks with CSS
(Page 1 of 4 )

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!

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials