Use class name more than once to format the same logic block : Logic section « CSS Controls « HTML / CSS






Use class name more than once to format the same logic block

 


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  color: black;
  background-color: #ccc;
}
.content {
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: auto;
  margin-left: auto;
  background-color: #fff;
  border: 1px solid #000;
  width: 70%;
}

  </style>
</head>

<body>
  <div class="content">
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  </div>
  <div class="content">
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. this is a test. this is a test. 
  </div>
</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.Using Headings to Structure Text
5.Header style
6.Header block border
7.Section header
8.CSS Positioning