The importance of typography on the webLesson 6, Formatting Text with CSS 1339 In the last paragraph, change the opening <p> and closing </p> paragraph tags to an
opening <dl> and closing </dl> to change this element to a defi nition list.Defi nition lists are used less often than ordered and unordered lists. One way to think of
them is to visualize a listing in a dictionary. A dictionary is just a big list of words; however,
for any given word there may be a number of diff erent defi nitions. A defi nition list has two
types of list items: the defi nition term
10 Add the following code (highlighted in red) to separate this list into terms and
descriptions:
<dl>
<dt>Preparation time</dt>
<dd>10 Minutes</dd>
<dt>Number of servings (12 oz)</dt>
<dd> 2 </dd>
<dt>Calories per serving</dt>
<dd> 250 </dd>
<dd>295 if 1 tbs sugar added</dd>
<dd>315 if 1 tbs honey added</dd>
</dl>Save the fi le and preview it in your browser. The defi nition terms act as a type of
a heading with the defi nition description indented below. Note that you may have
multiple descriptions, as you can see in the last defi nition term for Calories.Styling HTML lists
You can easily modify the styling for lists with CSS. The indentation and spacing of a list
(as well as the list items) are controlled by margins and padding. There are also a few CSS
properties that are unique to lists; for example, later in this exercise, you will learn how
to customize the bullet appearance in the unordered list. First, however, it’s important to
understand the default styles of both the parent list and the list items. A specifi c goal of this
exercise is to make you aware of the diff erences between margins and padding; these two
properties are often confused by beginners and your future as a web designer will be much
happier if you avoid this confusion!
One thing you may have noticed is that all your lists are bigger than your paragraphs and
they also have a diff erent font family. This is because you have not set any rules for them yet,
so they are inheriting their style from the body. As you go through styling each list, you will
add font-size and other properties as needed.