This is a simple one, but makes your code pages stand out and easy to read. Simply add this to your style sheet and you’ve got a nice new look to those code blogs. Note: Make sure your code starts on the line under the code statement, otherwise there will be no top padding.
code {
color: #660000;
background: #FFFFCC url(./images/code.gif) no-repeat 92% 92%;
position: relative;
width: 94%;
margin: 10px 0 0 0;
padding: 0px 10px 11px 10px;
border: 1px dotted #000000;
overflow: auto;
text-align: left;
font-size: 1.2em;
line-height: 1em;
display: block;
}
This is the example we used on this site. The background image is simply a GIF of the word ‘code.’ Try it with a class attached if you would like different ones for HTML, Javascript, etc. If you had a class of .htmlcode then you would just call it as code.htmlcode. Play around with the settings to make it look the way you want.
