What are the basics for changing colors, fonts?

You cannot add the actual CSS in the form (in Form Setting>Advance> "Class Name") - that is where you could add a class, like "black" or something. Then, in your theme's stylesheet, you could define a class named ".black" and create your style there. Then that style would apply to any field where you added the class. So, in the form settings is where you would add this class. Adding the class there would not do anything until you add the class to your stylesheet.

All your styles will be defined in your theme's stylesheet. Here is an exhaustive list of how to style your form elements: http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

If you post a link to the page on your site where a form exists, and let us know what you want to change, we can help you style the element so you know how to do them all.

The dotted lines are coming from your theme stylesheet line 148:

[css]
/* Line 148 */
#content ul li
{
  background-color: transparent;
  background-image: url("images/li-bullet.png");
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: 5px 18px;
  background-clip: border-box;
  background-origin: padding-box;
  background-size: auto auto;
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-bottom-color: #d4d4d4;
  padding-top: 10px;
  padding-right: 0px;
  padding-bottom: 10px;
  padding-left: 15px;
}

You can override that with the following:

[css]
body #content .gform_wrapper ul li {
    background-image: none;
    border-bottom: none;
}

For the blue border and background, add this:

[css]
body #content .gform_wrapper input {
    background-color: #ECF5FD;
    border: 1px solid #AFD2FA;
}

For the yellow highlight on currently focused fields, add this:

[css]
body #content .gform_wrapper input:focus {
    border: 2px solid yellow;
}

This is all the CSS in one place so you can copy and paste.

[css]
body #content .gform_wrapper ul li {
    background-image: none;
    border-bottom:none;
}
body #content .gform_wrapper input {
    background-color: #ECF5FD;
    border: 1px solid #AFD2FA;
}
body #content .gform_wrapper input:focus {
    border: 2px solid yellow;
}

That is how you target those individual elements. Take a look at the source of your page with the form on it and you will have an idea of how to target each individual element. You can always begin your selector with body #content .gform_wrapper which should make your rules specific enough to override other rules in the Gravity Forms CSS and your theme's CSS.

You're going to have to learn some of this CSS yourself. The examples we provided are intended to point you in the right direction; to show you how things can be accomplished. The actual styling will have to be done by you. If it's beyond your capabilities at this time, you may need to get assistance from someone more familiar with CSS.

Our styling documentation is very good and shows you how to target every element in a Gravity Form: http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

I'm sorry, we don't do any sort of client work or consulting. You can find help on our job board here http://www.gravityhelp.com/forums/forum/job-board or on one of the many WordPress or web design related boards out there. The work is not specifically related to Gravity Forms. You need someone good with CSS.