Make your code stand out!

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.


Sign up today to stay informed with industry news & trends