Bilindiği üzere [COLOR=black]CSS[/COLOR] ile maddeleme veya listeleme yapılırken [FONT=Lucida Console][COLOR=#0b8a74]
    [/COLOR][/FONT] ve [FONT=Lucida Console][COLOR=#0b8a74]
      [/COLOR][/FONT] elementleri kullanılır. [FONT=Lucida Console][COLOR=#0b8a74]
        [/COLOR][/FONT] kullanıldığında 1'den başlayarak aşağıya doğru size bir liste hazırlar. Bunun dışında [FONT=Lucida Console][COLOR=#0b8a74]
          [/COLOR][/FONT] kullanıldığında ise maddeleme olarak bir liste oluşacaktır.

          Düz bir şekilde, stilde herhangi bir değişiklik yapmadan listeleme yapıldığında aşağıdaki gibi bir görüntü oluşur.



          İşte bu listemizin sol tarafındaki siyah maddeleme işaretlerinin yerine bir resim koymak istiyoruz. Bu işlemi [FONT=Lucida Console][COLOR=#0b8a74]list-style-image[/COLOR][/FONT] CSS kodu ile yapıyoruz. Kullanımı aşağıdaki şekildedir.

          [COLOR=black]ul { list-style-image:url
          ('http://i41.tinypic.com/10rk5ua.jpg'); }           [/COLOR]

          Bu kodu stil dosyamıza ekledikten sonra şu şekilde bir görüntü ortaya çıkıyor.



          Peki hiç bir madde işareti görmek istemiyorsak?
          Bu durumda [FONT=Lucida Console][COLOR=#0b8a74]list-style-image:none;[/COLOR][/FONT] olarak belirlemeliyiz. None ifadesi kullanıldığında herhangi bir işaret görünmez. Bu kullanım da oldukça yaygındır.
          Resimin dışında alternatif olarak yuvarlak, içi boş yuvarlak veya kare biçimde de listeleme işlemi yapılabilir. Bu işlem [FONT=Lucida Console][COLOR=#0b8a74]list-style-type[/COLOR][/FONT] ile yapılabilmekte.
          ul {list-style-type:disc;} dediğimizde içi dolu bir yuvarlak ile listeler, ki bu varsayılan değerdir.
          ul {list-style-type:circle;} dediğimizde içi boş yuvarlak ile listeler.
          ul {list-style-type:square;} dediğimizde ise isminden de anlaşılacağı gibi kare olarak listeleme yapacaktır.