Understanding media Queries

[ajhauser]

Hey all.
So I'm getting into responsive website design, but my first question is how media queries work? For example, after following a lynda.com tutorial I have the following 4 CSS files linked to my page:

<link rel="stylesheet" type="text/css" href="css/layout_large.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="css/layout_medium.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="css/layout_small.css" />
<link rel="stylesheet" type="text/css" href="css/nav-forms.css" />

layout_large.css loads by default, and when the screen resizes the css from the _small or _medium files override the rules within. BUT, if I place a rule in nav-forms.css, it will not change when the screen resizes.

Could someone please explain? Do I need to define the first css file as "greater than 801 pixels"?

Thank you.

[ajhauser]

**SOLUTION**

Oops. The ORDER of the CSS files matters. nav_forms was loading last and seemed to be given the most weight as a result. This prevented my changes to occur the way I intended.