Web Development

Icing a List with CSS

Icing a List with CSS is the section 8 of Beginner’s Guide to CSS.

In our HTML tutorial List section we said unordered list comes default with a certain bullet type and to change that you need to learn about CSS. So now the time has come to override the default.

CSS List property allows you to do the following.

  • Set a different list item marker for ordered lists
  • Set a different list item marker for unordered lists
  • Set an image as the list item marker

Hope you still remembers what the ordered and unordered list means. I’ll give you a clue. Lists that have alpha numeric markers and list that have bullet points. Got it???

CSS List Property

To change the List marker we use the list-style-type CSS property in both list types.

Let’s deal with ordered list first.

If you can remember we changed the numbering system of the ordered list using the HTML attribute called type. The same thing can be done using the CSS.

Lowercase Alphabet Characters

  1. Border
  2. Mission Kashmir
  3. Lakshya
[code language=”css”]ol {
list-style-type: lower-alpha;
}
[/code]
Uppercase Roman Numbers

  1. Don
  2. Dhoom
  3. Dus
[code language=”css”] ol {
list-style-type: upper-roman;
}

[/code]

Addition to this you can have Japanese kind of letters, Herew kind of letters or Georgian kind of letter too.

In the unordered list you can have the following types of bullet points.

Circle bullets

  1. Indiana Jones
  2. National Treasure
  3. Pirates of the Caribbean
[code language=”css”]ol {
list-style-type: circle;
}
[/code]
Square bullets

  1. Harry Potter
  2. Lord of the Rings
  3. Twilight
[code language=”css”] ol {
list-style-type: square;
}

[/code]

To try out your self, change this property value to ‘disk‘.

Now let’s do the most catchy trick in the lists using CSS. This is why CSS list property is so much different to the HTML type attribute on the list. That’s why CSS list property is unique and become a must use property. Adding an image on the list as a marker. The property list-style-image use for this purpose.

Image bullets with outside position

  1. Madrasapattinam
  2. Vinnaithandi Varuvaya
  3. Alaipayuthey

Image bullets with inside position

  1. Kites Runner
  2. The Letter
  3. Daisy
[code language=”css”]ol {
list-style-image: url(‘vd.gif’);
}
[/code]
[code language=”css”]ol {
list-style-position: outside;
}
[/code]
[code language=”css”]ol { list-style-position: inside;
}
[/code]

 

Also you can define the position of the bullet in the list content by list-style-position property. Values for it are inside or the outside. See the difference of them in the above demonstration.

 


We expanded the HTML list section in our HTML tutorial to a little bit more in this section by overriding the default bullet point. Coolest thing we did was adding an image as the marker. In the next section we’re going to create the coolest table to represent your data set.

WHAT’S NEXT?

Let’s create the Coolest CSS Table Ever.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW