• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

154

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

Votes

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
Community Expert ,
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/

Votes

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.

Votes

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

Votes

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
Community Expert ,
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

 

Votes

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

Votes

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