As an answer to your question, embedded style take priority because it’s closer to the styling object. Imaging your CSS like real cascade, as your browser reads CSS files simply from top to bottom:

1. CSS defined higher
2. CSS defined lower
3. CSS defined in HTML (embed)
4. What you are styling – content.

The closer you get to your content, the more specific you get. It’s logical that if you define, or your developer defined some style somewhere higher, you should be able to overcome it with the content itself, as content is what is important the most.

If you want some style not to be overidden just use !important at the end of the line.

I have been using CSS for sometime but never understood how the cascade worked .I have set myself learning about it and was reading up on https://www.w3.org/TR/css-cascade-3/#cascading increasingly getting confused .What I understood from the spec is cascading is a three step process to resolve conflicting styles .

Step 1: Sort rules based on Origin and Importance [The precedence of the various origins is, in descending order] :

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

Declarations from origins earlier in this list win over declarations from later origins.If still a conflict go to Step 2

Step 2: Sort Based on specificity . If still a conflict Step 3

Step 3 : Sort Based on style source order .

I am also reading up from a textbook . This is what :

Embedded styles take priority over linked or imported styles
Inline style takes priority over embedded , linked or imported styles .

This is what is confusing me . In the specs there is no mention of when sorting is done on the basis of embedded styles/ linked styles all though inline styles are used while determining the specificity in Step 2.

declarations that do not belong to a style rule (such as the contents
of a style attribute) are considered to have a specificity higher than
any selector).

Consider an HTML :

           <style>
                p {
                  color:red;  
                }  
            </style>


        <div id = "first-div" class ="firstclass" >
            <p id = "para-div">This is a list of countries in the Competition .</p>
        </div>

and my linked css

#para-div {
    color : yellow;
}

In this case yellow is applied , that is specifity [step 2 in the spec] is calculated before rules are sorted on the basis of embedded vs linked .

Now if the linked and embedded styles has same specificty like below :

  <style>
        #para-div {
          color:red;  
        }  
    </style>

Still the color is set to yellow and the embedded rule is overwritten . I am assuming this is based on the style order (Step 3 in the spec ) as the linked style comes later .

So my question is when does “Embedded styles take priority over linked or imported styles ” like my text book says ?

I hope this makes sense .