• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / CSS / Making Lists Look Nicer with CSS

Making Lists Look Nicer with CSS

19 July 2004 / 1 Comment

Standard HTML lists are usually pretty boring – a few indented lines with bullets or numbers down the left side. However, with the power of CSS, you can really get creative with your lists! Read on for details…

Controlling indentation

CSS allows you to have more control over the level of indentation of the list items. This is great for those times when your lists start veering across the page, ruining the nice, perfectly-aligned look of your design.

You can adjust the amount of indentation that a list uses by setting both the margin-left and padding-left properties for the ul selector. For example:


ul
{
  margin-left: 0;
  padding-left: 0;
}

Note that you have to specify both margin-left and padding-left for this to work properly across all browsers.

So let’s create a simple list inside a dark rectangle:


<div style="background-color: #DDDDB7;">
  <ul style="margin-left: 0; padding-left: 0;">
    <li>Rover the dog</li>
    <li>Fluffy the cat</li>
    <li>Jack the rabbit</li>
  </ul>
</div>

This will produce the following list:

    • Rover the dog
    • Fluffy the cat
    • Jack the rabbit

The trouble is – our list bullets are outside the rectangle – invisible even, on some browsers! This is because, by default, a list item’s bullet is outside the list item’s CSS box. We can fix this problem by adding a bit of padding to the list:


  <ul style="margin-left: 0; padding-left: 30px;">

This produces the following effect:

    • Rover the dog
    • Fluffy the cat
    • Jack the rabbit

That’s more like it! So now we can control exactly how far our lists indent, for example:


  <ul style="margin-left: 0; padding-left: 5px;">
    • Rover the dog
    • Fluffy the cat
    • Jack the rabbit

Using different bullets

Another great thing you can do with CSS is change the style of bullets. This is achieved using the list-style-type property. For example, to change the bullets to squares:


  <ul style="list-style-type: square;
  margin-left: 0; padding-left: 30px;">
  • Rover the dog
  • Fluffy the cat
  • Jack the rabbit

There are also many types of numbering systems you can use for numbered lists. For example:


  list-style-type: lower-roman;
  • Rover the dog
  • Fluffy the cat
  • Jack the rabbit

  list-style-type: lower-alpha;
  • Rover the dog
  • Fluffy the cat
  • Jack the rabbit

  list-style-type: decimal-leading-zero;

(Only works on some browsers)

  • Rover the dog
  • Fluffy the cat
  • Jack the rabbit

For a full list of bullet types that you can use in lists, see the W3C CSS specification.

Using images for bullets

You can even use images for list bullets!


  list-style-image: url("images/smiley.gif");
    • Rover the dog
    • Fluffy the cat
    • Jack the rabbit

Inline lists

Another really useful thing you can do with CSS is create inline lists, using display: inline. For example:


ul, li
{
  display: inline;
}
  • Rover the dog
  • Fluffy the cat
  • Jack the rabbit

Now that the list is not constrained to being displayed in a vertical row, you have a lot more control over the layout. For example, by adding in a few borders and background colours, you can give the list items a “button” effect:


ul, li
{
  display: inline;
}

li
{
  border: solid 1px white;
  padding: 5px;
  margin: 5px;
  background-color: #DDDDB7;
}
  • Rover the dog
  • Fluffy the cat
  • Jack the rabbit

You can see that, while the basic HTML for our list has remained the same throughout this tutorial, we have managed to change the look of the list fairly radically through the use of CSS. Pretty cool!

This has hopefully given you a taste of some of the neat things you can do with CSS and lists. For more info on formatting lists with CSS, see the W3C specification.

Filed Under: CSS Tagged With: customizing lists, dd, dl, dt, li, ol, styling lists, ul

Reader Interactions

Comments

  1. abhijit says

    13 August 2010 at 7:28 am

    Lists are often used to make horizontal css menus these days. Last point you mentioned shows that method. Thanks for sharing.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits