Solution 1 :

Developer Tools in a browser is helpful for such things.

To try it out, open the html file in a browser, and then open the developer tools (shortcut is ctrl + shift + i or F12, or with Mac cmd + opt + i). You can also find it in your browser menu in the upper-right corner of the window.

Find the Elements tab (or Inspector tab inFirefox).

enter image description here

Here you can navigate through and click on the html elements in a web page, see what styles are associated with the one you have selected, and find out which css files contain those styles.

Problem :

I’m building a webshop for a site I made which needs a different navbar. I copied one of the websites existing pages to edit for the webshop part. I removed the old header CSS file but now the new nav header still shows layout styles from the previous header.

I copied the new header HTML and CSS to a completely blank page and it works fine so it must be a CSS conflict on the existing pages.

Are there any useful tools to find out what causes this conflict?


Comment posted by bron

Are you using a relative path to the new stylesheet instead of an abosulte path? Did you give the browser a “hard refresh” with Ctrl+F5 to be sure all stylesheets are loaded from the webserver?

Comment posted by emgx

This is exactly what I was looking for, thanks a lot! And it works in all browsers, this is perfect.