Clicking on one of these buttons will set the Background or Text color as appropriate to the color currently shown in the solid-colored rectangle (and whose Hex color value is shown in the last text box in the column below it):
You may change the font family of the Text and the Headers with the drop-down list controls. The font families will likely be the ones installed on the computer from which you are viewing this page. The ultimate viewers of the page you are designing, of course, may not have the exact set of fonts you have, so test with multiple browsers on multiple platforms.
The controls to set Text and Header font size, and the Panel margins and padding, are regular <input> text boxes, and take standard CSS values. e.g. font size can be specified as absolute, relative, length or percentage value. If you provide an illegal value, it will simply be ignored (which should result in some unexpected visual effect).
The button is a bit special as it needs a lot of screen space to work with. So when you click it, part of the screen will be replaced with a text box, wherein you can type the text you'd like to see rendered.
I suggest you open a text editor window, and create/edit your text there. When it is to your liking, you can use the button to view the HTML in the panel, select it (Ctrl-C in Windows, Command-C in OS/X), and then paste the text from your editor window into it. That way, you won't loose your changes if you refresh the window.
The Headers are defined with CSS id of 'hdr1'. Thus if the text you are entering uses headers, and you want them to respond to the Header change controls, you need to define them something like this:
<h2 id='hdr1'> Your header here </h2>
Copyright © 2008, by H Marc Lewis.