locked
same css name in 2 stylesheet file - overriding problem RRS feed

  • 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 

    Thursday, August 25, 2016 4:34 PM

Answers

  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 30, 2016 5:41 AM

All replies

  • 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;
            }

     

    Thursday, August 25, 2016 5:03 PM
  • User-1100884601 posted

    Hi ,

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

    Thanks

    Udal

    Friday, August 26, 2016 4:27 AM
  • User1413134711 posted

    Set inline css in h1 tag 

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

    Friday, August 26, 2016 5:23 AM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, August 30, 2016 5:41 AM