does internal rule beat external rule?

Report · Nov 24, 2021

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 @2021 in the footer and are trying to remove the padding-right 25px which, in phone portrait mode makes the @2021 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?

Report · Nov 24, 2021

forgot to add this image

Report · Nov 24, 2021

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/

Report · Nov 24, 2021

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

Report · Nov 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 & Moderator

Report · Nov 24, 2021

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...

Report · Nov 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

Adobe Community

does internal rule beat external rule?