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

Besides using !important that most answers are advising you to use, this is a matter of CSS specificity

The concept

Specificity is the means by which a browser decides which property values are the most relevant to an element and gets to be applied. Specificity is only based on the matching rules which are composed of selectors of different sorts.

How is it calculated?

The specificity is calculated on the concatenation of the count of each selectors type. It is a weight that is applied to the corresponding matching expression.

In case of specificity equality, the latest declaration found in the CSS is applied to the element.

Some rules of thumb

Never use !important on site-wide css.

Only use !important on page-specific css that overrides site-wide or foreign css (from ExtJs or YUI for example).

Never use !important when you're writing a plugin/mashup.

Always look for a way to use specificity before even considering !important

can be represented by 4 columns of priority:

inline = 1|0|0|0

id = 0|1|0|0

class = 0|0|1|0

element = 0|0|0|1

Left to right, the highest number takes priority.

Here is a snippet with a Full example of a CSS specificity

/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}

/*CSS Specificity */

/* SPECIFICITY: 0/1/0/0 */
#id {
  background-color: green
}

/* SPECIFICITY: 0/0/1/0 */
.class {
  background-color: yellow 
}

/* SPECIFICITY: 0/0/0/1 */
section {
  background-color: blue 
}
  
/* ------------ override inline styles ----------- */

/*to override inline styles we  now use !important */

/* SPECIFICITY  0/0/1/0 */

.inline {
  background-color: purple !IMPORTANT /*going to be purple - final result */ 
}

<article>
  <div id="id">
    <div class="class">
      <section>
        <div class="inline" style="background-color:red">
          <!--SPECIFICITY 1/0/0/0 - overridden by "!important -->
        </div>
      </section>
    </div>
  </div>
</article>

Now here is the Full snippet step by step

ID: GREEN

/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}

/*CSS Specificity */

/* SPECIFICITY 0/1/0/0 */
#id {
  background-color: green
}

<article>
  <div id="id">
    <div class="class">
      <section>
        <div>             
        </div>
      </section>
    </div>
  </div>
</article>

CLASS: YELLOW

/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}

/*CSS Specificity */

/* SPECIFICITY  0/0/1/0 */
.class {
  background-color: yellow
}

<article>
  <div id="id">
    <div class="class">
      <section>
        <div>
        </div>
      </section>
    </div>
  </div>
</article>

ELEMENT: BLUE

/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}

/*CSS Specificity */

/* SPECIFICITY  0/0/0/1 */
section {
  background-color: blue
}

<article>
  <div id="id">
    <div class="class">
      <section>
        <div>
        </div>
      </section>
    </div>
  </div>
</article>

INLINE STYLE: RED

/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}

<article>
  <div id="id">
    <div class="class">
      <section>
        <div style="background-color:red">
        <!--SPECIFICITY 1/0/0/0 -->
        </div>
      </section>
    </div>
  </div>
</article>

OVERRIDDEN INLINE STYLE: PURPLE

/*demo purposes*/
body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
/*CSS Specificity */

/* SPECIFICITY  1/0/0/1 */

section > div {
  background-color: purple !IMPORTANT
}

<article>
  <div id="id">
    <div class="class">
      <section>
        <div style="background-color:red">
        <!--SPECIFICITY 1/0/0/0 -->
        </div>
      </section>
    </div>
  </div>
</article>

You can calculate the specificity of your element(s) here

Note:

A must read on this subject

Inheritance and cascade
CSS Specificity
Specifics on CSS Specificity

Here's a fun solution no one has mentioned.

Facts:

You cannot modify the HTML of the page at all - no problem!
You can modify the CSS files, but the developers may modify them again later and remove any changes you made - not a worry.
You cannot/do not want to use Javascript and JQuery - fine by me.
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]

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.

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>

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

The concept

How is it calculated?