does internal rule beat external rule?

Participant ,
Nov 24, 2021 Nov 24, 2021

Copy link to clipboard

Copied

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?

Views

94

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 24, 2021 Nov 24, 2021

Copy link to clipboard

Copied

forgot to add this image

dev tools.gif

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 24, 2021 Nov 24, 2021

Copy link to clipboard

Copied

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/

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 24, 2021 Nov 24, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 24, 2021 Nov 24, 2021

Copy link to clipboard

Copied

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Nov 24, 2021 Nov 24, 2021

Copy link to clipboard

Copied

quote

forgot to add this image

dev tools.gif


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

Birnou_0-1637816030241.png

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 25, 2021 Nov 25, 2021

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines