Overwrite font: in CSS

Question

I have an existing web page on which there is a CSS file that I am unable to change which has the following CSS in it:

body {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    font: 0.8em Verdana,Arial,sans-serif;
}

I am adding in an additional CSS file, and for the part of the page that its controlling I need to be able to overwrite the font size that is above, and set the size to the auto size as supplied by the browser and a different font family.

I know about putting the !important tag on there so changing the font family hasn't been a problem, but if I don't put a size in there it strips it out when the page compiles.

I thought I could use font-size: to override it, but I'm unclear as to how to set that to be whatever the browser has automatically.

All help would be much appreciated! I'm a bit of a CSS novice!

Answer 1

try

html body {
    /* your stuff here */
}

By using the html element, it makes the selector more specific and applies the overwrite.

Example:

body {
    font-family: sans-serif;
    font-size: 30px;
}

html body {
    font-family: serif;
    font-size: 1em;
}

Hello world.<br>
This is the 'normal' size because of the html element selector allowing an override.

Edit: The answer has been accepted but I changed the font-size to 1em. As this is the initial body tag it should reset the the browser default size. This was asked in the question and I didn't cover this.

Answer 2

Well the default font-size is medium.

.wherever{
    font-size: medium;
}

That will overwrite the body font size that is added.