Body { Font-Size: 100.01%; } Vs Body { Font-Size: 100%; }

body { font-size: 100.01%; } vs body { font-size: 100%; }?

The declaration body (or html) { font-size: 100.01% } compensates rounding errors, in particular in older versions of Opera and Safari. Both would otherwise display fonts that are too small.

A relative font-size (%, em) is always interpreted relative to the font size of the parent element. So it's not a bad idea to implement kind of a initial reset in the top element, which you can achieve with body {font-size: 100%}.

Is using font-size: 100.01% still needed, and for what browsers?

Answer taken from CSS: Getting Into Good Coding Habits by Adrian Senior

This odd 100.01% value for the font
size compensates for several browser
bugs. First, setting a default body
font size in percent (instead of em)
eliminates an IE/Win problem with
growing or shrinking fonts out of
proportion if they are later set in
ems in other elements. Additionally,
some versions of Opera will draw a
default font-size of 100% too small
compared to other browsers. Safari, on
the other hand, has a problem with a
font-size of 101%. The current "best"
suggestion is to use the 100.01% value
for this property.

Should I set the default font-size on the body or html element?

Now that the rem unit is starting to become popular, setting the base font-size on the root element (html tag) is advised (rem stands for root em).

Setting base font size to 17px: Should it be done on body or on paragraph, accessibility wise?

You can’t assume that the "base size" is 16px. While it may be the default for most desktop web browsers, users can change this value.

If your question is body vs. p, note that there are usually other elements than p that may contain text that should often be in the same size. For example li, dt, dd, or div for lines that are not suitable for p, form elements like input, etc.

The nicest way for your visitors would be to set the main content’s (i.e., the text body) font size to 1em (resp. font-size:medium; resp. font-size:100%;), as this is the font size that users might have set up in their browser deliberately. Of course it should be no problem to go a little bit higher or lower from there.

Should we always keep same value for body {font-size:...} which we want to use content p?

It's good to define a global value, that changes relatively (em) or absolutely (px) when needed.
No, the pixel values won't add up. However, if body is defined as 12px and p is defined as 2em (a relative unit), then p will be 24px.
Again, it's good to define base globals so values are easier to predict.

Double font size on mobile Device

Use a mobile browser detection (either server-side or client-side). You can find this at http://detectmobilebrowsers.com/. If the browser is mobile, add the class mobile to the body tag.

E.g. if you use the jQuery code from Detect Mobile Browsers:

$(document).ready(function()
{
    if(jQuery.browser.mobile)
    {
        $('body').addClass('mobile');
    }
});

Then, in your CSS, you can use body.mobile {} and .mobile .something {} to apply mobile specific styles.

Font sizes in px in modern browsers (is it good, what about 120 dpi?)

I generally recommend to stick w/ em- or %-based font-sizes to avoid headaches related w/ the pixel based approaches. However, you might want to use px for the base font size and adjust it w/ CSS3 media queries to your needs (particularly querying for the resolution should help you).

The downside of this method is that, as so often, IE 7 and 8 will need yet another hack as IE is the only browser in your list currently not supporting media queries. hth & good luck!

Body { Font-Size: 100.01%; } Vs Body { Font-Size: 100%; }