External/Internal/In-Line CSS src

Question

Excuse me for the n00b question, I'm learning:

I have 2 questions:

1. I was taught that "internal" CSS (style tag) has more priority than "external" CSS (linked to a CSS sheet), but when I was playing with the elements order on HTML, if I put the "external" below the "internal", the "external" get the priority. They have the same "priority level" and it depends of which one is positioned last on the cascade?

2. I noticed that "style" and "link" tags works on the head section and also in the body section, but this information should be on the head section in order to best practice? (or better, I should use just CSS sheets, lol, but it would be great if you can answer me for knowledge)

once again, excuse me for the n00b question and my english, not my native language.

Answer 1

Best practice is to make your stylesheets external (and minified). As far as I know, external vs internal styles make no difference, but the last one listed takes priority.

Inline styles DO take precedence, which makes sense since you're applying the style directly to the element (bypassing class or id).

In the below example, we have an inline style, as well as two internal styles. The circle is orangered, because ids have precedence over classes, and although not inline, it has an important directive after it.

If you take the important directive off the id, the circle turns blue, as even with classes, the directive takes precedence. Take that directive off, and the circle turns orange, as inline takes precedence over classes and ids.

div{
  height: 30vw;
  width: 30vw;
  border-radius: 50%;
  border: solid 3px #444;
}

#goo{
 background-color: orangered !important;
}

.blob{
 background-color: dodgerblue !important;
}

<div  style="background-color: orange;" class="blob" id="goo"></div>