Skip to main content
higgsyd
higgsyd
Inspiring
November 24, 2021
Question

does internal rule beat external rule?

  • November 24, 2021
  • 5 replies
  • 335 views

http://v60.ancestry.higgsy.co.uk/curtis_lilian_maud.html 

In global.css line 60 I have a padding-right of 25 pixels.

In my internal style sheet I have the same rule at line 6 under a media-query for my iPhone Portrait

 

These rules are targeting  @17324990 in the footer and are trying to remove the padding-right 25px which, in phone portrait mode makes the @17324990 left align with wasted space to its right

 

If I go into Firefox dev tools and cancel the first item line 6 in the internal style sheet why does the padding right in global.css line 60 then come into play and thus override. I thought any rule in an internal style sheet overrides the same rule in external style sheet - am I right?

    This topic has been closed for replies.

    5 replies

    B i r n o u
    B i r n o u
    Legend
    November 25, 2021
    quote

    forgot to add this image


    By @higgsyd

     

    I don't get it, strange rules but anyway, it works as expected as soon as the width is higher than 375px and the orientation is portrait...

     

    higgsyd
    higgsydAuthor
    Inspiring
    November 25, 2021

    thanks to everyones advice.  It's made me look again at the question and it seems I confused myself as I tried to disable the rule.  Now I see the cascade was working correctly and I ought to have been focusing on why the rule as coded was not doing what I wanted - thanks anyway

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    November 24, 2021

    The rule of thumb is as follows:

     

    External styesheets:

    The last stylesheet in the list takes priority over previous stylesheets above it.

     

    Embedded styles (in the document <head> and <style> tags) take priority over external stylesheets above it.

     

    Inline styles (in the HTML markup) take priority over Embedded and External stylesheets above it.

     

    Hope that helps.

     

    Nancy O'Shea— Product User & Community Expert
      O
      osgood_
      Legend
      November 24, 2021

      It's probably the 2 &nbsp; that are causing you issues? There is zero need to use &nbsp; to create spaces between items.

      B i r n o u
      B i r n o u
      Legend
      November 24, 2021
      quote

      I thought any rule in an internal style sheet overrides the same rule in external style sheet - am I right?


      By @higgsyd

       

      what you talk about is called cascade... https://css-tricks.com/the-c-in-css-the-cascade/

        higgsyd
        higgsydAuthor
        Inspiring
        November 24, 2021

        forgot to add this image

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices