CSS <Code> Tags Like Wikipedia

Question

I encode some pages in HTML and CSS that will contain code samples. I want a gray box, like on WikiPedia (I know this is done with the Media Wiki). Page example:

http://en.wikipedia.org/wiki/Dd_(Unix)#Uses

You will see that the code has a gray box with dashed lines. Also above on a page where only 'dd' is used, the text is monospaced, but the window does not appear.

Could you tell me how I get the same styles with CSS around the tag?

thanks

Peter Jones

Answer 1

HTML

 <code>dd if=/dev/sda of=MBR.img bs=512 count=1</code>​ 

CSS

 code{background:#F8F8FF; border:black dashed 1px; padding:6px}​ 

Demo

Answer 2

Just use any validation tool (e.g. Firebug) to see which CSS was used on the page. As for your example, this is the following:

 { background-color: #F9F9F9; border: 1px dashed #2F6FAB; color: black; line-height: 1.1em; padding: 1em; } 

PS: If you want to highlight the code, check out highlight.js .

Answer 3

 div { width:500px; background-color:#F9F9F9; padding:20px 20px; border:1px dashed blue; }​ 

http://jsfiddle.net/naWLM/1/

If I understood correctly, this is what you wanted.