<Code> tags CSS Like Wikipedia [closed]

Question

I am coding some pages in HTML and CSS which will contain samples of code. I want to have the grey box like the do on WikiPedia (I know this is done with Media Wiki). An example page is:

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

You will see the code has a grey box with dotted lines around. Also higher up the page where just 'dd' is used the text is monospace but no box is shown.

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 an any inspecting tool (like, e.g., Firebug) to see, what CSS has been used on a 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 have code highlighting, have a look at highlight.js.