How to add multiple css rules at once through Dev-Tools or Firebug

Question

I have 300 lines of CSS, consisting of many rules that I need to test on a page.

I would preferably like to paste the rules in one go at the bottom of the main.css that the page is using - or add a pseudo "extra-main.css" sheet to the page with my rules.

I currently don't have access to the source of the page so I have to work on the live page. Not perfect I know.

What would be the best way to do this? Firebug, DevTools (Chrome), something else...

Answer 1

Within the Chrome DevTools' Elements panel click the source of the element, paste in your CSS to test and hit Ctrl + S to see the updates. You can click any element on the page you want to test as long as the CSS source file effects it.

Answer 2

In Firebug it is similar to the Chrome DevTools, I just found out.

1. Open Firebug
2. Select the CSS tab
3. Select the css file you would like to edit
4. Select Live edit