Use a New CSS File to Override Current Website'S

Use a new CSS file to override current website's

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>

Overriding CSS files using JavaScript

Simple DOM based solution would be:

function loadCssFile(filename) {
    var fileref = document.createElement("link")
    fileref.setAttribute("rel", "stylesheet")
    fileref.setAttribute("type", "text/css")
    fileref.setAttribute("href", filename);
    if (typeof fileref != "undefined") {
        document.getElementsByTagName("head")[0].appendChild(fileref);
    }
}
if (somecondition) {
    loadCssFile("mystyle.css");
} else {
    loadCssFile("default.css");
}

OR using document.write,

<script type="text/javascript">
    if (somecondition) {
        document.write('<link rel="stylesheet" type="text/css" href="style.css" />');
    }
</script>

And if you are using jQuery,

$('head').append('<link rel="stylesheet" type="text/css" href="style.css" />');

how to let CMS make use of my css files instead of its own css?

The main.css is placed under assets folder.

Just remove the main.css and use yours instead.

Or you can use custom.css to override the main.css.

Just include the custom.css in your layout.

Replacing css file on the fly (and apply the new style to the page)

You can create a new link, and replace the old one with the new one. If you put it in a function, you can reuse it wherever it's needed.

The Javascript:

function changeCSS(cssFile, cssLinkIndex) {

    var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

    var newlink = document.createElement("link");
    newlink.setAttribute("rel", "stylesheet");
    newlink.setAttribute("type", "text/css");
    newlink.setAttribute("href", cssFile);

    document.getElementsByTagName("head").item(cssLinkIndex).replaceChild(newlink, oldlink);
}

The HTML:

<html>
    <head>
        <title>Changing CSS</title>
        <link rel="stylesheet" type="text/css" href="positive.css"/>
    </head>
    <body>
        <a href="#" onclick="changeCSS('positive.css', 0);">STYLE 1</a> 
        <a href="#" onclick="changeCSS('negative.css', 0);">STYLE 2</a>
    </body>
</html>

For simplicity, I used inline javascript. In production you would want to use unobtrusive event listeners.

CSS override with second stylesheet

What you are describing with your CSS is inheritance, and essentially it will 'stack' your css definitions, so as you made the example of body { color: blue } , body { font-weight: bold; } you will end up with both values for body via inheritance (not overriding!)

To counter the inheritance, you would need to zero out, or elminate the primary css sheets defnition.

so if you had the example:

body { padding: 5px; color: red }

and you wanted to have a 3px margin with font color blue in your 2ndary sheet you would do the following to counter the inheritance

body {padding: 0px; margin: 3px; color: blue }

That way you would zero out the padding (to 0, if you so wished, effectively canceling it out). Color would be overwritten, and margin would be the new value added.

I would suggest (if you already don't) to use Firefox with firebug enabled (dual screens help here greatly, but not needed). Firebug will show you which lines are canceled out due to inheritance and in essence are overwritten.

You could also utilize your own classes, and double (or more) up on the class definition like so:

.red { color: red; }
.center { text-align: center; }
.w500px { width: 500px; }

<div class="red center w500px">This text is red and centered</div>

This way you just combine the values into one. Might give you another idea on how to go about something differently.

Hope that helps.

How to override external css?

Fluidbyte was right, I was being stupid trying to apply 0 padding on the wrong element. Adding

<style>
#content{
    padding-right:0px;  
}
</style>

on page.html worked fine, overrides the external css.

how to overwrite css style

Using !important is not recommended but in this situation I think you should -

Write this in your internal CSS -

.flex-control-thumbs li {
  width: auto !important;
  float: none !important;
}

Use a New CSS File to Override Current Website'S