IE's F12 Developer Tools - add new CSS?

Question

Im viewing an element with IE's F12 developer tools. I can see the styles being applied to the element so I can change or disable them, but how can I add a completely new style?

Thanks

Answer 1

In IE9 you can select the CSS tab then right click to add a new style rule.

In IE11 you'll need to select the DOM Explorer tab, then the Styles tab on the right. Then you can right-click to add a new style rule.

Answer 2

For IE8/IE9 you could add the style attribute to the element and add any CSS properties inline. Simply right click on the element and select Add Attribute. As commented, this only adds style to one element.

For IE10/11 see the other answer.

Answer 3

If IE is not finding the element you hover with the cursor it may be because part of the HTML code is being loaded with Ajax or another similar technique after the page have already being generated. If that is the case, you will have to close the inspector, reload the page, make all the steps necessary to show the element in wich you are interested and only then open the inspector again. Now it should find your element when you hover it so you can inspect it for whatever you need.