Simple Syntax Highlighter

Scripts for Syntax Highlighters are found in large number on the Internet. In this article let me show you, how to create a simple CSS Syntax highlighter.

1. .syntax{
   background-color:black;
   color:white;
   border-style:outset;
   border-width:3px;
   border-color:black;
   opacity:0.75;
   -moz-border-radius:10px;
   -goog-ms-border-radius:10px;
   -ms-border-radius:10px;
   -o-border-radius:10px;
   border-radius:10px;
   padding:10px;
   background-size:100% 150%;
   background-repeat:no-repeat;
   }
2. The above code generates you a simple Syntax Highlighter.
   • background-color  :is a CSS property that gives the background a mentioned color.
   • color :
     is a CSS property that gives the text inside the <div> a mentioned color.
   • border properties are explained here : http://css.krishnainfotron.com/2012/05/border-styles.html
   • browser specific definitions are also explained :  http://css.krishnainfotron.com/2012/04/browser-specific-definitions-css.html
     padding is explained here : http://css.krishnainfotron.com/2012/12/padding.html
3. You can know how to use this CSS in your blogger blog here : http://css.krishnainfotron.com/2012/04/how-to-define-css-in-blogger-blog.html and in general html here : http://css.krishnainfotron.com/2012/04/how-to-define-css-in-general-html.html

Padding

Padding is a property used in CSS to fix the content of the division at a particular distance from the borders.
Lets take up a simple example :

.padd{
border:3px solid red;
}

The above code's result will be like this.

A bit altered :

.padd{
border:3px solid red;
padding:10px;
}

The above code's result will be like this. Here the content is 10px away from each border.

.padd{
border:3px solid red;
padding:20px 10px;
}

The above code's result will be like this. Here the content is 10px away from left and right borders and 20px away from top and bottom borders. Changing the places of 10 and 20 px in the code would get a reverse effect.

Therefore, padding has four attributes :

1. padding-top
2. padding-bottom
3. padding-left
4. padding-right