Is there an easy way to reload css without reloading the page?

Possibly not applicable for your situation, but here's the jQuery function I use for reloading external stylesheets:

/** * Forces a reload of all stylesheets by appending a unique query string * to each stylesheet URL. */function reloadStylesheets() {    var queryString = '?reload=' + new Date().getTime();    $('link[rel="stylesheet"]').each(function () {        this.href = this.href.replace(/\?.*|$/, queryString);    });}

On the "edit" page, instead of including your CSS in the normal way (with a <link> tag), write it all to a <style> tag. Editing the innerHTML property of that will automatically update the page, even without a round-trip to the server.

<style type="text/css" id="styles">    p {        color: #f0f;    }</style><textarea id="editor"></textarea><button id="preview">Preview</button>

The Javascript, using jQuery:

jQuery(function($) {    var $ed = $('#editor')      , $style = $('#styles')      , $button = $('#preview')    ;    $ed.val($style.html());    $button.click(function() {        $style.html($ed.val());        return false;    });});

And that should be it!

If you wanted to be really fancy, attach the function to the keydown on the textarea, though you could get some unwanted side-effects (the page would be changing constantly as you type)

Edit: tested and works (in Firefox 3.5, at least, though should be fine with other browsers). See demo here: http://jsbin.com/owapi

There is absolutely no need to use jQuery for this. The following JavaScript function will reload all your CSS files:

function reloadCss(){    var links = document.getElementsByTagName("link");    for (var cl in links)    {        var link = links[cl];        if (link.rel === "stylesheet")            link.href += "";    }}