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).
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.
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?
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?
This is exactly what I was looking for, thanks a lot! And it works in all browsers, this is perfect.
