Extend CSS of Wordpress-Theme

Question

Since 3 days I'm trying to add my custom CSS to an existing Wordpress-Theme. I do that by creating a child-theme with Child-Theme-Configurator (http://www.childthemeconfigurator.com/). Basically, it works ok. But there are still some CSS-inconsistencies which I can't remove. My child-theme-CSS seems to be overwritten by the parent-CSS (i.e. wrong borders, margins, ...) I tried to make it work with different themes. But every theme results in similar (but slightly different) problems.

I need to use my custom-css only within posts, because I embed my html only in posts. So my questions is basically: Is there any way to make sure, that 100% of the parent-theme-css is disabled/resetted within html-posts?

Answer 1

Overriding theme CSS is notoriously difficult.

Browser DevTools is your friend. Right click on wrongly styled items and click Inspect. Then look at the CSS for the item.

You have to figure out how to make your overriding selectors somehow more specific than the ones in the theme, so the browser will take them.

For example, let's say you want to decrease the bottom margin of paragraphs in your posts. Let's say the theme style says

  p { margin:0 0 10px;}

If you just put in this it won't work.

  p { margin:0 0 6px;}  /* no good */

If you put in this you may foul up all kinds of other styling.

  p { margin:0 0 6px !important;}  /* no good */

But if you put in this you've made a selector that's more specific than the one in the theme's style sheet.

  body article.post p { margin:0 0 6px;}  

The DevTools inspect feature lets you see how items are styled so you can figure out how to override their styles. The exact styling you need to override changes from theme to theme.

Answer 2

Open you cpanel / FTP client and go to wp-content/themes/your theme/ you should see a style.css file, it really depends on the theme that you are using but most of the cases are there, you just have to open and edit it