HTML/CSS/Basic Tags/Header

Материал из Web эксперт
Версия от 08:17, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Adding links in to the header

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
  margin: 10px 40px;
  padding: 0;
  text-align: center;
  font-size: 62.5%;
}
#wrapper {
  text-align: left;
  border: 1px solid #033;
  position: relative;
  font-size: 1.4em;
}
#header {
  background: red;
  color: #fff;
  height: 55px;
  position: relative;
}
#header h1,#header h2 {
  position: absolute;
  padding: 0;
  margin: 0;
}
#header h1 {
  top: 5px;
  left: 8px;
  height: 50px;
  background: gold;
}
#header h2 {
  top: 20px;
  left: 193px;
}
#headerlinks {
  float: right;
  font-size: 0.8em;
  background: blue;
  padding: 6px 6px 8px 10px;
}
#headerlinks a:link,#headerlinks a:visited,#headerlinks a:hover,#headerlinks a:active
  {
  color: #fff;
}
</style>
</head>
<body id="cols3">
<div id="wrapper">
 <div id="header">
 <h1>header</h1>
 <h2>header 2</h2>
 <div id="headerlinks">
    <a href="">Contact Us</a> | 
    <a href="">Site Map</a> | 
    <a href="">Store Locator</a></div>
 </div>
</div>
</body>
</html>



Adding top and bottom margin for heading

 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Headings example 3</title>
  <style type="text/css">
    body {
      font: 12px/1.5em Georgia, serif;
    }
    h1 { 
      font: 1.5em/1em Georgia, serif;
      margin: 0.5em 0 0.25em 0;
    }
    p {
      margin: 0;
      width: 33em;
    }
  </style>
</head>
<body>
  <h1>The most important heading</h1>
  <p>  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
</body>
</html>



Add the Left Margin

 
<?xml version = "1.0"?>
<!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></title>
      <style type="text/css">
* .left-marginal {
  position: relative;
  margin-left: 200px;
}
* .marginal-heading {
  position: absolute;
  left: -200px;
  top: 0;
  margin: 0;
}
</style>
   </head>
   <body>
  <h1>Left Marginal</h1> 
  
  <div class="left-marginal" > 
  <h2 class="marginal-heading">Heading</h2> 
  move it into the left margin.
  </div> 
   </body>
</html>



A fixed header

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>positioning</title>
        <style rel="stylesheet" type="text/css">
h1 {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 20px;
    width: 500px;
    font-weight: normal;
    font-size: 18px;
    border-bottom: 1px solid rgb(200, 200, 200);
    background: white;
    margin: 0;
    padding: 5px;
}
div#container {
    position: absolute;
    top: 31px;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    padding: 0 10px;
    line-height: 2em;
}        
        </style>
    </head>
    <body>
        <h1>A Fixed Heading</h1>
        <div id="container">
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu
                Aenean dictum dolor ut sem.
            </p>
            <p>
                Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel
                conubia nostra, per inceptos hymenaeos.
            </p>
        </div>
    </body>
</html>



Background with bottom border

 

<!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" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Headings</title>
  <style type="text/css" media="screen">
  body{
    font-family: verdana, sans-serif;
    font-size: 12px;
    }
  
  #divID h1 {
    font-family: Arial, sans-serif;
    font-size: 24px;
    color: #666;
    padding: 4px;
    background: #ddd;
    border-bottom: 2px solid #ccc;
    }
  
  
  </style>
</head>
<body>
<div id="divID">
  <h1>This is the Title of this page.</h1>
</div>
</body>
</html>



Border for header

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
     <head>
      <meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
      <meta http-equiv="content-language" content="en-us" />
        <title>Selectors and Grouping</title>
        <style type="text/css" media="all">
            p {
                font-family: Arial;
                font-size: 14pt;
            }
            h1 {
                color: black;
                border: 5px solid black;
            }
            h2 {
                color: orange;
                border: 4px solid orange;
            }
            h3 {
                color: blue;
                border: 3px solid blue;
            }
            h1, h2, h3 {
                letter-spacing: 5px;
                padding: 10px;
            }
        </style>
     </head>
     <body>
        <h1>
            Heading 1
        </h1>
        <h2>
            Heading 2
        </h2>
        <h3>
            Heading 3
        </h3>
        <p>
            Selectors choose the element to apply formatting to.  These may also be 
            grouped together.
        </p>
    </body>
</html>



h1 padding: 10px

 


<html>
<head>
<title>Untitled</title>
<style type="text/css">
h1  {color: white;
     background-color: black;
     text-align: center;
   padding: 10px;}
</style>
</head>
<body>
<h1>Contents of the &lt;h1&gt; Element</h1>
</body>
</html>



overflow hidden

 
<?xml version = "1.0"?>
<!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></title>
      <style type="text/css">
#h2 {
  position: relative;
  width: 250px;
  height: 76px;
  overflow: hidden;
}
#h2 span {
  position: absolute;
  width: 250px;
  height: 76px;
  left: 0;
  top: 0;
  background: url("http://www.wbex.ru/style/logo.png") no-repeat;
}
</style>
   </head>
   <body>
  <h1>Text Replacement</h1> 
  <h2 id="h2" >Heading 2<span>This is a span.</span></h2> 
   </body>
</html>



header 2 background image setting

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
h2 {
 background-image: url(headline.jpg);
 background-repeat: none;
 width: 587px;
 height: 113px;
}
</style>
</head>
<body>
  <h2><img src="" alt="Headline image set in GIF format" /></h2>
</body>
</html>



Header content section

 

<!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>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
* .section {
  padding: 10px;
  margin-bottom: 20px;
  background-color: pink;
  border-left: 1px solid gray;
  border-right: 2px solid black;
  border-top: 1px solid gray;
  border-bottom: 2px solid black;
}
* .indent {
  margin-left: 20px;
  border-left: 4px solid black;
  padding-left: 20px;
}
</style>
</head>
<body>
<div class="section"> 
    <h2>Normal Heading</h2> 
    <p class="indent">this is a test. this is a test. this is a test. this is a test. </p> 
</div> 


</body>
</html>



Header font setting

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
h2 {
 font-size: 2em;
 font-weight: bold;
 font-family: Arial, Verdana, Helvetica, sans-serif;
 text-transform: uppercase;
 text-align: center;
 padding: 0;
 margin: 0;
}
</style>
</head>
<h2>Cross<span>i</span>ng <span>Over</span></h2>
<h4>Gordon (<span>I</span>-Utah) GOP; <br />changes part<span>i</span>es to be <span>I</span>ndependent</h4>
  
</body>
</html>



Header, image and content

 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Image</title>
<style type="text/css">
img.figure {
  float: right;
  margin-left: 10px;
  margin-bottom: 10px;
  border: 1px solid #666;
  padding: 10px;
}
body {
  font-size: 62.5%;
  margin: 0px;
  padding: 0px;
}
#content {
  margin-left: 15px;
  margin-top: 15px;
  border: 1px dashed #999;
  border-right: none;
  border-bottom: none;
}
p.caption {
  font-size: 1.3em;
  line-height: normal;
  margin-bottom: 15px;
}
#gallery .figure p {
  font-size: 1.1em;
  text-align: center;
  line-height: normal;
  margin: 0;
}

h1 {
  font: normal 2.4em;
  margin: 0;
  border-bottom: 1px dashed #999;
  padding: 5px 0 5px 8px;
  color: #14556b;
}
 p {
  font: 1.6em/160%;
  margin: 10px 8px;
}
.copyright {
  font-size: 1em;
  margin-left: 0px;
  padding-left: 8px;
  border-top: 1px dashed #999;
  clear: both;
}
</style>
</head>
<body>
<div id="content">
<h1>header</h1>
<p>
<img src="http://www.wbex.ru/style/logo.png" alt="" width="200" height="200" class="figure" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.</p>
<p class="copyright">Copyright 2006, aaa.ru </p>
</div>
</body>
</html>



Header text alignment: center

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
h1 {
 font-size: 17em;
 margin: 0;
 padding: 0;
 text-align: center;
}
</style>
</head>
<h1>Hi.</h1>
  
</body>
</html>



header with absolute position

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body {
 background-color: #009E69;
 margin: 0;
}
h2 {
 position:absolute; 
 width:126px; 
 height:126px; 
 z-index:1; 
 left: 166px; 
 top: 69px;
}

</style>
</head>
<h2><span class="no">Earth News</span></h2>
<p>before <a href="">after</a></p
  
</body>
</html>



Headings

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Headings</title>
</head>
<body>
  <h1>Header 1</h1>
  <p>See what people are saying about us!</p>
  <h2>Header 2</h2>
  <p>Our loyal customers love us.</p>
  <h2>Header 2</h2>
  <p>This is a test. This is a test. </p>
</body>
</html>



Heading with background

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Image replacement</title>
<style type="text/css" media="screen">
.aFancyHeading {
    position: relative;
    width: 279px;
    height: 28px;
    overflow: hidden;
    font-size: 20px;
    }
.aFancyHeading span {
    position: absolute;
    background: red;
    width: 100%;
    height: 100%;
}
</style>
</head>
<body>
  <h1 class="aFancyHeading"><span></span>This is the heading</h1>
  <p>This is the content. this is a test. this is a test. 
     This is the content. this is a test. this is a test. 
     This is the content. this is a test. this is a test. 
     This is the content. this is a test. this is a test. 
     </p>
</body>
</html>



Heading with margin

 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Headings example 1</title>
  <style type="text/css">
    body {
      font: 12px/1.5em Georgia, serif;
    }
    h1 { 
      font: bold 1em/1.5em Georgia, serif;
      margin: 1.25em 0 0 0;
    }
    h2 { 
      font: italic 1em/1.5em Georgia, serif;
      margin: 1.25em 0 0 0;
    }
    p {
      margin: 0;
      width: 33em;
    }
  </style>
</head>
<body>
  <h1>The most important heading</h1>
  <p>  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
  <h2>A less important heading</h2>
  <p>  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
</body>
</html>



Hide
in 
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#navsite h5 {
 display: none;
}
</style>
</head>
<body>
   <div id="navsite">
   <h5>Site navigation:</h5>
   <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li> 
    <li><a href="">Archives</a></li>
    <li><a href="">Writing</a></li>
    <li><a href="" id="current">Speaking</a></li> 
    <li><a href="">Contact</a></li>
   </ul>
  </div>
</body>
</html>



Inline style for header

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
     <head>
      <meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
      <meta http-equiv="content-language" content="en-us" />
        <title>Selectors and Grouping</title>
     </head>
     <body>
        <h1 style="color: black; border: 5px solid black; letter-spacing: 5px; padding: 10px;">
            Heading 1
        </h1>
        <h2 style="color: orange; border: 4px solid orange; letter-spacing: 5px; padding: 10px;">
            Heading 2
        </h2>
        <h3 style="color: blue; border: 3px solid blue; letter-spacing: 5px; padding: 10px;">
            Heading 3
        </h3>
        <p style="font-family: Arial; font-size: 14pt;">
            Selectors choose the element to apply formatting to.  These may also be 
            grouped together.
        </p>
    </body>
</html>



Inline style for header 3

 
<html>
<title>CSS Sample</title></head>
<body>
<h3>This is going to be a headline.</h3>
<h3 style="font-family: arial;
           font-size: 18pt;
           color: blue;
           text-align: center;">This will be another headline.</h3>
</body>
<html>



Letter Spacing in Headlines

 
<!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></title>
  <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1" />
  <style type="text/css">
  h1 {
    font-family: Courier, "Courier New", monospace;
  }
  .rupress {
    letter-spacing: -0.05em;
  }
  </style>
</head>
<body>
  <h1>This Is a Little Too Spread Out</h1>
  <h1 class="compress">This Is a Little Bit Better</h1>
</body>
</html>



News Header style

 

<?xml version="1.0" ?>
<!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" lang="en" xml:lang="en">
<head>
  <title>Channel 7 News</title>
  <style rel="stylesheet" type="text/css">
body {
  background-color: #FFFFFF;
}
.heading {
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
  width: 90%;
  font-family: arial, verdana, helvetica, sans-serif;
  font-size: 22pt;
  text-align: right;
  color: #000000;
  background-image: url("images/seven.gif");
  background-repeat: no-repeat;
  margin: 5px;
  padding: 10px;
}
.page {
  margin: 5px;
  padding: 10px;
  width: 90%;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
}
.nav {
  margin: 5px;
  padding: 10px;
  width: 90%;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
  background-color: #efefef;
}
.title {
  font-family: arial, verdana, helvetica, sans-serif;
  font-size: 16pt;
  padding-bottom: 12px;
}
.page {
  font-family: arial, verdana, helvetica, sans-serif;
  font-size: 12pt;
}
a {
  text-decoration: none;
  padding: 3px;
  font-family: arial, verdana, helvetica, sans-serif;
  font-size: 12pt;
}
image {
  
}
</style>
</head>
<body>
<div class="heading">Channel 7 News</div>
<div class="nav">
  <a href="">Home</a>
  <a href="">News</a>
  <a href="">Science</a>
  <a href="">Politics</a>
  <a href="">Entertainment</a>
  <a href="">Sport</a>
  <a href="">Weather</a>
</div>
<div class="page">
<h1>Headlines</h1>
<h3><a href="">Header 1</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam semper viverra nulla. Sed lacinia feugiat eros.</p>
<h3><a href="">Header 3</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam semper viverra nulla. Sed lacinia feugiat eros.</p>

<h3><a href="">Header 2</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam semper viverra nulla. Sed lacinia feugiat eros.</p>
<h3><a href="">Header 1</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam semper viverra nulla. Sed lacinia feugiat eros.</p>
<h3><a href="">Header 2</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam semper viverra nulla. Sed lacinia feugiat eros.</p>
<h3><a href="">Header 3</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam semper viverra nulla. Sed lacinia feugiat eros.</p>
<h3><a href="">Header 4</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam semper viverra nulla. Sed lacinia feugiat eros.</p>
<h3><a href="">Header 5.</a></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam semper viverra nulla. Sed lacinia feugiat eros.</p>

</div>
</body>
</html>



Set font for header 1

 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
    h1 {
      font: bold 1em/1.5em Georgia, serif;
      margin: 1em 0 0 0;
    }
  </style>
</head>
<body>
  <div>
    <h1>Basic font-size of 16px</h1>
  </div>
</body>
</html>



Set font size for 

 
<html>
 <head>
  <title>Set font size for <H1></title>
  <style type="text/css">
  h1 {
   font-size: 120%;
  }
  </style>  
 </head>
 <body>
  <h1>Title of Page</h1>
  <p>This is a sample paragraph with a 
  <a href="http://www.wbex.ru">link</a>.</p>
 </body>
</html>



Set font size to 1em

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
h2 {
 font-size: 1em;
}
</style>
</head>
<body>
  <h2>This is the title</h2>
  <p>This is a text.</p>
</body>
</html>



Set <H1> in header

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">

div#header h1{
  height: 80px;
  line-height: 80px;
  margin: 0;
  padding-left: 27%;
  color: #333;
}
</style>
</head>
<body>
<div id="container">
  <div id="header">
    <h1>My Amazing Web Site </h1>
  </div>
  <div id="wrapper">
    <div id="content">
      <h2>Contact Form</h2>
      <form id="form1" name="form1" method="post" action="/">
    
      <label for="fmtitle" accesskey="i">T<span class="akey">i</span>tle</label>
      <select name="fmtitle" id="fmtitle">
      <option value="ms">Ms.</option>
      <option value="mrs">Mrs.</option>
      <option value="miss">Miss</option>
      <option value="mr">Mr.</option>
        </select>

        <label for="fmname" accesskey="n"><span class="akey">N</span>ame</label>
        <input type="text" name="fmname" id="fmname" />
    
        <label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label>
        <input type="text"  name="fmemail" id="fmemail" />
    
        <label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label>
        <input type="text" name="fmstate" id="fmstate" />
    
        <label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label>
        <input type="text" name="fmcountry" id="fmcountry" />
    
        <label for="fmmsg"><span class="akey">M</span>essage</label>
        <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
    
        <input type="submit" name="submit" value="send" class="submit" />
      </form>
    </div>
  </div>
  <div id="extra">
    <h2>quid pro quo</h2>
  </div>
  <div id="footer">
    <p>ask.</p>
  </div>
</div>
</body>
</html>



Set <h1> in header section

 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">

div#header h1{
  height: 80px;
  line-height: 80px;
  margin: 0;
  padding-left: 27%;
  color: #333;
}
</style>
</head>
<body>
<div id="container">
  <div id="header">
    <h1>My Amazing Web Site </h1>
  </div>
  <div id="wrapper">
    <div id="content">
      <h2>Contact Form</h2>
    
    <p>This is a test.</p>
    
      <p>Please fill out our form below in order to contact me. </p>
      <form id="form1" name="form1" method="post" action="/">
    
      <label for="fmtitle" accesskey="i">T<span class="akey">i</span>tle</label>
      <select name="fmtitle" id="fmtitle">
      <option value="ms">Ms.</option>
      <option value="mrs">Mrs.</option>
      <option value="miss">Miss</option>
      <option value="mr">Mr.</option>
        </select>

        <label for="fmname" accesskey="n"><span class="akey">N</span>ame</label>
        <input type="text" name="fmname" id="fmname" />
    
        <label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label>
        <input type="text"  name="fmemail" id="fmemail" />
    
        <label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label>
        <input type="text" name="fmstate" id="fmstate" />
    
        <label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label>
        <input type="text" name="fmcountry" id="fmcountry" />
    
        <label for="fmmsg"><span class="akey">M</span>essage</label>
        <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
    
        <input type="submit" name="submit" value="send &raquo;" class="submit" />
      </form>
      
     <p>Note: Due to our busy schedules, we cannot answer every message.</p>
    
    </div>
  </div>
  <div id="extra">
    <h2>header</h2>
    <p>This is a text</p>
  </div>
  <div id="footer">
    <p>All rights reserved except where noted.</p>
  </div>
</div>
</body>
</html>



Use bold font to highlight heading

 
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Headings example 2</title>
  <style type="text/css">
    body {
      font: 12px/1.5em Georgia, serif;
    }
    h1 { 
      font: bold 1.5em/1em Verdana, sans-serif;
      margin: 1.25em 0 0 0;
    }
    h2 { 
      font: 1.5em/1em Verdana, sans-serif;
      margin: 1.25em 0 0 0;
    }
    p {
      margin: 0;
      width: 33em;
    }
  </style>
</head>
<body>
  <h1>The most important heading</h1>
  <p>  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
  <h2>A less important heading</h2>
  <p>  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
</body>
</html>



Use
to mark header

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">

div#header{
  position:relative;
  background-image: url(r.gif);
  background-repeat: no-repeat;
  background-position: 10px 0px;
  
  }
</style>
</head>
<body>
<div id="container">
  <div id="header">
    <h1>My Amazing Web Site </h1>
  </div>
  <div id="wrapper">
    <div id="content">
      <h2>Contact Form</h2>
      <form id="form1" name="form1" method="post" action="/">
    
      <label for="fmtitle" accesskey="i">T<span class="akey">i</span>tle</label>
      <select name="fmtitle" id="fmtitle">
      <option value="ms">Ms.</option>
      <option value="mrs">Mrs.</option>
      <option value="miss">Miss</option>
      <option value="mr">Mr.</option>
        </select>

        <label for="fmname" accesskey="n"><span class="akey">N</span>ame</label>
        <input type="text" name="fmname" id="fmname" />
    
        <label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label>
        <input type="text"  name="fmemail" id="fmemail" />
    
        <label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label>
        <input type="text" name="fmstate" id="fmstate" />
    
        <label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label>
        <input type="text" name="fmcountry" id="fmcountry" />
    
        <label for="fmmsg"><span class="akey">M</span>essage</label>
        <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
    
        <input type="submit" name="submit" value="send" class="submit" />
      </form>
    </div>
  </div>
  <div id="extra">
    <h2>quid pro quo</h2>
  </div>
  <div id="footer">
    <p>ask.</p>
  </div>
</div>
</body>
</html>