Irishguy Design Studio

CSS – 05 HTML Lists

I do love to create and format a good list. No Two Lists are ever the same.

Basic Unnumbered and Numbered Lists (bullets)

BASIC UNNUMBERED LIST – The Basic Unnumbered List is an HTML element used to create a list of items without numbering them. It is often used for menus, navigation, and lists that don’t require numbering. This element can be styled using CSS, allowing you to customize the appearance of the list. It is also a useful tool for organizing information in a way that makes it easier to read and understand. The Basic Unnumbered List can be found in many places, such as websites, apps, and even printed materials. You would expect to see a Basic Unnumbered List in places where there are multiple items that need to be organized in an easy-to-read format. The Solid Circle Bullet, Outline Circle Bullet, and Square Bullet are the most basic of the HTML/CSS bullets.

  • Solid Circle Bullet
  • Solid Circle Bullet
  • Solid Circle Bullet
  • Outline Circle Bullet
  • Outline Circle Bullet
  • Outline Circle Bullet
  • Square Bullet
  • Square Bullet
  • Square Bullet
  1. Lorem, ipsum dolor.
  2. Iusto, adipisci eum.
  3. Fuga, sit labore!
  1. Lorem, ipsum dolor.
  2. Iusto, adipisci eum.
    1. Lorem, ipsum dolor.
    2. Iusto, adipisci eum.
      1. Lorem, ipsum dolor.
      2. Iusto, adipisci eum.
      3. Fuga, sit labore!
    3. Fuga, sit labore!
  3. Fuga, sit labore!

List of Nested Decimals

  1. List Item
  2. List Item
  3. List Item
    1. List Item
    2. List Item
      1. List Item
      2. List Item
      3. List Item
    3. List Item
  4. List Item
  5. List Item
    1. List Item
    2. List Item
    3. List Item
  6. List Item
  7. List Item

List with Number Break

  1. Wake up
  2. Feed dog
  3. Start blog post

… Page Break with List …

  1. Finish blog post
  2. Go to bed

Image Bullets

  • List Item
  • List Item
  • List Item
    • List Item
    • List Item
    • List Item
      • List Item
      • List Item
      • List Item
    • List Item
  • List Item
  • List Item
  • List Item

Reverse Court Down Bullets

  1. Northern Exposure
  2. The Sopranos
  3. Halt & Catch Fire
  4. Battlestar Galactica
  5. The Shield
  6. Game of Thrones
  7. Downton Abbey
  8. Six Feet Under
  9. LOST
  10. Friday Night Lights

Random Order Bullets

Need to change the order?

  1. Northern Exposure
  2. The Sopranos
  3. Halt & Catch Fire
  4. Battlestar Galactica
  5. The Shield
  6. Game of Thrones
  7. Downton Abbey
  8. Six Feet Under
  9. LOST
  10. Friday Night Lights

Custom Text List Bullet

  1. Preheat oven to 425°F
  2. Mix all the ingredients
  3. Dump it all into a greased pan
  4. Bake for 40 minutes
  5. Take out and let cool 30 mintes
  6. Eat
  • Eggs
  • Flour
  • Water

Inside and Outside Bullets

Change the position of the bullet while changing the values.

  1. Lorem, ipsum.
  2. Similique, culpa.
  3. Atque, vel?
  4. Repudiandae, expedita.
  5. Perferendis, modi.

  1. Lorem, ipsum.
  2. Similique, culpa.
  3. Atque, vel?
  4. Repudiandae, expedita.
  5. Perferendis, modi.

Columized List

  • Lorem.
  • Quibusdam!
  • Recusandae.
  • Facere?
  • Sit?
  • Recusandae!
  • Ea!
  • Amet!
  • Eos.
  • Similique.
  • Excepturi.
  • Nemo?
  • Aspernatur!
  • Ipsam.
  • Accusantium.
  • Dignissimos?
  • Nesciunt.
  • Voluptatum?
  • Vero!
  • Nesciunt!
  • Ea.
  • Cumque!
  • Excepturi.

Gary Crossey

,

Leave a Reply

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