News Header style : Header : Basic Tags HTML CSS TUTORIALS


HTML CSS TUTORIALS » Basic Tags » Header »

 

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 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;
}

{
  text-decoration: none;
  padding: 3px;
  font-family: arial, verdana, helvetica, sans-serif;
  font-size: 12pt;
}

image {
  
}
</style>
</head>
<body>
<div class="heading">Channel 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>

 



HTML code for linking to this page:

Follow Navioo On Twitter

HTML CSS TUTORIALS

 Navioo Basic Tags
» Header