I am an average web designer (at best!) and writing complicated HTML and CSS is a pain for me. A lot of what I do with styles and layout is trial and error and involves a lot of tweaking. I also change my mind frequently about exactly what shade of color I want things. Basically, I'm in the same boat as you.
Long ago I abandoned the idea of the tweak-deploy-test iteration cycle (mvn clean tomcat:deploy
takes 2 minutes on my current project) as by the 10th iteration trying to sort a simple layout problem and waiting for the deployment would drive me round the bend. I now use two strategies;
Get a static copy of the HTML I want to work with. This usually means deploying the app, navigating to the page and saving it to a work directory somewhere. This saves the static HTML as well as any images. Next I copy the CSS files from my workspace into the work directory and hand edit the saved HTML file to point to these CSS files.
Open the static HTML page in Firefox. Now I can tweak the CSS or HTML and simply refresh Firefox to show the changes. Iteration time is now down to about 1 second. I can further improve my tweaking using the Firebug addon. This allows you to manipulate the CSS and HTML from within Firefox. This is especially useful for getting margin and padding size right. Once I've tweaked it in Firebug I hand edit the saved HTML and CSS then refresh Firefox to make sure I'm happy with the result.
At certain key stages I then make the changes to my workspace to reflect my tweaking on the static files. I then redeploy and test to make sure I got it right. As I use Firefox for all my development I have to pay special attention to browser compatibility, especially with IE, but this usually comes at a later stage.
Edit:
I didn't mention Javascript, but this process works great for JS too!