Only first link of css taking the effect : I have these three css links for three different size devices  

    <link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/maxwidth959.css" rel='stylesheet'>
    <link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/maxwidth768.css" rel='stylesheet'>
    <link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/maxwidth600.css" rel='stylesheet'>

And media queries for all:

maxwidth959.css
   

     @media only screen and (max-width: 959px)
        {
          // styles here
        }

maxwidth768.css    

    @media only screen and (max-width: 768px)
    {
      // styles here
    }

maxwidth600.css    
    
  

      @media only screen and (max-width: 600px)
        {
          // styles here
        }

But, only the first (maxwidth959.css) css is taking effect. other are overriding? 