How to ignore <p> CSS rules in wordpress theme?

Question

I'm editing the stylesheet of my Wordpress blog. I've installed a theme that's otherwise pretty cool, but its styling of blockquotes is very ugly.

I can edit the appearance of the <blockquote></blockquote> object just fine. The problem is that the paragraph that I put in between those quotes is also assigned <p></p> tags by Wordpress, and those also take properties from the stylesheet. The theme has very intricate styling for the <p> tag, and because of that, those take priority over the things I'm trying to make it do.

Sample code:

<p>Text here</p>
<blockquote><p>Quote here</p></blockquote>
<p>More text</p>

Sample CSS:

blockquote {
   /* styling here */
}
blockquote p {
   /* whatever I put here is overwritten by other stylesheet rules */
}
.post-video .video-div p {
   /* stylesheet from my theme that has more levels than my own added style rules, so takes priority */
}

Basically, the .post-video .video-div p rules overwrite my own blockquote p rules, so I can't change the appearance. I also don't really want to mess with all those theme-specified classes. I know I could write .post-video .video-div blockquote p and be more important than the standard rules, but I don't know what those classes do and would rather not mess with them.

Any suggestions how to solve this?

Answer 1

Use !important after your styling.

blockquote p {
   background: red !important;
}

!important will force the browser to honor your CSS and use it over any other CSS written for that element.