CSS definition / description list
➔ In a definition list, each list item is labeled with a description.
Example
dt {
padding: .25em;
clear: left;
}
dd {
float: left;
width: 60%;
margin-left: 80px;
padding: .25em 0;
}
dt:before {
content: '\21E8';
color: #900025;
margin-right: 5px;
font-size: 20px;
}
dd:before {
content: url('resources/images/star3.png');
margin-right: 10px;
}
dd.water:after {
content: '\2665';
color: red;
margin-left: 5px;
}
dd.tea:after {
content: '\1F600';
color: red;
margin-left: 5px;
}
dd.coffee:after {
content: '\1F60D';
color: red;
margin-left: 5px;
}Click on the "Try it Now" button to see how it works.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS style definition list Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<style>
dl {
font-style:italic;
}
dt {
color: green;
}
dd {
color: red;
}
</style>
</head>
<body>
<h3>The dl, dd, and dt elements</h3>
<p>These elements create a description list:</p>
<dl>
<dt>Friuts</dt>
<dd>Apple<img src="resources/images/fruits-apple.png" height="20"></dd>
<dd>Orange<img src="resources/images/fruits-orange.png" height="20"></dd>
<dt>Vegitables</dt>
<dd>Cauliflower:<img src="resources/images/veg-cauliflower.png" height="20"></dd>
<dd>Broccoli:<img src="resources/images/veg-broccoli.png" height="20"></dd>
</dl>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.