CODEWITHSUNDEEP
cssinheritancefontsoverriding
Vikram
Vikram

Reputation: 21

Unable to override font-size:100% & font-inherit property in another CSS file

In my project we have one global CSS file 'global-css' which is used in all the webpages of website. This file contents, 

font-size: 100%;
font: inherit;    
properties for body,div,h1,h2 etc.

Link from where above code is copied http://www.cssreset.com/ - Eric Mayur's. 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
........, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    ***font-size: 100%;
    font: inherit;***
    vertical-align: baseline;
}

I don't have rights to edit this(global-css) CSS file.

But this 2 lines are creating UI issues on my webpages. If i remove this 2 lines from 'global-css' then my webpages works totally fine(without any UI issues). I Somehow want to override this 2 lines into my own CSS file (which will be imported in my webpages only). I have created 1 CSS file(override-css) where i can override any class from 'global-css'.

Kindly suggest good way to override the above properties in my 'override-css'.
Thanks for the help :)

To clarify: I want to set these properties to DEFAULT/NULL so that all elements will take the font from their respective classes.

I tried to override above code in global-css but unfortunatly we dont have default value for font property.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
........, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    ***font-size: ________ !important;
    font: ________ !important;***
    vertical-align: baseline;
}

I want some property value to reset this 2 properties in ss-override.

There is one more 'main.css' CSS file which contains all the classes for elements. But these two lines from 'global-css' are not allowing to apply this styles.

The sequence used for importing CSS is : main -> global-css -> override-css.

Upvotes: 1

Views: 4615

Answers (4)

Mahtab Alam
Mahtab Alam

Reputation: 315

You can try with

font-style: italic;

This will work.

Upvotes: -1

GuyH
GuyH

Reputation: 796

It's not working because you are importing the files in the wrong order - you said above: "Sequence used for importing CSS is : main -> global-css -> override-css".

If you change that order to: global-css -> main you should find everything works right, because what's in main will now override the earlier settings in global-css. And you won't need an override file at all. This will work because the CSS in global all has the lowest possible specificity (just one element eg h2 or div, etc etc) in the rules, so anything following will automatically overwrite those rules. Using !important is not the right way to go at all.

If there is some reason you cannot access the code to change the order of import, you can still link the main CSS file a second time in your HTML (or link a copy of it), after the global file has been imported or linked, so ensuring it's settings will override what's gone before.

Upvotes: 1

Umesh Aawte
Umesh Aawte

Reputation: 4690

Using !importent should solve the problem. But again that is subject to the CSS order and browser. Case: you have used !importent and there is font size property below your statement with importent then yours will not work in some browsers like chrome because of its CSS rendering logic.

Best way is to remove all other font CSS applicable to element and add same in your class

Upvotes: -1

Christopher B
Christopher B

Reputation: 33

Have you tried using the !important attribute.

Otherwise, generally the last css style takes precedence. So if you load the two classes with your attributes then that should override the global.css styles.

Upvotes: 1

Related Questions