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






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