Overriding 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 to create a CSS style which override another CSS style

You can do try this way

In the two class above the width is not defined

.FirstStyle, .SecondStyle
{
    margin: 0px 0px 0px 8px;
    position: relative;
    display: inline-block;

    height: 29px;
    width: 5px;

    float: left;
}

Here you define the width only for the FirstStyle Class .. (and anyway do the fact this class is below the others could override an eventually width specified above )

.FirtsStyle
{
    width: 5px;
}

Overriding css style?

Instead of override you can add another class to the element and then you have an extra abilities.
for example:

HTML

<div class="style1 style2"></div>

CSS

//only style for the first stylesheet
.style1 {
   width: 100%;      
}
//only style for second stylesheet
.style2 {
   width: 50%;     
}
//override all
.style1.style2 { 
   width: 70%;
}

In which order do CSS stylesheets override?

The rules for CSS rule cascading are complex -- rather than trying to paraphrase them badly, I'll simply refer you to the spec:

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

In short: more specific rules override more general ones. Specificity is defined based on how many IDs, classes, and element names are involved, as well as whether the !important declaration was used. When multiple rules of the same "specificity level" exist, whichever one appears last wins.

Override css style of an element given by id

It depends on a few things. But actually you add the same selector with style you want just a few lines later and it will work. As CSS says, it cascades from top to bottom. So if specificity is the same the last rule will be taken/added to the previous set rules. Also if you include entire CSS files.

#lb {   width:100px;   background-color: green;}
#lb {    background-color: orange;}

<label id="lb">Label1</label>

How do you determine what is overriding your style?

In devtools, in the style inspector, choose Computed. Find the property you are interested in and click it. You will see a list of all the rules that apply to this property, with the active one at the top, and each with a file/line reference to where it is defined.

Consider the following HTML:

<style>
  #foo { color: red; }
  p    { color: blue; }
</style>

<p id="foo">What color am I?</p>

You would see the following:

Sample Image

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