font, color, background for dt : dt « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. dt

font, color, background for dt

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.bios dt {
 font-weight: bold;
}
.bios dd {
 margin: 0;
 padding: 0;
}

.bios dl:target {
 background-color: #999999;
 border: 1px solid black;
 padding: 1em;
 font-weight: bold;
 line-height: 1.5;
}
.bios dl:target dt {
 font-style: italic;
 color: white;
 font-size: 1.5em;
 background-color: #cccccc;
 margin-right: 20px;
}
.bios dl:target dd {
 margin-right: 20px;
 background-color: #cccccc;
 padding: 0 1em 1em 1em;
}

.bios dl:not(:target) {
 border: none;
 padding: 0;
 font-size: .8em;
}
</style>
</head>

<body>
  <div class="bios">
   <dl>
    <dt>A</dt>
    <dd>This is a text. This is a text. This is a text. This is a text. 
    This is a text. This is a text. This is a text. This is a text. 
    This is a text. This is a text. This is a text. This is a text. 
    This is a text. This is a text. This is a text. This is a text. 
    This is a text. This is a text. This is a text. This is a text. 
    This is a text. This is a text. This is a text. This is a text. 
    This is a text. This is a text. This is a text. </dd>
   </dl>
   <dl id="jessica">
    <dt>B</dt>
    <dd>This is a text. This is a text. This is a text. This is a text. 
    This is a text. This is a text. This is a text. This is a text. 
    This is a text. This is a text. This is a text. This is a text. 
    This is a text. This is a text. This is a text. This is a text. </dd>
   </dl>
   <dl id="trueman">
    <dt>C</dt>
    <dd>This is a text. This is a text. This is a text. This is a text. 
    This is a text. This is a text. This is a text. This is a text. 
    This is a text. This is a text. This is a text. This is a text. 
    This is a text. This is a text. This is a text. This is a text. </dd></dl>

   <dl id="mark">
    <dt>D</dt>
    <dd>This is a text. This is a text. This is a text. This is a text. 
    This is a text. This is a text. This is a text. This is a text. 
    This is a text. This is a text. This is a text. This is a text. 
    This is a text. This is a text. This is a text. This is a text. </dd></dl>

  </div>
  
</body>
</html>








Related examples in the same category

1.Bold font for DT
2.'dt' Example