Style for Logic Section : Logic section « CSS Controls « HTML / CSS






  1. HTML / CSS
  2. CSS Controls
  3. Logic section

Style for Logic Section

 
<!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" media="Screen">
* .section {
  padding: 10px;
  margin: 10px 0;
  background-color: pink;
}

* .section p {
  margin: 0;
  margin-top: 5px;
}

* .section h2 {
  margin: 0;
  margin-bottom: 10px;
}

* .section h3 {
  margin: 0;
  margin-bottom: 10px;
}

* .section.example {
  background-color: #aaa;
}

* .section * .section {
  margin-bottom: 0;
}
</style>
</head>
<body>
<div class="section introduction"> 
    <h2>Header 1</h2> 
    <p>this is a test. this is a test. </p> 
    </div> 
    
    <div class="section content"> 
    
        <h2>Content</h2> 
        <p>this is a test. this is a test. this is a test. </p> 
        
        
        <div class="section example"> 
        
        <h3>Subsection</h3> 
        <ul>
            <li>this is a test.</li> 
            <li>this is a test. </li>
        </ul> 
    </div> 
</div> 

</body>
</html>








Related examples in the same category

1.Separate the style by logic
2.Space between text and heading
3.Use class name more than once to format the same logic block
4.Using Headings to Structure Text
5.Header style
6.Header block border
7.Section header
8.CSS Positioning