After my last post about using the <code> element along with entities for > and < to display HTML or PHP on your blog, and setting out to better style the <code> element on this site, I wondered how others were styling the <code> element. So I thought I'd take a look at how Nyssa Brown, Andrew Nesbitt of Teabass, Veerle, Dan Cederhold of SimpleBits fame, Jonathan Snook(of Snook.ca), and Steve Smith(from Ordered List) style their code blocks.

NyssaJBrown.net

Nyssa J. Brown is an excellent designer whose blog I discovered very recently, because it was in a Smashing Magazine article. Here is the current <code> styling on her website, which she does not use the code element for. Instead, she uses a class called .examples, but it really is the same thing:

code1.png

Here is the CSS (Cascading Style Sheets) code she uses to create the effect:

.examples {
     background:#FFF;
     padding:10px;
     font-family:”Courier New”, Courier, monospace;
     color:#000;
     border-left:3px solid #C1CF63;
     width:600px;
     margin:0 0 10px 60px;
}
.examples:hover {
     border-left:3px solid #66C2D1;
}

As you can see, Nyssa sets the background, font, and text color to her liking. The padding is necessary to have a little room between the edges of the box and the text. She creates a light green line using a border only on the left, then changes the line to a light blue when it is hovered over. The width makes sure the text doesn't overflow on her blog, and the margin positions the text inside the box properly, indenting it from the left and the bottom.

Teabass.com

The next example is from Teabass.com, where Andrew Nesbitt (cleverly) styles the <code> element to resemble a rails terminal, because he has mostly done Ruby on Rails development tutorials. Here it is:

teabasscode.png

And here is the CSS Andrew uses to make his terminal-style <code>.

code{
     background:#000;
     color:#fff;
     display:block;
     padding:10px 10px;
     margin:10px 5px;
     overflow:scroll;
     text-align:left;
     }

This CSS is pretty much self explanatory. He sets the background to black, text to white, display to block so it will be considered a block-level element and so there will be line breaks before and after the code excerpt. The padding and margins serve the same purposes as before, and Andrew makes sure that this text aligns left in case he has forgotten to close a <p> tag which had been aligned… say… right, for example. However, Andrew does add something we haven't seen so far. The overflow property is set to scroll so in case he cannot put a line break in the code and it overflows, it will be placed in a scrolling text box.

Veerle's blog

Veerle's design skills are somewhat legendary. Her blog is one of the greatest resources to beginner designers, and the tutorials on her website have something for everyone. Here is her version of the <code> tag:

veerle

Here is the CSS code she uses:


ol.code {
     overflow: auto;
     }
.code {
     border:1px dashed #a6b082;
     padding:3px 0 8px 0;
     margin:20px 0;
     font-family:Courier;
     list-style-type:decimal-leading-zero;
     background:#fff;
     }
.code li code {
     font-family:Courier,”Courier New”,Monaco,Tahoma;
     }
.code li {
     padding:1px 5px 1px 8px;
     margin:0;
     color: #8b946e;
     border-bottom:1px solid #baddff
     }
.code em {
     font-style:normal;
     font-weight:bold;
     color:#ff6600;
     }
.code strong {
     color:#990076;
     }
.code .indent {
     padding-left:20px;
     }
.code .indent2 {
     padding-left:30px;
     }
.code .indent3 {
     padding-left:40px;
     }
.code li.altlist {
     background-color:#f6faff;
     
}

Veerle creates a lined paper look by using an ordered list (<ol>) with the style .code. Then she applies only a bottom border on all list items to create the lined paper effect. She applies fonts, colors, as well as paddings for the same reasons mentioned before. She also makes it so when she uses the emphasis(<em>) tag, the code will be bold. This is useful when showing changes in code as you progress in a tutorial. Finally, she makes another class that she assigns to every second list item. The change in background in this class is what makes the light blue background on every other line.

Out of all of the ones that we've looked at so far, Veerle's was the most complex, but it arguably looked the best. Notice how everything we've looked at has been done with CSS, and no images at all.

Hit the jump because next we are kicking it up a notch. On the next page, we're going to look at how Dan Cederholm(Simplebits), Jonathan Snook(snook.ca), and Steve Smith(Orderedlist) style their <code>.

Here you go:


Jump!

Pages: 1 2