My Chrome extension uses a content script (player.js) together with CSS (player.css) to put a notification on any site which meets certain conditions.
In player.css I specify styles for the classes used in the notification. The notification's div is styled .notif (there are further classes that style other divs inside the main .notif-styled div).
Problem: the notification doesn't appear the same across all sites - sometimes the underlying CSS of some site (e.g. Twitter) will mess with things like the default a class, the default strong class etc. So text might appear bold when it's not meant to be etc., colors might be changed, font-sizes too.
Even after trying solutions (below) I keep coming across sites where my notification appears slightly differently - I'm looking for a watertight solution that prevents this ever happening.
I've tried: 1) adding !important to a bunch of lines of player.css (which I know is generally a terrible idea) 2) adding a CSS reset to the start of player.css (I'm not clear on how to do this in context of Chrome extension CSS - when I added, it also overrode all the custom CSS I'd made).
What's the simplest way to solve this / what am I missing / if the answer is CSS reset, what's the most elegant way to do this in player.css?
(Note: I don't want to use Chrome's native notification API for this - need notifications to appear as part of sites.)
