Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Definition lists are one of the most flexible data handlers, as well as one of the least used. In this lesson, we'll examine the component parts of a definition list, as well as take a look at basic styling. A definition list, typically consists of three tags. On the outer container is the dl tag. Within the dl tag, is a series of pairs. The dt tag comes first. That's the data term. Following the data term is the data definition or the dd tag.
The definition list is the best choice semantically speaking, for related content that consists with the series of titles and descriptions. The definition list is very flexible structurally, although it is most often used with one data term followed by one data definition, that's not a hard and fast rule. You can for example, have a data term without a data definition, likewise any single data term can have multiple definitions as shown by this pseudocode. In an effort to promote the use of definition lists, the HTML5 spec, although it's not been finalized, has moved to rebrand them as a more general description list.
And, in truth, there are many uses of these constructs. No matter what you call them, including glossaries, of course, but also FAQs, menus, event listings, and even recipes. Most browsers depict raw unstyled definition list, as I'll continue to call them in the same way. Here's a sample webpage that includes as basic definition list. As you can see, the date and terms are presented flush left on their own line. The dated definitions which follow. Are indented to one degree or another depending on the browser. Now, let's look at how we can easily restyle the definition list, to get a completely different look and feel.
I have open in my code editor the CSS file, for the page we just looked at in the browser. I'm going to add three CSS rules. The first of which, will target the most overlooked part of the definition list, the dl tag itself. Because the dl tag is the containing element for all the definition list items, we can use that to really set it off. First, let's create the rule itself. I'll enter in the selector of #mainContent dl.
To make sure we're targeting the right definition list. And then my curly braces. For my first property, I'm going to add a pretty significant bit of padding. 20 pixels, which will serve to isolate the content. Then, let's bring on a border. I'll make it 1 pixel wide, solid and give it an rgb value that will fit in with the rest of my site. Next, we'll focus on the dt tag.
After I've created the basic rule, I'll first make the text bold by using the fontway property. Then, I'll transform it to make it all uppercase. Finally, I'll center it in the block. Let's finish our simple restyling, by adjusting the margin of the dd tag. By default, most if not all browsers include a notable bit of margin left, to indent the dd content. I'm going to reduce that to zero, and instead, add 1 m of margin to the bottom. So, our selector is mainContent as the id dd, and the rule margin 001 m that's the bottom 0.
Let's save our CSS file, and see what we have in the browser. I'll refresh. The border and padding we added to dl tag, really offsets the entire list. Our definition term looks quite different while maintaining its title characteristics, and the dd content works well in the overall list. Obviously, this is just the start of what's possible with definition list styling. In the rest of the chapter, we'll investigate some more advanced options.
Get unlimited access to all courses for just $25/month.Become a member