Help with CSS Location

MDN Learn
#1

The effect of CSS location

Finally, it is also useful to note that the importance of a CSS declaration depends on what stylesheet it is specified in — it is possible for users to set custom stylesheets to override the developer’s styles. For example, the user might be visually impaired, and want to set the font size on all web pages they visit to be double the normal size to allow for easier reading.

I didn’t quite get what “CSS Location” means. The user will not be able to overwrite some CSS rules by simply adding another <link> in the HTML document.
The browser will parse trough both CSS files and pick the rules based on specificity, right??

Also, what do you mean by user setting custom style sheets anyway? I can’t load another CSS file one someone else’s web page. Do you mean the user can manually edit the properties using the dev tools?

To summarize

Conflicting declarations will be applied in the following order, with later ones overriding earlier ones:

  1. Declarations in user agent style sheets (e.g. the browser’s default styles, used when no other styling is set).
  2. Normal declarations in user style sheets (custom styles set by a user).
  3. Normal declarations in author style sheets (these are the styles set by us, the web developers).
  4. Important declarations in author style sheets
  5. Important declarations in user style sheets

I’m struggling to understand this part as well.

  1. Clearly these are the default browser styles. I understand this

  2. and 3. I don’t understand the order here. What are these user declarations? Where are they coming from? I understand that normal developer declarations will overwrite default browser styles, that’s what CSS is for. But how can a user implement his styles so that they loose in cascade battle (Again does this have to do with dev tools? But you said above that user can use their styles and overwrite developer’s styles.)

4 and 5. Again, I don’t understand the concept of user styles, but why is the order here reversed compared to bullet points 2 and 3 ? Here, the user !important rules have the advantage over developer’s !important rules. (This kinda makes sense since it will be later in the cascade)

Sorry for the longer post, but I’m missing something and I went through the whole lesson a couple of times. Everything is 100% clear except this last part.

Also, thank you for this amazing content and course. The world would be better place if more people were like you!!

#2

Hello @Rastko_Gojgic

check this https://www.thoughtco.com/user-style-sheet-3469931
it allow the user to have style sheet which linked to all pages they visit automaticaly to change some of the page style like change font size or font name to help them view it in much better way according to their need like for people who has sight issue

this the css that the developer of the page write

why the reverse order cause the user are the one who view the page and when they set important then if the browser ignored it then maybe that attribute would make them unable to view it at all so if the developer set important and it would lead to issue on layout some of the page then the user say it fine but at least i can see it

do not be sorry we all here to learn and support each other and feel free to ask anything
let me know if that not clear as it confusing part but web developer should know about

hope that help and have a nice day :slight_smile:

1 Like
#3

Oh, I wasn’t aware that the possibility to overwrite developer code existed. So, it’s a legacy technology that is on it’s way out. So, that whole part was about that technology. It all makes much more sense now. Thanks for clearing that up!

#4

you welcome and glad to help :slight_smile: