Here’s an example how to target only webkit browsers:

		 input.search{
			color: red;
		}

		@media screen and (-webkit-min-device-pixel-ratio:0) {
			input.search{
 				color: green;
			}
		}

By using the Data URI scheme you can embed images directly into your HTML and CSS. It works by encoding an image into a base64 string and place it directly withing an HTML image tag or as a CSS background URL. Such a base64 string url example in your CSS looks like this:

div.image {
 background: data:image/x-png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAABLElEQVR42qSTQStFURSFP7f3XygyoAwoYSYMPCIpk2egMFSmUvwCRpSRDIwYGbwyVuYykB9y914m951z7nHe6J26dc9u77XXWmdvJLF7/audqx9JYuvyW92LL0li8K2df2r17CPEVk7ftXTclyQqAMmRCwC5I3fS42a4W7y74VYDNAAuJA8AaXIsSACsDgAdAJeFrnnyoMBygKZJJ3b1It0AmsTMDPdEgrujJqHEwCxqznMaD2KgyCDRnEuo8qJhHvx/hcQDbzGoix5Yi4G1TcwZWNEDKwJU+WDkhg2ToDaD+M65YcVB8jg3Y5IY5VQAyyf9gLJw+CqAuYNnAczsPQpgevtBU937kDexcdssj8Ti0ZskMd97CRs3u//U2sjJzbtwH1+/Cf8jS/gbAMmWc42HzdIjAAAAAElFTkSuQmCC
}

I found this generator who generates such a string after uploading an image.
I used this for iPhone/iPad app development.

http://webcodertools.com/imagetobase64converter

It’s nice to style your buttons with CSS. – For anchor tags, this is easy todo, if you use the sliding doors CSS technique.
But it gets nasty when you want to style the submit button, specially if you want the same results in all modern browsers.

What I often see, is in this case, that people create the submit button via an anchor tag as well. The onsubmit action will be added dynamicly via Javascript. – Sure this works, but when people disable Javascript (and people do), you can not submit the form. – Bad accessibility.

The input type submit button is the worse button to style. But there is also a button tag, which can contain a type=submit. This button tag, can contain child tags, just as you do with an anchor tag.
Please see my solution below.

You can download the image files:
left main button image | right side button image

html:

<p>
<a class="button" href="#"><span class="right"><span class="inner">Ok</span></span></a>
</p>
<p>
<button type="submit" class="button" href="#"><span class="right"><span class="inner">Submit</span></span></button>
</p>

css:

.button {
    background: none;
    clear: both;
    cursor: pointer;
    color: #444;
    display: inline-block;
    font: normal 12px arial, sans-serif;
    overflow: hidden;
    text-decoration: none;
    whitespace: no-wrap;
}

.button .inner {
   background: transparent url(../siteimg/submit-button-img-span.gif) no-repeat scroll top left;
   float: left;
}

.button .right {
    background: transparent url('../siteimg/submit-button-img-right.gif') no-repeat scroll top right;
	float: left;
	padding: 0 18px 0 0;
}

a.button span {
	padding: 5px 0 5px 18px;
}

button.button {
	border: none;
	padding: 0;
}

button.button span {
	height: 24px;
	line-height: 24px;
	padding: 0 0 0 15px;
}

.button:active span, .button:hover span {
	color: #000;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}

Check my demo.

1. Do not use much styles. If you print out a webpage you don’t want to print colors! (unless to color hyperlinks). Keep it plain and simple and write a short print stylesheet.
   
2. Make sure you named your (2nd) stylesheet for printing: print.css
   And give it the ‘media’ attribute print:

   <link rel="stylesheet" type="text/css" href="print.css" media="print" />

   
   

3. Use a good readable font. I would say a “serif” 12pt font and ofcourse keep it black.

   body { color : #000000; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size : 12pt; }

   
   

4. It should be clear when a hyperlink is printed. Therefore keep links underlined. You can even color it blue.

   a { text-decoration : underline; color : #0000ff; }

   
   

5. Do not print out layout parts, navigation, javascript or flash animations.

   #navigation, #headerImage { display: none; }

   
   

6. This is a handy trick: With these styles you can set a page break for printing before or after:
   Possible attributes are: always (print page break) | auto (default – page break where page ends) | left | right.

   H1 {page-break-after: auto}
   H2 {page-break-before: always}

   
   

7. Another handy trick, is to print the URL after an underlined hyperlink:

   a:link:after, a:visited:after { content: " (" attr(href) ")"; }

   
   

Do you like those iTunes styled tabels? These tabels give you a nice overview since every odd and even row contains a different color.

But when your tabel contains dynamic data, you don’t know how many and which rows you have to style with an odd or even color class.

Styling odd and even rows, can be done by using CSS 3, write pseudo class notations.

table tbody tr:nth-child(even) { background: #f1f5fa; }
table tbody tr:nth-child(odd) { background: #fff; } 

Ofcourse and unfortunately not all browsers (*IE(eek)*) support CSS 3.

Read below, how to do this with jQuery. You can write this in less then 5 lines.
You will only need to download JQuery Javascript framework and including it in your webproject.

Here are the files you will need:

The HTML to create a accessible tabel:

<table>
 <thead>
  <tr>
   <th>Head 1</th>
   <th>Head 2</th>
   <th>Head 3</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Cell 1</td>
   <td>Cell 2</td>
   <td>Cell 3</td>
  </tr>
  <tr>
   <td>Cell 4</td>
   <td>Cell 5</td>
   <td>Cell 6</td>
  </tr>
  <tr>
   <td>Cell 7</td>
   <td>Cell 8</td>
   <td>Cell 9</td>
  </tr>
 </tbody>
</table>

The styles for a iTunes generic tabel style:

table { background-color: #fff; border: 1px solid #ddd; empty-cells: show; font-size: 90%; margin: 10px 0 20px 20px; padding: 4px; text-align: left; width: 650px; }
table caption { color: #777; margin: 0 0 5px 0; padding: 0; text-align: center; text-transform: uppercase; }
table thead th { border: 0; border-bottom: 1px solid #ddd; color: #000; font-size: 90%; padding: 3px; margin: 0 0 5px 0; text-align: left; }
table tbody tr { background-color: #fff; }
table tbody tr:hover { background-color: #3D80DF !important; color: #fff; }
table tbody td { color: #000; padding: 2px; border: 0; }
table tbody tr:hover td { color: #fff; } 

jQuery, where you will pick all the odd table rows and give it the blue iTunes color:

//JQuery functions
$(document).ready(function(){
	//odd even table cells.
	$("tr:odd").css("background-color", "#F1F5FA");
});