Advertisement
Workshops

Community Project: Style a Description List

by

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:

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!

Related Posts
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML - Creating a Page TemplateCreating wordpress theme from html 400
    So far in this series, I've shown you how to create a fully functioning WordPress theme from static HTML. We've covered the following steps: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file. At the moment, your theme only has one template file for displaying content—the index.php file. A powerful feature of WordPress is the ability to use template files for different kinds of content.Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Preparing the MarkupCreating wordpress theme from html 400
    Last year I did a small (and admittedly very un-scientific) survey among other WordPress developers. What I wanted to know was this: When they built their first WordPress theme, how did they do it? Did they hack an existing theme or did they start with their own static HTML and turn it into a theme? The majority of people I spoke to used the second approach - they were all experienced frontend developers who had built sites using HTML and CSS, and found it easiest to take their existing HTML files and convert them to a theme. Two of the people I spoke to were lecturers or teachers, and told me that this is the approach they use with students. So in this series I'm going to show you how to do just that.Read More…
  • Web Design
    HTML/CSS
    Foundation for Beginners: NavigationFoundation 3 retina
    One of the most important aspects of a front-end framework is how it handles navigation. In this part of Foundation for Beginners, we'll take a look at several forms of navigation, along with some JavaScript tools which add extra flourish. I’ll also introduce you to another helpful tool which will help you to become a better Foundation developer.Read More…
  • Web Design
    Complete Websites
    Build a Responsive, Filterable Portfolio, with CSS3 TwistsPreview
    The inherent visual appeal of filterable portfolios (like the Tuts+ hub) has made them very popular. Today, we’ll be making one using straight-forward markup, CSS3 and a little bit of jQuery.Read More…
  • Web Design
    Workshops
    Community Project: Description List Results!Preview
    Nice work people! Loads of you have gone away and experimented with styling a straight-forward Description List - take a look at the results..Read More…