Header style : Logic section « CSS Controls « HTML / CSS

HTML / CSS » CSS Controls » Logic section 
Header style
 

<!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">
{
    line-height: 1.4em;
    padding-left: 1.4em;
    margin-top: 0;
    margin-bottom: 1em;
}
h1, h2 {
    color: #555555;
    margin: 0 0 10px 0;
    border-bottom: 1px dotted #555555;
    padding: 0 0 2px 0;
}
h1 {
    font-size: 150%;
}
h2 {
    font-size: 120%;
}
h3 {
    margin: 0 0 5px 0;
    font-size: 90%;
    color: #444444;
    font-weight: bold;
    padding-left: 1.35em;
}
</style>
</head>
<body>
    <h1>Article heading</h1>
    <p>this is a test. this is a test. this is a test. this is a test. </p>
    <h2>Header 2</h2>
    <p>this is a test. 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. this is a test. </p>
    <h3>Header 3</h3>
    <p>this is a test. this is a test. 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 block border
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.