Making Definition Lists Look Nice!

  • Article

I've been out sick the last few days and haven't gotten to do much at work or at home, and being stuck at home can get pretty boring, I can only surf the internet for so long before I get pretty bored. Even watching all the Katrina stuff I was still pretty bored, and my heart does go out to them.

Seeing that I'm not going to get any automation done this week, I've started working on building the CTP drop that we release to a small group of people on a month basis. It's a bit of a long slow process, so I thought I'd update my blog while I was waiting.

Definition Lists (<dt> & <dd>)

  • Definition lists typically look pretty boring

    They don't really show any kind of nice definition list, just a simple subject, and then the definition below it. Doesn't do much to spice up your website.

So, lets spice it up!

  • Lets make the term bold

    Okay, thats a good start. We now now that we've got our term to stand out a bit more. But our description is still pretty boring

Thats a good start, but we're not done yet.

  • Bolded Term

    Okay, so now we're making the definition a little bit different, a slightly lighter colo[u]r. Looks a little nicer, but I don't think I quite feel done with this yet.

Lets add an icon to the front of the term and the front of the description

  • Bolded Term

    Now we've tied it all together. We've got colo[u]r, bullets, and everything. Okay, I know the bullets aren't pretty, but I just wanted to grab something that was already up on the msdn site, and not have to upload my own thing.

So what does this all look like in CSS?

dt {
  padding-left: 20px;
  background: url(https://blogs.msdn.com/Themes/default/images/Star1.gif) no-repeat 0 0px;
  font-variant: small-caps;
  font-weight: bold;
}
dd {
  padding-left: 20px;   color: #666666;
  background: url(https://blogs.msdn.com/Themes/default/images/Star1.gif) no repeat 0 0px;
}

Sample at https://www.nocommonground.com/blogSamples/deflist.htm