Link to multiple css files works, but combining into one disrupts css

Question

I am having a very strange problem (to me, anyway)

I had linked two css files from my html using the following code:

<link rel="stylesheet" type="text/css" href="global.css"/>
<link rel="stylesheet" type="text/css" href="menu.css"/>

And everything worked fine. But in an effort to reduce HTTP requests, I thought I'd combine them into one file. So I copied and pasted the menu.css file into the top of the global.css file, and took out the second line.

After doing this, the css isn't rendering properly. Stranger yet, I experimented by moving some selector css blocks to different locations in the css file, and it rendered differently. Yet this different rendering is apparently not a browser issue, because it renders the same way in at least 3 different browsers.

The rendering differences include positioning, border color, and font styling issues that I've noticed, depending on how I arranged the css selector code blocks. All of them related to the menu css.

Even when I leave the menu css code in the global file, as long as I link to the menu.css file, it will work as expected (despite that the code is copied entirely into the global.css file, and therefore everything in the menu.css file is in duplicate).

I have tried to find a solution for this, but I have not found anything relevant, so I'm wondering if someone has ever encountered this before, or if you have any idea what could be the problem.

I would greatly appreciate some direction. :) Thanks!

Answer 1

Your original code would include global.css and then menu.css. Things in menu.css could override things in global. When you copied it, you put the menu.css stuff before the global.css stuff, so it is now taking priority. Change the order in the combined css and you'll be fine

Answer 2

Order of rules matters in CSS. Later rules override previous rules. So by pasting the menu.css code to the top of the combined file, you in effect reversed the files. Move the pasted menu.css code to the bottom of the global.css file and it should work as before.