Community Project: Style a Description List

Style a what?! That’s right, in this community project I want you to style something you’ve possibly never used before; a description list.. Send your CSS over and worthy examples will be published on the site next week. Read on to find out more!

You can use whatever techniques you want, as long as they happen through the magic of CSS

This is Easy(ish)

I’m going to give you a simple piece of markup (a description list) which you’re free to style in any way you please. Here’s the markup (download it wrapped up as an html file if you want):

<dl>
	<dt>Psdtuts+</dt>
	<dd>Adobe Photoshop Tutorials from Beginner to Advanced.</dd>
	<dt>Nettuts+</dt>
	<dd>Web development Tutorials, from Beginner to Advanced.</dd>
	<dt>Webdesigntuts+</dt>
	<dd>In-depth tutorials and articles on web design.</dd>
	<dt>Wptuts+</dt>
	<dd>A WordPress Website dedicated to WordPress training, tutorials, and WordPress videos.</dd>
</dl>

A Quick Description of Description Lists

You’ll possibly recognize <dl> as a definition list, an element which has been around since HTML4. It’s been repurposed for HTML5 however, because it was often misunderstood and therefore misused.

A description list in its simplest form comprises a list <dl>, plus the key-value pairs; term <dt> and description <dd>. It’s possible to have multiple terms for any single description, just as it’s possible to have multiple descriptions of a single term. There are also additional bits of markup such as <dfn> which can be thrown into the mix, but we’ll worry about that another day :)

Read more from the W3C spec if you’re feeling curious.

What do you think you could do with this list, using the power of CSS? Here are two really basic examples, just so you get an idea of what we’re doing here.

Anything Goes

You can’t touch the HTML, without exception. But there’s loads you could do to style this list via CSS!

• Play with the colors
• Alter the fonts (use @font-face if you want)
• Make it responsive
• Add some dynamic content with pseudo elements
• Focus on usability
• Blow us away with rollovers and transitions
• Even use textures and images if you want (just make sure you zip the whole lot up when you send it over)

The only thing you need to bear in mind is that the demo page already has its styles reset with normalize.css.

Sign Me Up!

This couldn’t be simpler:

• Download the basic files
• Alter the styling in any way you want
• Include any personal details and a description about what you’ve done
• Zip your file(s) up and send them to me!

I’ll publish the best ones when I’ve collected a few. This can be on-going too – there’s no deadline.

I look forward to seeing what you all come up with! Good luck!