Difference between pixels and em.

Here I tried to describe difference between pixels and em. This text is for those specially who are new in css. As a designer I am always face a question about this topic. So I decide to share my knowledge here because from my view this is a common mistake make every designer at the beginning.
First of all need to know about css. CSS means "Cascading Style Sheets".

It is a system of properties which directly effect the display properties of your web page. By using css you can handle your web site design easily. I think css is not so hard to learn. Because at first I don’t know about web design,css,html. But now I can design a site by css. All I do is just study the syntax of css and learn about every property and value. And at last know how to use css in a site. That’s it you are ready to go. You don’t need to have programming knowledge to learn css. So don’t be afraid keep going.
Now focus all of your thoughts or mental activity in following text to understand difference between pixels and em.

Content is the main power of any website. Those site are good who arrange their content in a clean way. To do this you must need to arrange your text give them perfect font style,size,color etc. You can give font size by css in couple of ways. Here I talk about pixel and em.

Apply font size with pixels
By setting font size with pixel you can fully control over the font size.

Example:

h1 {font-size:60px}

h2 {font-size:40px}

p {font-size:16px}

Above examples allows Chrome, Firefox, and Safari to resize the text, but not Internet Explorer.

The text can be resized in all browsers using the zoom tool (however, this resizes the entire page, not just the text).

Apply font size with em

To avoid the resizing problem in IE many web designer use em instead of pixel. And it is recommended by W3C.

The default font size in browser is 16px. And 1 em is equal to current font size it means 1 em is equal 16px.

Here is the formula to calculate pixel to em :

Pixels /16 = em

That means if font size is 60px it will be in em is 3.75em.

With the em size you can adjust the font size in all browser. But there is problem in IE . The problem is when you resizing the text, it becomes larger than it should when made larger, and smaller than it should when made smaller.

To solve this problem you need to set a default font size in percent (%) fot the body element.

Here is an Example:

body {font-size:100%}

h1 {font-size:3.75em} [is equal 60px]

h2 {font-size:2.5 em} [is equal 40px]

p {font-size:1 em} [is equal 16px]

Now our code works perfectly and shows the same text size in all browsers. It also allows all browsers to zoom or resize the text.

Hope this will help you guys. Enjoy and make something awesome.