List Style Practice


by Jeremy Caudle
code

I very rarely modify list styles, so I thought it would be good to do a quick refresher. Turns out there are a LOT more options these days. I'll need to do another one at a later time.

List styles quick ref

  • Default style (disc)
  • List Item
  • List Item
  • List Item
  • List Item
  • Square
  • List Item
  • List Item
  • List Item
  • List Item
  • Disc
  • List Item
  • List Item
  • List Item
  • List Item
  • Circle
  • List Item
  • List Item
  • List Item
  • List Item
  • Disclosure Open
  • List Item
  • List Item
  • List Item
  • List Item
  • Disclosure Closed
  • List Item
  • List Item
  • List Item
  • List Item

View the code:

HTML and JS 
<div class="codedoodle-block">
        <h3>List styles quick ref</h3>
        <ul>
            <li>Default style (disc)</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
        </ul>  
        <ul class="square">
            <li>Square</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
        </ul>
        <ul class="disc">
            <li>Disc</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
        </ul>
        <ul class="circle">
            <li>Circle</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
        </ul>
        <ul class="disclosure-o">
            <li>Disclosure Open</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
        </ul>
        <ul class="disclosure-c">
            <li>Disclosure Closed</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
            <li>List Item</li>
        </ul>
    </div>
CSS 
body {
tab-size: 1em;
-moz-tab-size: 1em;
}

div.codedoodle-block {
            background-color: transparent;
            margin: 3rem auto;
            padding: 1rem;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            border-radius: .5rem;
            display: flex;
            flex-direction: column;
            justify-items: center;
            align-items: flex-start;
            background-color: #dedede;
            width: 20em;
        }

        div.codedoodle-block ul {
						padding-left: 2em;
        }

        .disc {
            list-style-type: disc;
        }

        .square {
            list-style-type: square;
        }

        .circle {
            list-style-type: circle;
        }

        .disclosure-o {
            list-style-type: disclosure-open;
        }


        .disclosure-c {
            list-style-type: disclosure-closed;
        }

Tags