php - Only last link of css is taking effect

Question

I have these three CSS links for three different sized 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 last linked css(maxwidth600.css) CSS is taking effect others are overriding?

Answer 1

There is nothing wrong with your code itself, assuming that all three CSS links are indeed pointing to the right location and loading the files correctly.

By you only seeing styling applied from the final (smallest) media query, I assume that your media queries all contain the same properties inside selectors which have equal levels of specificity. It's important to realise that one integral aspect of specificity is that in the case of a 'tie', the DOM has the final say. And the DOM (and rendered CSS) is read from top-to-bottom.

When you view a website at a small width (which falls into multiple media queries) the media queries are executed sequentially. Here's an example of that:

@media screen and (max-width: 2000px) {
  #media {
    font-size: 10px;
    text-decoration: underline;
  }
}

@media screen and (max-width: 1000px) {
  #media {
    font-size: 50px;
  }
}

<div id="media">Change me!</div>