Title: Plugin Development — Override theme CSS
Last modified: August 19, 2016

---

# Plugin Development — Override theme CSS

 *  [bhamrick](https://wordpress.org/support/users/bhamrick/)
 * (@bhamrick)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/plugin-development-override-theme-css/)
 * I’m currently assisting in the development of a plugin that my company is building
   and I’m running into an issue with the css inheritance from themes. The plugin
   dynamically builds several new artificial pages which are linked to throughout
   different widgets and other plugin components.
 * My problem is that with several themes, the elements in the pages built by the
   plugin (i.e. unordered lists, tables, anchors, basically any standard html element)
   are getting styled by the theme stylesheet, which to a degree is okay, but the
   layout of the plugin elements is being compromised. On a theme-by-theme basis
   I have been able to correct these issues, but I have already seen dozens of new
   themes with similar issues that have not yet been resolved.
 * Have any other plugin developers run into this? If so, how have you resolved 
   it? I may just need to build a reset.css that does more than just reset margin
   and padding, and actually reset each html element back to its browser default
   styling.

Viewing 1 replies (of 1 total)

 *  [Michael Fields](https://wordpress.org/support/users/mfields/)
 * (@mfields)
 * [16 years, 3 months ago](https://wordpress.org/support/topic/plugin-development-override-theme-css/#post-1391362)
 * I would suggest that you [**get specific**](http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/)
   with the styles that you are using for your plugin css. For this example:
 *     ```
       <div id="my_plugin_container">
          <ul class="conversation">
               <li>Hi There</li>
               <li>How are you doing</li>
               <li>Just fine, thank you very much</li>
          </ul>
       </div>
       ```
   
 * Try using this css:
 *     ```
       /* Reset everything inside your plugin's div */
       #my_plugin_container *{
           margin:0;
           padding:0;
           }
       /* To access the div */
       #my_plugin_container{
   
           }
       /* To access the list */
       #my_plugin_container ul.container{
   
           }
       /* To access the list items */
       #my_plugin_container ul.container li{
   
           }
       ```
   
 * I’m not a css expert, but I hope this helps 🙂

Viewing 1 replies (of 1 total)

The topic ‘Plugin Development — Override theme CSS’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)

 * 1 reply
 * 2 participants
 * Last reply from: [Michael Fields](https://wordpress.org/support/users/mfields/)
 * Last activity: [16 years, 3 months ago](https://wordpress.org/support/topic/plugin-development-override-theme-css/#post-1391362)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics