2 ways to style html codes in your blog posts

View demo.

Once you learn how to add HTML, css or javascript codes to your blogger posts (also called code snippets), the next step is to style it.

To customize codes, we'll use CSS. It can be done in two ways.

Technique #1. Using <PRE> and <CODE>.

Sohtanaka has given a very detailed explanation on how to dress them up using background images with <pre> and <code> tags. View example below.

Here is his tutorial.

To see a variety of styles, check out his demo page.

Technique #2. Using <DIV>.

The second technique is almost similar to the first one. The only difference is that, we define the code under <div>, NOT <pre> and <code> tags.

Here is how NewBloggingTipz did it.

How I Customized My Code Snippet?

I applied the first technique with a minor adjustment. Instead of a background image, I used a css trick that shows a "stitched look".

Here is my modified code.


pre {
    padding: 5px 10px;
    margin: 10px 40px 10px 30px;
    background: #2d2d2d;
    color: #fff;
    font-size: 10px;
    line-height: 1.3em;
    border: 2px dashed #fff;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-box-shadow: 0 0 0 4px #2d2d2d, 2px 1px 4px 4px rgba(10,10,0,.5);
    -webkit-box-shadow: 0 0 0 4px #2d2d2d, 2px 1px 4px 4px rgba(10,10,0,.5);
    box-shadow: 0 0 0 4px #2d2d2d, 2px 1px 6px 4px rgba(10,10,0,.5);
    text-shadow: -1px -1px #aa3030;
    overflow-Y: hidden;  /*--Hides vertical scroll created by IE--*/
}

pre code {
 margin: 0 0 0 10px;  /*--Left Margin--*/
 padding: 5px 0;
 display: block;
}

Here is how I called for it.