How to copy (or reflect instantly) CSS edited on Inspected elements on the browser to the actual css file?


Tags: html,css

Problem :

For example I want to change the appearance of a certain section on a web page that I'm developing, I often do this:

Inspect elements using firebug, edit the css, remember it and change it right back to my text editor which is sublime text 2. But sometimes, I change a lot and tend to forget about those changes. I tried to copy and paste the css from the browser itself after I change it, but it often copy a different version of the css.

So my question is, is there any other way that can possibly reflect the changes back to my editor as I change them on firebug? Are there any firebug addons or maybe sublime text addon which I can use to do this?

What is the most productive ways in doing this?



Solution :

Solved: Use firebug addon cssupdater to save css edits in firebug.

There is a firefox addon for saving css changes in firebug (cssupdater). You edit your css in firebug then click Sync Now button to sync the changes to your local css file.

You will need to install addon and a desktop app, read details on their page.

Links:

http://www.cssupdater.com/

https://addons.mozilla.org/en-US/firefox/addon/cssupdater/


    CSS Howto..

    how to get rid of firefox image border

    Keyboard Showed messed up elements' position

    How can I remove “border-top-width” css style?

    Background image cut off outside of item. How can I make it show?

    How do I align three columns to the center using CSS?

    How to make width of element full width of screen and not parent css

    How can I hide slide menu in appcelerator?

    How to solve divs overlapping issue and maintain css fluid layout?

    Foundation 5-How to center position the class 'row' regardless the browser size?

    How do you center align inline elements inside an html div?

    How can I stop the submit button from stacking under the text field on a bootstrap form?

    How can I make the contents of a table cell overflow vertically without also expanding the table cells height?

    bootstrap css how to resolve conflict

    How to send CSS to the client using HTTP response headers?

    How to move an element styled by CSS stylesheet?

    How to slide in divs from off screen into absolute layout using CSS transitions?

    CSS opacity, how to have opaque elements in transparent container element

    How do I have a CSS classes priority be affected by what class it is “more closely” inside?

    My sidebar is going over the footer. How can I sort this out?

    How to move Woocommerce Description tab below review tab

    How to create an interactive circular links using CSS [closed]

    Portrait screen with 2 pages but only one of them should show

    CSS showing and hiding childs and parents

    Picture thumbnail shown in Google image search output is
    not , why? [closed]
    It basically comes down to preference. It is considered outdated to use table for data layouts. Use table for just that - actual tables. For the layout and such tasks,...
    Read more

    How to float menu list elements

    Bootstrap 3: How to code my banner?

    How can I center align the list horizontally?

    How to layout list items in groups

    What's the idea behind image sprites, how to approach it?

    How to select, focused textarea?