Deactivate "element.style" in css/html?

Question

I see this css code in the "style" tab of the Chrome developer tools window:

element.style {
    height: auto;
    width: 100%;
    margin-top: -148px;
}

I want to overwrite it with this css code in my .css file:

.so-widget-sow-simple-masonry-simple-masonry-d75171398898 .sow-masonry-grid-item img {
    width: auto;
    height: 244px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto; 
}

But the style definitions of the element.style is already there. I cant find the .js so fast. Can someone help me? Thx

Answer 1

What you see in the chrome developer window as element style is the styles on a element which are written inline

element.style {
 /*this all are the inline written styles*/
}

Now coming to the point But with this codes the element.style is allready there you are not able to overwrite the styles because of the CSS Priorities. In this scenario the rule is Inline CSS has more priority than external CSS

So what can you do??

1. You have to either remove the inline css where ever its written. That way your external css will apply

2. If you cannot modify the inline CSS for some reason then only option is to set the styles as !important in your external CSS files. People here have already mentioned this solution, But this is not always recommended.

3. Take all the Inline CSS written on that element and create a new class in your external file and then put it there, Now give this class name to the element. So the original styles are applied back. Now comes the point to your new Styles that you have to override. Also the new CSS priority rule when using 2 classes. CSS rule which is read last (in the css file, not the order you put in the element) will have priority. So make sure you place the new CSS rule below the other class you just created as mentioned above.

   • What if you have to use 2 separate files to write these 2 classes?? Then comes one more CSS priority rule. The file that is placed last in the DOM will have the priority (remember its not when the file is loaded into the DOM, its about where its placed in the DOM)

Answer 2

You can always go with:

.so-widget-sow-simple-masonry-simple-masonry-d75171398898 .sow-masonry-grid-item img {
width: auto !important;
height: 244px !important;
margin-top: 0px !important;
margin-left: auto;
margin-right: auto; 
}

Important styles will overwrite inline styles, unless inline styles also have !important clause (but this is rare actually).

Answer 3

Sure, you can remove the style attribute on the element:

element.removeAttribute('style');

If the element.style is gone, your CSS file's rules will be visible.

Answer 4

you can add !important to end of every styles.

for example use this:

height: 244px !important;

instead of

height: 244px;