How to use Chrome to play with CSS and Save it
- Determine which Stylesheet you will make changes to. Be sure to only affect rules associated with this stylesheet.
- Navigate to this stylesheet in the Sources panel of the Developer Tools, Right-click it, and Save-As this file to your computer. You can get to a stylesheet in the Sources panel quickly by clicking the stylesheet at the top-right of each CSS rule for a selected element in the Elements panel.
- Freely make changes to CSS Rules associated with your chosen-and-saved stylesheet. Chrome will automatically save each change to the stylesheet you saved on your computer.
Keep in mind, however, that you must do things in this order. If you save the stylesheet, then make your CSS changes, then save again, Chrome will oddly write the original unmodified source to file (until you make one more change, which causes Chrome to auto-save all changes to file).
How to use this with your clients and friends
- Set up a theme stylesheet with blank (or default-ish) CSS rules (that have top precedence) for every element you intend to let them play with.
- Over the phone, guide them to Save-As this theme stylesheet from within the Sources panel.
- Guide them in inspecting elements, and using the the Chrome inspector's GUI color-picker to meddle around and find the exact colors they want.
- Have them send you the saved stylesheet :)
It's a good idea for you to verify that the modifications are in the file they sent you, before they close their browser window :P
