If you know HTML or CSS, you're welcome to modify the fonts and colors in your template any way you like. However, if you want them to work with the Fonts and Colors feature of Blogger Layouts, then there are a few guidelines to follow. Doing it this way will let you modify the colors more easily if you change your mind later. It also helps if you share your template with someone else who wants to customize their version a bit.
In the <head> section of your code, you'll need to have a pair of <b:skin> </b:skin> tags. The CSS style declarations will go in between those tags, along with the variable names that make your design work with the Fonts and Colors page. Here's a brief example of how it looks, before we get into the details:

<head>

...
<b:skin>
  <style type='text/css'>
  /*
   * Variable definitions:
   *  <Variable name='bgcolor' description='Page Background Color' 
       type='color' default='#fff'/>
   */
  body {
    background: $bgcolor;
    margin: 0;
    padding: 40px 20px;
  }
  </style>

</b:skin>
</head>

The first part of the CSS code is enclosed in /* and */ comment tags, so it won't be shown on your blog, but

The <body> section of a Layouts template is made up primarily of sections and widgets. Sections mark out areas of your page, such as the sidebar, footer, etc. A widget is an individual page element such as a picture, a blogroll, or anything else you can add from the Page Elements tab. You can include any HTML you like around the sections in your template.
Each section in your template has an opening and a closing tag, looking something like this:

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">

</b:section>
A <b:section> tag can have the following attributes:

• id - (Required) A unique name, with letters and numbers only.
• class - (Optional) Common class names are 'navbar,' 'header,' 'main,' 'sidebar,' and 'footer.' If you switch templates later, these names help Blogger determine how best to transfer over your content. However, you can use different names, if you like.
• maxwidgets - (Optional) The maximum number of widgets to allow in this section. If you don't specify a limit, there won't be one.
• showaddelement - (Optional) Can be 'yes' or 'no,' with 'yes' as the default. This determines whether the Page Elements tab will show the 'Add a Page Element' link in this section.
• growth - (Optional) Can be 'horizontal' or 'vertical,' with 'vertical' as the default. This determines whether widgets within this section are arranged side-by-side or stacked.

A section can contain widgets; it can't contain other sections or other code. If you need to insert extra code between or around certain widgets within a section, you'll need to split the section into two or more new sections.

Yes, just go to the >Layout tab and click the Edit HTML sub-tab. Keep in mind that Blogger's Layouts feature makes it easy for anyone to customize the look of their blog with little or no technical knowledge.

The first thing on the Edit HTML page is an option to download a copy of your template to a text file on your hard drive. We highly recommend doing this if you've made any interesting customizations to your design at all. Then, if you make a mistake editing your template, or if you just don't like the way it comes out, you can revert easily by uploading the same file again.

Next comes the actual code for your template. You'll notice it looks somewhat like regular HTML and CSS, but also includes lots of custom tags that make it compatible with our drag-and-drop layout editor, and with the font and color picker. If you want to make extensive changes to your code, you'll want to read up on these tags first:

• Page Element Tags
• Fonts and Colors Tags

You'll also see an option to 'Expand Widget Templates.' By default, each page element is shown in the code as a one-line placeholder, whose options can be set in the graphical interface on the Page Elements tab. Turning this option on will show the complete data and template for each element. The code is simpler the first way, but you have more control the second way, so use whichever option you prefer. Learn more by reading this help article:

• Widget Template Tags

Below the code, you'll see three buttons for Clear Edits, Preview, and Save Template, which do what you'd expect them to.

There are also two links referring to your 'classic template.' If you converted your blog from the older style of Blogger templates to the new Layouts version, then your classic template is the last template you used in the old system, with all your customizations. If your blog was created on the new system and has always used Layouts, then your classic template is a default, classic version of the original design you chose when you created the blog, without any customizations. The View link will show you the code, in case you just want to check up on something, or copy a piece of it for your new design. The Revert link will erase all the customizations you made in the Layouts feature and set your blog to use the old-style Blogger template again. Note that you won't be able to use the graphical Layouts interface in this mode (though you can convert back to Layouts again later).