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.

The Core Team
Editorial Staff Members at 'corePHP'
Editorial staff for the Core Technology Blog for 'corePHP' - news, views insights and advice for e-commerce, marketing technology , web design and development.