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...

On dev tools when you inspect something, you'll see in the top right of the element there is the original CSS source name. Click that and paste your CSS and just hit CTRL+S to see realtime changes. — Joe Corby
– Joe Corby, Commented May 12, 2015 at 11:12

Sebastian Zartner · Accepted Answer · 2016-02-23 19:05:23Z

12

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.

Pasting multiple CSS rules in Chrome DevTools

edited Feb 23, 2016 at 19:05

Sebastian Zartner

20.4k10 gold badges104 silver badges143 bronze badges

answered May 12, 2015 at 11:16

Joe Corby

5624 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joe Corby Over a year ago

Correct. As to replace a SCSS file in the browser itself would be in an unrecognised format. You will need to compile the SCSS file and then use the outputted CSS in the appropriate place.

Leopold Kristjansson · Accepted Answer · 2017-03-15 23:16:43Z

2

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

Open Firebug
Select the CSS tab
Select the css file you would like to edit
Select Live edit

How to add CSS sources in Firebug

edited Mar 15, 2017 at 23:16

answered May 12, 2015 at 11:43

Leopold Kristjansson

2,83438 silver badges50 bronze badges

1 Comment

Sebastian Zartner Over a year ago

Additionally to the animated image, you should add some steps describing how to paste the CSS.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related