Header block border : Logic section « CSS Controls « HTML / CSS

HTML / CSS » CSS Controls » Logic section 
Header block 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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" title="text/css">
{
  font-size: 80%;
  line-height: 1.4em;
  padding-left: 2.5em;
  margin-top: 0;
  margin-bottom: 1em;
}

h1,h2 {
  color: #666666;
  margin: 0 0 10px 0;
  border-left: 1.2em solid #cccccc;
  padding: 0 0 0 10px;
}

h1 {
  font-size: 120%;
}

h2 {
  font-size: 120%;
}

h3 {
  margin: 0 0 5px 0;
  font-size: 90%;
  color: #555555;
  font-weight: bold;
  padding-left: 2.25em;
}
</style>
</head>
<body>
    <h1>Article heading</h1>
    <p>this is a test. this is a test. this is a test. </p>
    <h2>this is header 2</h2>
    <p>this is a test. this is a test. this is a test. </p>
    <h3>Header 3</h3>
    <p>this is a test. this is a test. this is a test. </p>
    <h3>Header 3</h3>
    <p>this is a test. this is a test. </p>
</body>
</html>

 
Related examples in the same category
1.Style for Logic Section
2.Separate the style by logic
3.Space between text and heading
4.Use class name more than once to format the same logic block
5.Using Headings to Structure Text
6.Header style
7.Section header
8.CSS Positioning
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.