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

Use @import url('css4.css') in one of your existing css page. Then use specificity to be highlighted your new code as bellow:

Html :

<ul class='ulclass'>
 <li class='liclass'>
  <a class='aclass>The text</a>
 </li>
</ul>

css1.css :

.aclass{
   color : red;
}

css4.css :

ul.ulclass li.liclass a.aclass{
   color: green;
}

Then you will have green color in your a element

Answer 2

write a new css, and use id of elements rather than class. Also use !important in css.

Answer 3

Unfortunately, I have to agree with phari.

Quote:

1) You cannot modify the HTML of the page at all, and therefore cannot include another CSS file. 2) You can modify the CSS files, but the developers may modify them again later and remove any changes you made. Hence you cannot permanently modify the CSS files. 3) You cannot/do not want to use Javascript and JQuery). If all of these things are true, there is no solution to your problem.

Commented by phari on Mar 26 at 14:29

Let me break it down. I will try my best to explain why there's no solution (correct me if I am wrong at any of these options);

Option1: Using jQuery or Javascript.
You cannot modify the HTML of the page at all!! You do not want to use jquery nor javascript. This means that all answers to your question mentioned on this page which involves jquery or javascript are disregarded. This does not mean the answers given on this page are wrong. In your case it's not possible.

Option2: @import url(css4.css); Your website has 3 css files that are automatically included as a part of the website, but unfortunately, you DO NOT have access to ANY of these css files. You can not place this piece of code in css3.css, or any of these files. You can modify the CSS files, but the developers may modify them again later and remove any changes you made, which means @import url(css4.css); can also be removed. Also using @import url(css4.css); would be completely useless. You'll have to place @import url(css4.css); at the end of css3.css, but this won't work because @import rules must always be first in a document. If I am not mistaking ilia (who commented on Mar 23 at 9:42) meant the code can be place anywhere in the file. @import url(css4.css); must be at the top. The link ilia provided as "prove" also specify that it's a requirement to place it at the beginning.. Check the two links below. More Info visit http://webdesign.about.com/cs/css/qt/tipcssatimport.htm or https://developer.mozilla.org/en/docs/Web/CSS/@import#Specifications. Option 2 is disregarded too.

I don't think there could be another way to do what you want to do. Hence, there is no solution to your problem.

Answer 4

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.

<a class="my-most-awesome-link its-really-cool">Most awesome link</a>

.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

<script>
function removejscssfile(filename, filetype){
    var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none"; //determine element type to create nodelist from
    var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none"; //determine corresponding attribute to test for
    var allsuspects=document.getElementsByTagName(targetelement);
    for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove
      if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1){
          allsuspects[i].parentNode.removeChild(allsuspects[i]); //remove element by calling parentNode.removeChild()
      }
    }
}

removejscssfile("css1.css", "css") ;
removejscssfile("css2.css", "css") ;
removejscssfile("css3.css", "css") ;
</script>

Answer 5

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: <h1> 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('<link rel="stylesheet" type="text/css" href="css4.css">');

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

Answer 6

Here's a fun solution no one has mentioned.

Facts:

1. You cannot modify the HTML of the page at all - no problem!

2. You can modify the CSS files, but the developers may modify them again later and remove any changes you made - not a worry.

3. You cannot/do not want to use Javascript and JQuery - fine by me.

4. You can add more files on to the server - Excellent!

Let's do some .htacess hacking for fun and profit!

Document root .htaccess file:

Options +FollowSymlinks
RewriteEngine on
RewriteBase /

RewriteRule ^(.*?)css3.css(.*?) $1hackedCSS3.php$2 [L]

Result: hackedCSS3.php is silently served instead of css3.css on every request.

REF: http://httpd.apache.org/docs/2.2/howto/htaccess.html

hackedCSS3.php file:

<?php

// Send the right header information!
header("Content-type: text/css; charset: UTF-8");

// Output the css3.css file
echo file_get_contents("css3.css");
?>

// Add your CSS here with any neat !important or override tricks (read: specificity)
div { ... }

Bonus:

You could expand this solution to include all three .css files in this one .php file (but only serve, say, css3.css and send the css1.css and css2.css to a black hole with .htaccess), and use clever regular expressions to remove/modify those developer's CSS without touching any of their files. The possibilities are tantalizing.

Addendum:

Can you be a bit more specific on where to include these files?

The .htaccess file should be in the document root directory of the website. This is where www.example.com/index.html would load index.html

Should the hackedCSS3.php file be in the same directory as the other css files?

It can be in any directory you specify in the .htaccess file. The document root is fine. Change

RewriteRule ^(.*?)css3.css(.*?) $1hackedCSS3.php$2 [L]

to

RewriteRule ^(.*?)css3.css(.*?) /folders/you/want/hackedCSS3.php$2 [L]

Should our css content (where you specified // Add your CSS here...) should be within html style tags?

No. Treat your CSS code in that section as if it were a .css file. You do not need <style> tags.