To add Zebra Strips to a list, all you need to do is adding the following pseudo-class to the end of the CSS element you wish to edit:

ul#example_list li:nth-child(odd) {
 background-color:#FFF;
}

In this example, I’ve used an unordered list element. The data in the brackets refers to the “nth” number to affect, for example putting “(even)” will affect every even <li>. You can also put number in, for example “(3)” would affect every 3rd <li>.

Below is a link to a working example of the code in action (Feel free to copy & share).

If you want to read a bit more about the nth-child pseudo-class I recommend the sitepoint CSS reference.

However, many webmasters (and blog lords) forget to add a print sheet (many of the themes for wordpress lack even a simple CSS print sheet). Here is a quick video tutorial on creating a simple print CSS really quickly.

Linking to the Print CSS

Linking to the Print CSS is quite simple; essentially all you need to do is use the following code:

<link href="URL TO PRINT CSS HERE" rel="stylesheet" type="text/css" media="print" />

Hiding everything unnecessary

Hiding elements can be quite tricky, but here is a snippet of code I normally use:

#element_you_want_to_hide{
	visibility:hidden;
	position:absolute; top:0px; left:0px;
}

Further Reading

Don’t Rely on Background Colors Printing – A really neat article on why using colours in your print CSS is just a bad idea.

CSS Mastery: Advanced Web Standards Solutions 2nd Edition – An awesome book which is recommended by most professional web designers and developers.

Add the following to the top of your CSS:

* {
	margin: 0;
	padding: 0;
	color: #000;
	background: #FFF;
	font-style: inherit;
	text-decoration: none;
	font-size: 100%;
	font-weight: normal;
}

Example

Click here to see Live Demo

The Code

<style type="text/css">

<!--

/* Style the links */

#exmaplebox a {

    float:left;

    text-decoration:none;

    font-size:14px;

    font-weight:bold;

    height: 22px;

    width: 100px;

    text-align:center;

    display:block;

    padding: 0 10px 0 10px;

    margin: 2px 10px;

    border:1px solid #CCC;

}

#exmaplebox a:hover {

    text-decoration:underline;

}

/* this bit is the drop down bit */

#exmaplebox ul {

    float:left;

    margin:0;

    padding:0;

    height: 26px;

    width: 150px;

    overflow:hidden;

    list-style:none;

}

#exmaplebox ul:hover {

    overflow:visible;

}

#exmaplebox ul li {

    float:left;

    width:300px;

    margin:0;

    padding:0;

}

-->
</style>
<div id="exmaplebox">

<a href="#link">Link</a>
<ul>
<li><a href="#link">Link</a></li>
<li><a href="#link">Large Sub-Link</a></li>
<li><a href="#link">Sub-Link</a></li>
</ul>
<ul>
<li><a href="#link">Long link</a></li>
<li><a href="#link">Sub-Link</a></li>
<li><a href="#link">Large Sub-Link</a></li>
</ul>

<a href="#link">Link</a>
</div>

Download the Code