How to Override Inline Styles With External Css

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>

Override inline CSS from CSS file without !important

If we think about this differently considering that you want to override width/height then yes you can do it with min-width/min-height:

#my_component {  min-width:200px;  min-height:200px;  background:red;}

<div id="my_component" class="class_1" style="width: 40px; height: 40px;"></div>

How to override Inline Style CSS?

if your inputs have the !important syntax in the inline style, than that will take precedence over any css/styles to that element so you wont be able to float:none.

<input class="button cool-button" style="float: right !important; color:blue" value="Hello" name="hello">

however, if your inputs do not have !important, you can do the following

input.button.cool-button {     float: none !important; }

<input class="button cool-button" style="float: right ; color:blue" value="Hello" name="hello"><input class="button cool-button" style="float: right ; color:blue" value="World" name="hello"><input class="button cool-button" style="float: right ; color:blue" value="Submit" name="submit">

External CSS !important overriding inline !important

You have apparently confused inline style origin that originates from physical HTML attribute (<el style="[css declarations]">) with in-page style sheet that has "author" level origin specificity and originates either from <style>[css rules]</style> or <link rel="stylesheet" href="[css file url]">.

Style and link elements in page are origin-wise equal, attribute is more origin-wise specific.

It is not possible to beat !important rules from inline origin level (attribute) with !important rule from author level origin.

Overriding CSS inline with css file using !important does not work

I would erase the [style] and add the div to give it even more specifity, like:

div.selector.selectorarrow.selectorarrowleft {
  position: relative !important;
  top: 10px !important;
}

How to override inline styles in a child div?

If you say that inline style is being inserted dynamically and you don't know how you can't change (you really should debug till you find out how is being inserted) then to be more specific than inline styling, only using !important

NOTE this is one of the extreme cases that !important should be used. Otherwise AVOID IT

.child {  background: red;  height: 100px !important;  width: 100px}

<div class="parent">  <div class="child" style="height: 30px">  </div></div>

Inline Top/Bottom Property Style Not Overriding External Stylesheet

While it's true that inline styles have more specificity than external styles, the difference here is that top and bottom are different properties. If they were the same property, CSS specificity would come into play and the inline style would override the external.

However, as top and bottom are different properties, the browser wants to apply both of them. Considering they have directly opposing effects on layout, only one of the two can be applied. Precedence is given to top, with bottom being ignored.

This is true regardless of if the bottom property has more specificity than than the top property!

This is clarified in the top MDN:

When both top and bottom are specified, and height is unspecified or either auto or 100%, both the top and bottom distances are respected. In all other situations, if height is constrained in any way, the top property takes precedence and the bottom property is ignored.

Your scenario falls under the 'all other situations' mentioned above.