same css name in 2 stylesheet file - overriding problem

Question

User-1100884601 posted

Hi ,

I have 2 css file  book.css and main.css both have same class name 

book.css

h1
{
COLOR: #033b62 ;
FONT-FAMILY: , Arial, Helvetica, sans-serif ;
}

main.css

h1
{
COLOR: #033b45 ; 
FONT-FAMILY: , Helvetica, sans-serif ;
}

HTML

<h1>Testing</h1>

When i run the page it  applies for book.css  but again it overrides COLOR & FONT-FAMILY from main.css

I need only book.css applied to H1 TAG  not main.css  and both css files are used in page. 

I tried to solve giving id but id didn't work.    if you face this type of issue then please share the resolution.

Thanks

Udal 

Answer 1

User2103319870 posted

I need only book.css applied to H1 TAG  not main.css  and both css files are used in page. 

You can set !important attribute to your css. The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document.

change your book.css like below

 h1 {
            COLOR: #033b62 !important;
            FONT-FAMILY:, Arial, Helvetica, sans-serif !important;
        }

 

Answer 2

User-1100884601 posted

Hi ,

I did same but it still overriding main.css colors and font family. 

Thanks

Udal

Answer 3

User1413134711 posted

Set inline css in h1 tag 

OR register the main.css first and after that register book.css

Answer 4

User1724605321 posted

Hi ,

I did same but it still overriding main.css colors and font family. 

 Set !important attribute should work , In the case of rules in both style sheets that apply to the same element with the same specificity, the style sheet embedded later will override the earlier one. You can use  F12 develop tool to see which rules apply, and which ones are overridden by others.

As a workaround , you could set a class to the h1 tag . Book.css:

h1.bookCss
 {
 COLOR: #033b62; 
 FONT-FAMILY: , Arial, Helvetica, sans-serif ;
 }

Html:

<h1 class="bookCss">Testing</h1>

In addition , when testing ,you could try clearly different colors ,such as yellow and red.

Best Regards,

Nan Yu