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

    IBM Worklight - How to disable Native device features?

    how to vertical align div elements using CSS?

    How to change the css of the div that i just created in code

    How to have equal padding on both side of a div. CSS

    how to apply css style only to homepage

    How to get this simple layout done with CSS?

    How can I make images fit into a 200 pixel square box using CSS?

    How to add animation to a bar graph with jQuery?

    How do prevent my div from spilling outside its parent container?

    how do you link static pages in rails to your css files? [closed]

    How to display a box of color beside a table row using CSS?

    How do I limit the number of cells on a row in CSS

    HTML / CSS: How to make the content follow the footer?

    How to change the width of displayed text nested in a div?

    How to make dynamic picture boxes with text on bottom with css?

    How to make the long text to fit inside a small div?

    How to apply jQuery on css selector :before [duplicate]

    How can i execute two effects on .mousenter THIS?

    How to float a
    echoed in the footer over a
    located elsewhere (PHP/jQuery/HTML/CSS)

    How to get rid of scroll bars/arrows in Wordpress, when using font style called 'Pre'

    How to unfold or close content in html/JS - always assigned to different id

    Animated HTML,CSS JavaScript. How can I implement this [closed]

    Live search div not showing up when something is entered

    How to move a div up and down infinitely in CSS3?

    How to wrap text in first div but use the available space where the second div's width should be adjusted to the content?

    How to get css background color on tag to span entire row

    How to create a two vertically stacked buttons next to a text input

    How to centrally align a float: left ul/li navigation menu with css?

    How do I force nested list items to be the same width as parent list item?

    CSS: how to layout 3 columns, 2 are optional