The following code sample is an example of how to make inline style sheets editable in the browser like other elements.

Browsers 1

<!--editable-inline-stylesheet.html -->

<style type="text/css" id="regular-style-block">
html{
background-color:#222229;
position:relative;
}
body{
font:14px/1.3 'Segoe UI', Arial, sans-serif;
color:#e4e4e9;
min-height:500px;
}
</style>

editable-inline-stylesheet.js

//To make the style block visible and editable, execute this code in your console:
$('#regular-style-block').css({'display':'block', 'white-space':'pre'})
.attr('contentEditable',true);

/*

The changes you make to the stylesheet affect the page in real time. Recently this live-editing stopped working
in Chrome, so you will have to try it out in Firefox to see the results.

*/