How to Get My @Import Stylesheet to Override the Main Stylesheet

How do I get my @import stylesheet to override the main stylesheet?

If your goal is to override styles by importing another stylesheet, you should use the order of precedence.

<head>
    <title>Title</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="style-override.css" rel="stylesheet" type="text/css" />
</head>

Here the style.css is the original and style-override.css would contain your new custom css. These styles will override the styles from style.css. This means you won't need to use !important because the style is overwritten.

Avoid !important whenever you can.

To do @import

<style type="text/css">
  @import url("style.css");
  @import url("style-override.css");
</style>

Also as a side note if you would rather remove all styles from the page, use a css reset.

<style type="text/css">
  @import url("style.css");
  @import url("reset.css");
  @import url("style-override.css");
</style>

Check out a CSS reset at http://meyerweb.com/eric/tools/css/reset/ and add it to reset.css.

overriding css styles with @import not working

That isn't working because any import rule declared inside of a stylesheet must come before everything else - otherwise, ...well, it doesn't work ;) .

So, what you should have in your style.css stylesheet is:

@import url('style-override.css');  
body {color: red;}

My custom stylesheet won't override the foundation.css stylesheet?

The Proper Selector

You need more specific selector to make it work like you need.

The better way is to set up variables in Foundation's settings.scss file. However, SCSS compilation is needed in this case and if you don't want to do it (or if you simply can't) these lines will be enough:

.top-bar-section li.active:not(.has-form) a:not(.button) {
  background-color: #FFA500; /* orange color */
}

.top-bar-section li.active:not(.has-form) a:hover:not(.button) {
  background-color: #F09600; /* darker orange, lightness -6% is Foundation's default */
}

Note: You don't need using !important if you include app.css style file after the Foundation's one. It is better to avoid of usage of this keyword.

CodePen working example

Note: If you don't use the proper selector then you take a risk than some other stuff change their color too which shouldn't be the correct behaviour. However, if you want to change blue color to the orange one in general you should use SCSS distribution of Foundation, change $primary-color variable and then compile your own CSS.

How To Find Proper Selector

You need some web development tool, e.g. Firebug, which is abailable for all modern browsers. Then use it as is described below:

Sample Image

Select inspect element tool.
Click on the element which you want to inspect.
Search for the attribute which you want to change - in your case, you are looking for attribute background-color. Then you can see the selector and you are also able to redefine color in the Firebug tool in place to see results immediately.

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>

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;
}

Vue3 - How to override styles after importing node_modules css file?

This worked:

App.vue

...

<style>
#app {
  --vc-pgn-background-color: #mycolor;
}

@import "~vue3-carousel/dist/carousel.css";
</style>

How to make CSS file more important than another CSS file?

There is no such magic. CSS has its own principles, such as the cascade, and you cannot switch them off.

You can place the reference to css.css after the reference to bootstrap.min.css, but this is just one factor in the process of resolving how CSS rules will be applied. Adding !important, which is generally a symptom of wrong design, is just yet another factor: an !important rule in an earlier file may override your !important rule, if its selector has higher specificity.

To override CSS rules, you need to analyze the rule you wish to override and set up a rule that “wins”, by the cascade principles.