CSS cascading precedence of origin and importance

Question

According to the specs, the precedence of declaration origins is as follows (Top wins):

1. Transition declarations [css-transitions-1]
2. Important user agent declarations
3. Important user declarations
4. Important author declarations
5. Animation declarations [css-animations-1]
6. Normal author declarations
7. Normal user declarations
8. Normal user agent declarations

I'm trying to verify that the normal author declaration (6) wins over the normal user declaration (7), but I think I get the opposite result:

In the above example, I have an external css file (style.css) that declares the color of the p element as green.

Then I add some user style, declaring the color of the same selector as blue.

I expect that the author declaration (green) will win over the user declaration (blue), but the opposite happens.

Any ideas of what is going on? Maybe I'm doing something wrong in the example?

Answer 1

A custom CSS applied from the dev tools is not treated as user style sheet, but as an inline, author one. That's why it beats the external CSS declaration.

afaik support for user style sheets was removed from Chrome back in 2014, and the only way to set them is through extensions. For Firefox, you can edit userContent.css

Answer 2

Add "!important" in stylesheet on color. See Below

p{
    color: green !important;
}