Use a new CSS file to override current website's CSS

Question

My website has currently 3 CSS files that are automatically included as a part of the website and I do not have access to the source i.e. index.html

Answer 1

To use CSS only, the best way would to use Chrome or FireFox's developer tools and find the various style you want to overwrite.

The for each of the style you find that need adjusting then use the !important modifier.

.newClass {
  color:red !important;
}

Another way would be to write unique css class names and again use !important if you need. The real trick here is in specificity. If an identifier is more specific the rule will be applied.

6.4.1 Cascading order

6.4.1.4 Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

Most awesome link

.my-most-awesome-link.its-really-cool {
  text-decoration:none !important;
  color:red !important;
}

If you are desperate you could use javascript to remove the unwanted css.

See this JSBin for a working example.

I found this interesting technique