Resources for Styling Lists

July 27th, 2011

In our continuing quest to listen to our readers and give them what they are looking for, we have a post of resources that we were asked to compile. With the amount of content being shared through the web, so much of it is presented in lists, designers are constantly looking for stylish ways to deliver these listings. Below are some resources and more to help you out in this arena.

We have collected some valuable tools that designers can use to creatively get this done, and have also gathered a showcase of some unique and inspiringly crafted lists. First you can get some interesting ideas for creating lists for your own design projects via the showcase, before you dive into the resource section of the post in order to bring those ideas to life.




Rapidweaver 5.0

Worry Free Labs

Three Penny Editor


Dan George

L’Echappee Laine

Host Bacon

Melbourne Studio of Art



eFrog Themes


Felipe Medina

Kenny Saunders


Shelly Cooper Design




Jorge Rigabert


La Web Shop



5 Ways to Set Your Unordered Lists Apart

The Amazing LI: Using CSS and Unordered List Items to Do Just About Anything

Sexy Ordered Lists with CSS

Reinventing a Drop Down with CSS and jQuery

Definition lists – misused or misunderstood?

CSS & HTML: nested lists with style



CSS Menu Maker




The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.


7 comments for „Resources for Styling Lists
  1. nik on July 27th, 2011 at 10:19 pm

    Some of them are columns, not lists. Altough one can format them with unordered lists, the title „Styling Lists“ is wrong for these contexts. Same about all that menu tutorials. They are not list contents, they are listed navigation items. Semantically thats a difference (as well as Layouts are no tables, even if you style them with table elements).

    • Robert Bowen on July 28th, 2011 at 9:07 am

      Hey nik

      While yes columns are available in CSS3, in older versions and browsers not supporting CSS3, styling using lists is still a go to method for achieving the effects that are needed. So the context is still very relevant. And while yes nav elements are their own tag, they are still styled via the list elements in your CSS so those tuts are also very relevant when looking at ways to style and arrange lists. Would you not agree?

      Noupe Editorial Team

  2. Designerist on July 28th, 2011 at 9:14 am

    Thank you very, very, very much for these examples and tutorials. Finally everything is collected and well stored in one place. I had a collection of code snippets, and always had to figure out which one to take. But now, all my search-and-find problems are nicely solved.
    Thanks again!

  3. Wayne McManus on July 28th, 2011 at 11:57 am

    Great post. I’ll be coming back to this a lot!

  4. George E. Frog on July 28th, 2011 at 6:00 pm

    Thank you for the mention.

  5. Marco on July 29th, 2011 at 3:58 pm

    Thanks for adding my blog to the list. I’m glad someone found my article useful.
    Have a wonderful summer day!

  6. Oddballz on July 29th, 2011 at 10:03 pm

    Some nifty ideas to conciser, like Nik indicated, “Some of them are columns, not lists”, but conceptually fit well within the context of this resource. Great post!