Should the order of CSS files in a HTML page matter?

Question

I have a basic HTML page and three CSS files on each. The first CSS file (core.css) is for a very generic set of rules common to all pages. The second file (additional.css) contains rules specific to items on a page (homepage, blog page and so on). The third CSS file (mobile.css) contains all media queries for mobile display. I'm also using Bootstrap.

When the files are loaded in this order:-

• core.css
• mobile.css
• additional.css

The following media query contained in mobile.css does not get picked up by the browser.

When the files are loaded in this order:- - core.css - additional.css - mobile.css

the following media query contained in mobile.css works fine.

additional.css CSS Query

.blog .blog-item.right h4, .blog .blog-item.right .item-date, .blog .blog-item.right p {
    text-align: right;
}

mobile.css CSS Query

@media (min-width:768px) and (max-width:992px) {
    .blog .blog-item h4, .blog .blog-item .item-date, .blog .blog-item p, .blog .blog-item.right h4, .blog .blog-item.right .item-date, .blog .blog-item.right p {
        text-align: center;
    }
}

Is there any reason why the top style rule has to be loaded first before the @media query is run after? What takes precedence, as I assumed that if the screen width is between 768px and 992px, that this rule would be run, over the original rule?

I'm a reasonable newbie to CSS, I'm a .NET guy, so apologies for what might be a very basic question.

Thanks

Answer 1

Short answer: Yes.

This is actually a subject I taught just last week, and I'll tell you a brief version of a one-hour class I told my students:

• Bootstrap first to establish the framework
• Follow with any supporting stylesheet (Owl.css, plugins.css, etc)
• Next is your custom stylesheet. This is to override all of the above.
• Lastly, the responsive stylesheet. This one will override all of the above systematically and programatically according to the media queries conditions being satisfied in the browser.

Doing this type of architecture will reduce the amount of (important!) drastically.