Only last link of css is taking effect

by

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>

Note that the text-decoration is applied from the first media query, but the font-size is overridden by the second media query.

We can modify this behaviour by changing the order of our media queries:

@media screen and (max-width: 1000px) {
  #media {
    font-size: 50px;
  }
}
@media screen and (max-width: 2000px) {
  #media {
    font-size: 10px;
    text-decoration: underline;
  }
}
<div id="media">Change me!</div>

Notice how both the font-size and text-decoration are applied from the second media query now. Starting with the smallest media queries can help to ensure that the website looks great on mobiles, and is referred to as mobile-first development.

Because you include your three CSS files in the order 959, 768, 600 in your HTML, they are rendered in this same order. Thus, rules specified in maxwidth600.css will have a greater level of specificity than rules specified in both maxwidth768.css and maxwidth959.css.

Depending on which styles you want applied at which breakpoints, you have three options:

  1. Exclude your other media queries from the mobile view by specifying both a min-width and a max-width in the other media queries
  2. Show some rules from ‘broader’ media queries by giving them a greater level of specificity
  3. Switch to mobile-first development

Hope this helps! 🙂

Leave a Comment