How to write plugin CSS that override theme CSS

Question

I wrote CSS for my plugin, but theme CSS overwriting that, I have tried and searched for this I did not get any solution

This is my HTML code

 <html>
 <body>
 <img src="sample.gif" width="100" height="132">
 <h1>This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</h1>
 </body>
 </html>

my CSS is

 img {
       float: right !important;
     }

And theme CSS is

  h1 {
       clear:both;
     }

I want my image to be displayed to the right side of h1 tag.

Plugin to what? CSS on tags instead of classes speaks to a bad theme definition to me. — Mark Schultheiss
– Mark Schultheiss, Commented Mar 26, 2018 at 11:54
what is the loading order of your css link and other link from theme? — Uttam Ughareja
– Uttam Ughareja, Commented Mar 26, 2018 at 11:55

mayersdesign · Accepted Answer · 2018-03-26 11:54:43Z

3

Simply remove the clear on the title... if that's not possible, override it

img {
  float: right
}

h1 {
  clear: both !important
}

body h1 {
  clear: none !important
}

<img src="sample.gif" width="100" height="132">
<h1>This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</h1>

answered Mar 26, 2018 at 11:54

mayersdesign

5,3704 gold badges40 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Deekshith S Over a year ago

thanks for the answer @mayersdesign. it worked for me.

Collectives™ on Stack Overflow

How to write plugin CSS that override theme CSS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related