Tutorials Tonight's Logo

CSS LISTS


List is an effective way to present similarly related data.

List can be ordered or unordered. Ordered list shows list contents using numbers while unordered list shows list content using bullets.

In CSS we have following list properties to style list:

  1. CSS list-style-type This allows the user to change the shape of bullets or markers.
  2. CSS list-style-position Control content to be inside or outside of the bullet.
  3. CSS list-style-image This property replaces marker/bullet with specified image.
  4. CSS list-style This property let us use multiple list property at once.



1.)CSS list style type

The list-style-type property allows us to change the bullet(marker) model.

In unordered list bullets can be made in square,circle and disc.

<ul style="list-style-type:circle">
    <li>Book</li>
    <li>Pen</li>
    <li>table</li>
</ul>
<ul style="list-style-type:square">
    <li>Book</li>
    <li>Pen</li>
    <li>table</li>
</ul>
<ul style="list-style-type:disc">
    <li>Book</li>
    <li>Pen</li>
    <li>table</li>
</ul>
▶ Run the code

The ordered list marker can be made in number,lower alphabet,upper alphabet,roman etc.

<ol style="list-style-type:decimal">
    <li>Book</li>
    <li>Pen</li>
    <li>table</li>
</ol>
<ol style="list-style-type:upper-alpha">
    <li>Book</li>
    <li>Pen</li>
    <li>table</li>
</ol>
<ol style="list-style-type:upper-roman">
    <li>Book</li>
    <li>Pen</li>
    <li>table</li>
</ol>
▶ Run the code

2.) CSS list style position

The list-style-position property specifies whether the content of the list will be inside or outside of the bullet.

<ul style="list-style-position:outside">
    <li>I am outside the bullet.I am outside the bullet.I am outside the bullet.</li>
    <li>I am outside the bullet.I am outside the bullet.I am outside the bullet.</li>
</ul>
<ul style="list-style-position:inside">
    <li>I am inside the bullet.I am inside the bullet.I am inside the bullet.</li>
    <li>I am inside the bullet.I am inside the bullet.I am inside the bullet.</li>
</ul>
▶ Run the code

3.) An image as bullet (list-style-image)

The list-style-image property can be used to replace general bullets with an image.

<ol style="list-style-image:url('marker-image.jpg')">
    <li>Book</li>
    <li>Pen</li>
    <li>table</li>
</ol>
▶ Run the code

4.) CSS list shorthand (list-style)

The list-style property lets us use all list properties at once like - list-style-type,list-style-position and list-style-image.

<ol style="list-style:disc outside url('assets/marker-image.jpg')">
    <li>Book</li>
    <li>Pen</li>
    <li>table</li>
</ol>
▶ Run the code

Note: In list-style property if somehow the image is unable to load then the bullet will replace the image.


Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.