<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata">

CSS selector {
  font-family: 'Font Name', serif;
}

<div style="font-family: 'Font Name', serif;">Your text</div>

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
/* add this in the header*/
 
 <h1 style="font-family: 'Tangerine', serif;font-size:36px">Making the Web font  looks nice!</h1>
/* add this in the body */

http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold|Tangerine:700

<h3 style=" font-size:30px ">Enjoyed it,Happy reading!</h3>
<h3 style="font-family:'Droid Serif';font-size:30px ">Enjoyed it,Happy reading!</h3>

   <script type="text/javascript" src="jquery-latest.pack.js"></script>
    <script type="text/javascript" src="slide.js"></script>  
    <link href="style.css" rel="stylesheet" type="text/css" />

 <div id="menu" class="menu">
	 <ul>
	 <li><a href="javascript:;">Home</a></li>
	 <li><a href="javascript:;">HTML/CSS</a></li>
	 <li><a href="javascript:;">JavaScript</a></li>
        <li><a href="javascript:;">Resources</a></li>
	<li><a href="javascript:;">Tutorials</a></li>
	<li><a href="javascript:;">About</a></li>
	 </ul>
 </div>

/** style need add for slide menu **/	
 
		.menu ul li a span { 
			position: absolute;
			left: 0;
			width: 110px;
		}
 
		.menu ul li a span.out {
			top: 0px;
		}
 
		.menu ul li a span.over,
		.menu ul li a span.bg {  
			top: -45px;
		}
 
		/** image background **/
 
		#menu {
			background:url(bg_menu.gif) scroll 0 -1px repeat-x;
			border:1px solid #CCC;
		}
 
		#menu ul li a {
			color: #000;
		}
 
		#menu ul li a span.over {
			color: #FFF;
		}
 
		#menu ul li span.bg { 
			height: 45px;
			background: url(bg_over.gif) center center no-repeat;
		}
 
		/** color background **/
 
		#menu2 {
			background:#45A8DF;
		}
 
		#menu2 ul li a {
			color:#FFF;
		}
 
		#menu2 ul li a span.over {
			background: #A6DD00;
			color:#333;
		}
		#menu2 ul li.nav1 a span.over {
			background: #fea274;
		}
		#menu2 ul li.nav2 a span.over {
			background: #b0bbba;
		}
		#menu2 ul li.nav3 a span.over {
			background: #a3f091;
		}
		#menu2 ul li.nav4 a span.over {
			background: #86dbf9;
		}
		#menu2 ul li.nav5 a span.over {
			background: #e0caf0;
		}
		#menu2 ul li.nav6 a span.over {
			background: #9dace9;
		}

/*---google chrome hack---*/
 
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   /*----css codes for google chrome------
   #sboxes li h2 
    {
      font-size:17px;
     padding-left:7px; 
      }
*/
}

  #content
  {
      padding:10px;
    _padding:5px;/* --- for ie6 css ----  */
  }

*+html selector { property: value; }

* html selector { property: value; }

property: value\0

<?php get_headerer(); ?>

include(TEMPLATEPATH . '/script.php');

/*
Theme Name: red theme
Theme URI: http://www.brightyoursite.com/blog/2010/01/11/your-first-normal-wordpress-template/
Description:Your first wordpress theme
Version: 1.6
Author: alex 
Author URI:  http://www.brightyoursite.com
Tags: red, fixed width, two columns, widgets 
*/

  <div id="menus">
  <ul>
 <?php wp_list_pages("title_li=&depth=2"); ?>
 </ul>
  </div>

<?php if (have_posts()) : ?> 
  <?php while (have_posts()) : the_post(); ?>
       <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
       <div class="item_head">
       <div class="item_header_text"><h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a</h1</div>					
	 </div> 
	 <div class="item_description"><?php the_content('Read the rest of this entry &raquo;'); ?></div>
         <div class="tags" ><?php the_tags('Tags: ', ', ', '<br />');  ?> </div>  
	 </div> 
	 <?php endwhile; ?> 
	 <div class="navigation">
		 <div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
		 <div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
	 </div> 
	  <?php else : ?>
		<h2 class="center">Not Found</h2>
		<p class="center">Sorry, but you are looking for something that isn't here.</p>
		<?php get_search_form(); ?> 
         <?php endif; ?>

<div id="navs">
<ul>
<li><img alt='Home' src='images/normalbg.jpg' /><a href=''>Home</a></li>
<li><img alt='Portfolio' src='images/normalbg.jpg' /><a href=''>Portfolio</a></li>
<li><img alt='Services' src='images/normalbg.jpg' /><a href=''>Services</a></li>
<li><img alt='Projects' src='images/normalbg.jpg' /><a href=''>Projects</a></li>
<li><img alt='Articles' src='images/normalbg.jpg' /><a href=''>Articles</a></li>
<li><img alt='Contact' src='images/normalbg.jpg' /><a href=''>Contact</a></li>
</ul>
</div>

 #navs ul
 {
	 margin:0px;
	 padding:0px;
 }
 #navs ul li
 {
	float:left;
	display:inline-block;
	list-style:none;
	height:46px;
	position:relative;
	background:url(images/menuover.jpg) repeat-x left top;
 }
 #navs ul li a
  {
	 position:absolute;
	 display:block;
	 line-height:46px;
	 height:46px;
	 width:131px;
	 text-align:center;
	 left:0px;
	 top:0px;
	 text-decoration:none;
	 color:#1F1E1E;
  }
 #navs ul li:hover img
  {
	visibility:hidden;
  }

 #navs ul li
 {
	float:left;
	display:inline-block;
	list-style:none;
	height:46px;
	position:relative;
	behavior: url("csshover3.htc");
	background:url(images/menuover.jpg) repeat-x left top;
 }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>2 columns xhtml layout frame</title>
    <link href="frame.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
  <div id="header"></div>
  <div id="menus"></div>
  <div id="maincontent"></div>
  <div id="rightcontent"></div>
  <div id="footer"></div>
</div> 
</body>
</html>

body
{
  margin:0px;
  padding:0px;
}
#wrapper
{
  width:875px;
  margin:auto;
  overflow:hidden;
}
#header
{
  height:100px;
}
#menus
{
  height:37px;
}
#maincontent
{
   width:600px; 
   float:left; 
}
#rightcontent
{
   width:250px;
   float:right;
 }
#footer
{
   height:82px; 
   clear:both;
}
 
/* --- the codes below just help you to see the frame,those code will be delete and the end --*/
 
 
#header
{
  background:#f80;
}
#menus
{
  background:blue;
}
#maincontent
{
  background:green;
  height:500px;
}
#rightcontent
{
  background:#f90;
  height:500px;
}
#footer
{
  background:#666;
}

body
{
  margin:0px;
  padding:0px;
  background:url(images/pagebg.gif) repeat-x;
}
#wrapper
{
  width:861px;
  margin:auto;
  overflow:hidden;
  padding:0px 7px;
  background:url(images/wrapperbg.png) repeat-y;
}
#header
{
  height:100px;
}
#menus
{
  height:37px;
  background:url(images/menu_bg.png) repeat-x;
}
#maincontent
{
   width:600px; 
   float:left; 
}
#rightcontent
{
   width:250px;
   float:right; 
}
#footer
{
   height:82px; 
   clear:both;
   background:url(images/footer_bg.png) repeat-x;
}
 
/* --- the codes below just help you to see the frame,those code will be delete and the end --*/
 
#maincontent
{ 
  height:500px;
}
#rightcontent
{ 
  height:500px;
  border-left:solid 1px #ddd;
}