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

You can just overwrite the text in the css file available to you, the style which you want from previous css file you can copy that code in the you can add with that new code refresh your website the result you need appears

Answer 2

I think I have an answer. The way that I have tried to achieve this is:

1) Say my css3 is the last CSS in the list and I have all my changes in css4. I have made a copy of css3 and called it "css3-Original.css" and added my css4 in the same folder. I then created another css file called "css3.css" (because that is the last one it takes from the list) and added imports of my Original css3 first and then my overriding css4.css file as given below:

css3.css (The new one)

@import url("css3-Original.css")
@import url("css4.css")

This is the best way I found it to work. This way although I know that my css3.css file will change on updates but I know how I can replace it very easily and quickly. I have used !important in my css4.css wherever necessary (if required) but basically because its the last css file, it uses that styling as compared to any previous ones (unless they are !important).

Thanks for the suggestions guys. I finally managed to come to a solution.

Answer 3

For duplicate CSS definitions, the last definition will have precedence.

If the added css4.css file is actually referenced after the "3 css files that are automatically included", then the css4.css file's definitions should override the prior duplicate definitions from these other files.

If you are not seeing the results that you expect, use the "view source" option of your browser to confirm the sequence in which the CSS files are referenced. Also use the "Developer tools" of the Chrome browser or the "Firebug" add-on for the Firefox browser to find out how the browser is interpreting the CSS definitions to yield a result that you did not expect. These tools should provide insight to your problem.

Answer 4

In your new CSS file, add !important to the block of code, for instance:

if you have this on css1.css:

 h2{
 color:#000;
 }

In css4.css put the same element, but with !important, as follows;

 h2{
 color:#ccc !important;
 }

Therefor, !important will force that this style will be by all means the style set for the element to which it's applied.

Answer 5

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

Answer 6

An alternative: Rely on the cascade, instead of specificity

A number of solutions here recommend using @import to include your css4.css file and then modifying the selectors therein to have a greater specificity or to use the !important declaration, but there is yet another way.

Paste the entire contents of css4.css at the end of css3.css. In this way, you need not rely on !important or specificity, because the cascading inheritance will adopt your rules at the end of the file if they are of equal specificity.

With this method, you are sacrificing modularity for easier implementation.

Example of pasting, relying on cascade:

/* Contents of css3.css */
.mycooldiv {
    font: bold 1.2em sans-serif;
    color: tomato;
}

/* Pasted contents of css4.css */
.mycooldiv {
    color: lime;
}

<div class="mycooldiv">Hello World</div>

However, it would be easy enough to create greater specificity by simply prepending html to the beginning of every rule in css4.css, if you don't want to paste it at the end of css3.css. This is preferred to adding !important where it works.

Example of importing, relying on greater specificity:

/* @import of css4.css with greater specificity */
html .mycooldiv {
    color: lime;
}

/* Contents of css3.css */
.mycooldiv {
    font: bold 1.2em sans-serif;
    color: tomato;
}

<div class="mycooldiv">Hello World</div>