Weird media queries - not applying

Question

I have a bunch of queries set up, however, I realized none of them actually worked. So I started testing them one by one. The 1217.css is for anything bigger than 1201px. The 1200.css is for anything up to 1200px and the 600.css is for anything up to 600px width. Now, when I re-size the window I see the changes from 1200.css to 1217.css HOWEVER, nothing happens when I lower the window width to bellow 600px. It's as if there is no such style present; the 1200.css still gets applied for anything below 1200px. Why is the 600.css style not being applied?

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 600px) " href="600.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 1200px)" href="1200.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 1201px)" href="1217.css" />

1217.css
#contentQuote {
background-color: red;
}

1200.css
#contentQuote {
background-color: #f07057;
}

600.css
#contentQuote {
background-color: blue;
}

Answer 1

That is because when you define max-width : 1200px, that CSS overwrites the max-width : 600px CSS. So, instead of max-width: 1200px give (min-width: 601px && max-width :1200px)

This would work properly for widths between 601-1200px

Answer 2

You may need to change the order of the link markups to:

<link rel="stylesheet" type="text/css" media="only screen and (min-width: 1201px)" href="1217.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 1200px)" href="1200.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 600px) " href="600.css" />

Remember the CSS overwrite rules? Same property for same selector will choose the last one as first priority.