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






  1. HTML / CSS
  2. CSS Controls
  3. 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">
p {
    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