How to Overwrite CSS Style

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

How can I override inline styles with external CSS?

The only way to override inline style is by using !important keyword beside the CSS rule. The following is an example of it.

div {
        color: blue !important;
       /* Adding !important will give this rule more precedence over inline style */
    }

<div style="font-size: 18px; color: red;">
    Hello, World. How can I change this to blue?
</div>

CSS doesnt overwrite style

Your declarations are being applied based on how specific they are.

Per MDN - Specificity:

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector.

The link above also goes into the factors that determine specificity:

The following list of selector types increases by specificity:

Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).

Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).

ID selectors (e.g., #example).

Universal selector (*), combinators (+, >, ~, ' ') and negation pseudo-class (:not()) have no effect on specificity. (The selectors declared inside :not() do, however.)

CSS chooses which rules to apply based on a few conditions. Given rules applying to the same element, they are regarded in the following order:

1. `!important`

span { color: red; }               /* base */

#mySpan { color: blue; }           /* specific  */

span { color: green !important; }  /* important */

<span id="mySpan" style="color: purple;">Example</span>

How do I overwrite certain conditions when you have two CSS files?

There are a couple things at play here. One, CSS is cascading - meaning if a style exists after another style with the same selectors, the latter will take precedence. If you load a stylesheet after your main.css in the DOM, any styles with the same selectors (exactly as they are in the main.css) will overwrite each other:

<link href="blah/main.css" ... />
<link href="blah/overwrite.css" ... />

Second, there is the problem of specificity. Say you have the same element targeted like so:

.main .last .element { //css }
.main .element { //css }

Even though the second set of styles are after the first, the first will take precedence because it targets the element more specifically.

The !important modifier is really only for global changes, which is why people tell you to use it with caution - because if EVERYTHING is !important, nothing is.

In your specific case:

Try adding a class on the about us page html element like so:

<html class="about-us">

And then target the about us page in your main.css file like so:

html.about-us,
body.about-us,
form.about-us { margin: auto; padding: auto; height: auto; }

This takes advantage of the specificity of your selector and overwrites the styles.

Entire (completely) overwrite CSS styles

It's not possible in CSS at the moment.

But there may eventually be a property that does this: all

It can take three values:

initial | inherited | unset

Taken from the Cascading and Inheritance Module:

"For example, if an author specifies all: initial on an element it will block all inheritance and reset all properties, as if no rules appeared in the author, user, or user-agent levels of the cascade. "

According to the MDN documentation as of June 2017, all is currently supported by Chrome, Firefox/Mobile, and Opera. Safari supports only the CSS4 value revert, which is not supported by the other browsers.

  .one-great-class {
      border-radius: 50% 35% / 20% 25% 60%;
      color: red;
      font: 12px/14px Arial, serif;
      height: 20em;
      width: 20em;
    /*... etc. */
  }

  .one-great-class {
      all: initial;
  }

How to override !important?

Overriding the !important modifier

Simply add another CSS rule with !important, and give the selector a higher specificity (adding an additional tag, id or class to the selector)
add a CSS rule with the same selector at a later point than the existing one (in a tie, the last one defined wins).

Some examples with a higher specificity (first is highest/overrides, third is lowest):

table td    {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}

Or add the same selector after the existing one:

td {height: 50px !important;}

Disclaimer:

It's almost never a good idea to use !important. This is bad engineering by the creators of the WordPress template. In viral fashion, it forces users of the template to add their own !important modifiers to override it, and it limits the options for overriding it via JavaScript.

But, it's useful to know how to override it, if you sometimes have to.

How to Overwrite CSS Style