Why does media query only work when placed last in my CSS?

Question

I\'m learning css and I came across an example that has the following code:

   Hearts<         


        

Answer 1

Because you're working with Cascading Style Sheets.

A cascade is like a waterfall: The rendering engine starts at the top of the source document and works its way down.

In this case, it sees your media query. Then it sees the rest of your code, which takes precedence because it comes later.

For instance, let's say your stylesheet had this:

div { color: red; }

div { color: blue; }

div { color: red; }

Your text color will be red.

In this case:

div { color: red; }

div { color: blue; }

Your text color will be blue.

In both cases, CSS picks the last declaration in the stylesheet.

If you want your media query to take precedence, put it at the end of your code.

(It seems simple and often it is. Just make sure to learn about CSS specificity.)