CSS – 05 HTML Lists


Unordered Lists

BULLET – Solid Circle

  • Solid Circle
  • Solid Circle
  • Solid Circle

BULLET – Outline Circle

  • Outline Circle
  • Outline Circle
  • Outline Circle

BULLET – Solid Square

  • Square
  • Square
  • Square

UNORDERED LIST – The Basic Unordered 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. Lists 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 Unordered List can be found in many places, such as websites, apps, and even printed materials. You would expect to see a Unordered 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.

Ordered Lists

BULLET – Numbered

  1. Lorem, ipsum dolor.
  2. Iusto, adipisci eum.
  3. Fuga, sit labore!

BULLET – Numbered with Indent

  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.

CSS Counters

Automatically Number Elements with CSS Counters. While not completely clear from the example, the CSS Counters method to me is very powerful (give me five minutes in the future to dig deeper into CSS Counters and creating some some creative options using the method).

Properties

  • counter-reset – Reset or initialize your counter.
  • counter-increment – Increment the variable of an already initialized counter.
  • counter()– used inside the content property to add up the counts.
  • counters() – used for inherited counting, and generates the counter variable.
  • content – Add up the count value (string)

This is a fun example of using the CSS Counters with increases in increments of 10 with 🍅🥫🥣 emojis insert before the bullet item.

Title for first bullet point.

Title for second bullet point.

Title for third bullet point.


Leave a Reply

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