Transition duration

It is yet another good attribute I came across. Let me tell an example. Let us consider we have a division tag with CSS defined as follows.
Refer : Browser Specific Defenitions

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

Border styles

We saw solid as a border style while seeing about Square and Rounded Borders. Now, I'll explain some other styles and how to define it.

Square and Rounded Borders

Read : Browser Specific Definitions.
The post is created in Example and Explanations order.
Let's start with,

1. .krish{
   border:3px solid white;
   -moz-border-radius:35px;
   border-radius:35px;
   }
   

   Output
2. .krish{
   border:3px solid white;
   -moz-border-radius-topleft:35px;
   border-radius-topleft:35px;
   }
   

   Output
3. .krish{
   border:3px solid white;
   -moz-border-radius-bottomright:35em;
   border-radius-bottomright:35em;
   }
   

   Output
4. .krish{
   border:3px solid white;
   -moz-border-radius-bottomright:35pt;
   border-radius-bottomright:35pt;
   }
   

   Output
5. .krish{
   border:3px solid white;
   -moz-border-radius:35px 0px 35px 0px;
   border-radius:35px 0px 35px 0px;
   }
   

   Output
6. .krish{
   border:3px solid white;
   }
   

   Output

Explanations :-

1. border-radius:35px; will yield rounded border for all sides
2. border-radius-topleft:35px; will yield rounded border at the Top left side and note that the type is "px" pixel.
3. border-radius-bottomright:35em; will yield rounded border at the Bottom Right and note that the type is em where 1em = 16pt "pt" is points
4. border-radius:35px 0px 35px 0px; will yield rounded borders at topleft and bottom right postitions. the general syntax is
   border-radius:topleft topright bottomright bottomleft;
   It can be in any type.
5. When you don't mention border-radius property, there will be no rounds, but there will be square borders

Browser Specific Definitions - CSS

Read : How to define CSS in General HTML and Blogger and as tag?

Lets take the following example,

.textborder{-moz-border-radius:0.5px}

In the above code, I've mentioned something -moz- before border attribute. Why?
All browsers doesn't support basic codes. Each browser has their own attribute definition.

Attribute to be added	Browser	Example
-moz-	Mozilla	-moz-border-radius:0.5px;
-o-	Opera	-o-border-radius:0.5px;
-ms-	Internet Explorer	-ms-border-radius:0.5px;
-webkit-	Safari & Google Chrome	-webkit-border-radius:0.5px;

So? What If my webpage will be viewed in all of these browsers? How will I define  for all browsers?
Yes! You can define for all browsers. You should define the CSS as follows,

.textborder{
border:0.5px solid black;
-moz-border-radius:0.5px;
-o-border-radius:0.5px;
-ms-border-radius:0.5px;
-webkit-border-radius:0.5px;
border-radius:0.5px;
}

I have mentioned border-radius at the end. Why?
When we've left any of the browser in browser specific definition, the one without browser specific definition may take effect.

Now, the CSS result can be viewed in all browsers as below.

The TroubleShooters Forum - https://groups.google.com/forum/?fromgroups#!forum/thetroubleshooters

For any suggestions for this article, feel free to suggest via comments.

CSS as tag.

Read : How to define CSS in General HTML & in Blogger.

Removing a dot while defining CSS will help you to use CSS style as tag.
For example :
We defined CSS with a prefixed dot as,

.textborder{border:0.5px solid black}

and used as,

<div class="textborder">Something here</div>

Now, we will define the CSS in the same way, but without a dot as

textborder{border:0.5px solid black}

and use as,

<textborder>Something here</textborder>

The result will be as follows :-
Something here and when your text expands, the border will expand
And, when you come to next line, It will look like this. Border for each line.