CODEWITHSUNDEEP
htmlcssfonts
hlh3406
hlh3406

Reputation: 1400

Overwrite font: in CSS

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!

Upvotes: 5

Views: 33777

Answers (6)

John Reid
John Reid

Reputation: 1185

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.

Upvotes: 8

Emipro Technologies Pvt. Ltd.
Emipro Technologies Pvt. Ltd.

Reputation: 14746

  • Sets default font family to Helvetica.

  • Prevents iOS text size adjust after orientation change, without disabling user zoom.

     html  
    {
         font-family: Helvetica;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;

    }

body
 {
     font-size: 14px;
  }

Upvotes: 0

Albzi
Albzi

Reputation: 15609

You can make something more specific which will overwrite the styles, e.g

body div {
  font-family:Helvetica;
}

Also, font-size's default value is medium. You can also use initial, but that isn't supported in IE.

body div {
  font-family:Helvetica;
  font-size:medium;
}

Upvotes: 3

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

now you can try to this 

html body *{
  font-family: //
}

Upvotes: 2

ZeroBased_IX
ZeroBased_IX

Reputation: 2727

Well the default font-size is medium. 

.wherever{
    font-size: medium;
}

That will overwrite the body font size that is added.

Upvotes: 2

Magicprog.fr
Magicprog.fr

Reputation: 4100

Use unset to clear the font-size value:

body {
  font-size: unset;
}

Upvotes: 1

Related Questions