Question

I’m working on an online publication that will accept submissions from the general public. My WYSIWYG editor is set to strip out any embedded style/class tags (except those allowed by the editor), and I’m also checking this on the server side when it is saved. As a third layer of defense I would like to implement some CSS overrides to nullify any CSS directives embedded within a certain element of the page. Is this possible? I would imagine not for embedded style attributes, but possibly for embedded <style></style> blocks and class attributes?

Answer 1

You could use !important in your stylesheet to make sure that your rule will wins out over any other styling, inline or otherwise etc. Live example: http://jsfiddle.net/tw16/WpktM/

<div class="override" style="background:salmon; height: 50px; width: 50px;"></div>

.override{
    height: 200px !important;
    width: 200px !important;
    background: skyblue !important;
}