Separate the style by logic : Logic section : CSS Controls HTML CSS TUTORIALS

HTML CSS TUTORIALS » CSS Controls » 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>