Styling Code Elements with CSS
October 30, 2009
A lot of sites use the <code> tag to format pieces of code. However, what do you do if you want to do a code block, like:
body {
some css stuff
}
I personally use <pre><code>. This way, I can take some code and paste it in and it will look like my normal code.
One thing to make sure is that <pre><code> are just like that, on the same line as each other and on the same line of the first line of code text. Otherwise, you end up with an extra line you don’t want because of the <pre> element.
For an example, here’s the css I use for that code block:
pre code {
font-family:monospace;
margin:10px 25px;
padding:10px;
border:1px solid #aaa;
color:#336b45;
display:block;
font-size:1.1em;
}
Ta da!
