Separate the style by logic : Logic section « CSS Controls « HTML / CSS






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

Separate the style by logic

 


<!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>
<title></title>
<style type="text/css">
div {
  top: 126px;
  z-index: 1;
  position: absolute;
  width: 161px; 
}

p {
  padding: 0;
  margin: 0;
}
#layer1  {
  left: 21px; 
  top: 126px;
  font-size: 3em;
  line-height: 10px;
}


#layer2  {
  height: 168px; 
  left: 199px;

  font-size: 2em;
  line-height: 10px;

}

#layer3  {
  left: 377px;
  top: 127px;

  font-size: 1em;
  line-height: 20px;
}

#layer4  {
  height: 168px;
  left: 554px;
  font-size: .7em;
  line-height: 20px;
}

  </style>

</head>

<body>
<div id="layer1"> 
  <p>layer1</p>
</div>

<div id="layer2"> 
  <p>layer2. </p>
</div>

<div id="layer3"> 
  <p>layer3. </p>
</div>

<div id="layer4"> 
  <p>layer4. </p>
</div>
</body>
</html>








Related examples in the same category

1.Style for Logic Section
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