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

If I understand you're question correctly, adding @import url(css4.css) to the top of css3.css does import your stylesheet into css3.css. But your styles are being overridden by the styles in css3.css. This is because of Cascading Order and Specificity. In order for your css4.css styles to be used, your selectors must have a higher specificity than the selector in css.3.css you are trying to override.

Example:

tags will be colored red.

body h1 { //this is more specific
   color: blue;
}

h1 { //this is less specific
   color: red;
}

But since you're @import url(css4.css) line of code will get removed every time the developers update the css3.css file this is not a "bullet-proof solution"

Do you have the ability to add any javascript to the site? If so you could use the following solution

jQuery

$('head').append('');

Javascript

var head = document.head
  , link = document.createElement('link')

link.type = 'text/css'
link.rel = 'stylesheet'
link.href = 'css4.css'

head.appendChild(link)

Source: https://stackoverflow.com/a/11833777/2687861