I have traditionally done "back-end" parts of websites. However, I am working on a project in my spare time that will necessitate creating my own HTML templates, and I am looking for a toolset. I am fairly comfortable with manipulating HTML and CSS, and although my Javascript is amateur at best I want to use this side project to really take the time to learn it.
A problem that I'm having, however, is that I need something that will allow me to experiment and toy with a layout to see if it "looks right". Right now I'm using a combination of just writing the HTML/CSS and seeing what I come up with and using Google Docs Draw to 'sketch' a basic layout to work from. It works okayish, but I'd be open to alternatives in that area.
However, when it comes to detailed layout planning (i.e. what color an element should be, how many pixels away should element X be from element Y, what a rounded corner would look like on this element, how would applying a gradient to this element look, how element X would look if it looked like a button instead of a flat color, etc.), I honestly have no clue what kind of tool I'm looking for. I'm finding Google Docs much too clumsy for this sort of thing. When I try and modify the HTML/CSS by hand I'm finding that I spend more time tracking down CSS oddities then actually experimenting with looks, sometimes even discarding ideas based on how difficult it would be to work into my existing template.
What I'm not looking for is something that generates HTML/CSS for me. I just need a tool to help me try out a bunch of different ideas as quickly as possible so I can get to the point where I can start recreating it as a HTML template.
Any suggestions?