Looking for Custom <code> & <pre> CSS styles in Wordpress!

Question

I'm looking for a way to customize my < code > and < pre > tags in my blog.

I'm in need of custom CSS styles/codes. Anyone able to guide me to a few good examples?

Answer 1

code {
    font-family: Consolas, monospace;
}

There's an example! :)

Answer 2

The only thing I tend to like from <code> or <pre> blocks (incidentally, I'd advise against <pre> in general, since while it's still current it'd be better to use a descriptive named-div or span) is that it use a monospace font. Using a JS markdown script would be useful too. But from the CSS point of view:

pre,
code  {font-family: consolas, courier, monospace;
       font-size: 1em;
       line-height: 1.2em;
       white-space: pre; 
       background-color: #ccf; /* any colour's okay, 
       so long as it's different to the page-background  
       (for ease of recognition) and contrast to the text */
       color: #000; /* likewise the background-color comment */
       border: 1px solid #666;
       -moz-border-radius: 1em;
       -webkit-border-radius: 1em;
       border-radius: 1em; /* just in case */
       padding: 1em;
       margin: 1.2em 1em;
       width: 50%; /* or whatever you prefer */
       float: right;
       }