revision:
- is a shorthand for the following properties: "list-style-type", "list-style-position", "list-style-image". If one of the values are missing, the default value for that property will be used.
Property values:
list-style-type : dpecifies the type of list-item marker. Default value is "disc"
list-style-position : specifies where to place the list-item marker. Default value is "outside">
list-style-image : specifies the type of list-item marker. Default value is "none">
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
<div>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</div>
<style>
ul {list-style: square inside url("sqpurple.gif");}
</style>
- replaces the list-item marker with an image. Always specify the "list-style-type" property in addition. This property is used if the image for some reason is unavailable.
Property values:
none : no image will be displayed. Instead, the "list-style-type" property will define what type of list marker will be rendered. This is default
url : the path to the image to be used as a list-item marker"
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
<div>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</div>
<style>
ul {list-style-image: url("sqpurple.gif");list-style-type:disc;}
</style>
- specifies the position of the list-item markers (bullet points).
{list-style-position: outside;} means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically.
{list-style-position: inside;} means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start.
Property values:
inside : the bullet points will be inside the list item
outside : the bullet points will be outside the list item. This is default.
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
<div>
<h4>list-style-position: outside (default):</h4>
<ul class="aa">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries
from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves
of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refers
to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>
</ul>
<h4>list-style-position: inside:</h4>
<ul class="bb">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds of berries
from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water over cured leaves
of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The drink's name refer
to two of its original ingredients, which were kola nuts (a source of caffeine) and coca leaves</li>
</ul>
</div>
<style>
ul.aa {list-style-position: outside; list-style-image: none;}
ul.bb {list-style-position: inside; list-style-image: none;}
</style>
- specifies the type of list-item marker in a list.
Property values:
disc : default value. The marker is a filled circle
armenian : the marker is traditional Armenian numbering
circle : the marker is a circle
cjk-ideographic : the marker is plain ideographic numbers
decimal : the marker is a number
decimal-leading-zero : the marker is a number with leading zeros (01, 02, 03, etc.)
georgian : the marker is traditional Georgian numbering
hebrew : the marker is traditional Hebrew numbering
hiragana : the marker is traditional Hiragana numbering
hiragana-iroha : the marker is traditional Hiragana iroha numbering
katakana : the marker is traditional Katakana numbering
katakana-iroha : the marker is traditional Katakana iroha numbering
lower-alpha : the marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek : the marker is lower-greek
lower-latin : the marker is lower-latin (a, b, c, d, e, etc.)
lower-roman : the marker is lower-roman (i, ii, iii, iv, v, etc.)
none : no marker is shown
square : the marker is a square
upper-alpha : the marker is upper-alpha (A, B, C, D, E, etc.)
upper-greek : the marker is upper-greek
upper-latin : the marker is upper-latin (A, B, C, D, E, etc.)
upper-roman : the marker is upper-roman (I, II, III, IV, V, etc.)
initial : sets this property to its default value.
inherit : inherits this property from its parent element.
<div class="div_a">
<ul class="a">
<li>Circle type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Disc type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="c">
<li>Square type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ol class="d">
<li>Armenian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="e">
<li>Cjk-ideographic type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="f">
<li>Decimal type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="g">
<li>Decimal-leading-zero type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="h">
<li>Georgian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="i">
<li>Hebrew type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="j">
<li>Hiragana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="k">
<li>Hiragana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="l">
<li>Katakana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="m">
<li>Katakana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="n">
<li>Lower-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="o">
<li>Lower-greek type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="p">
<li>Lower-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="q">
<li>Lower-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="r">
<li>Upper-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="s">
<li>Upper-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="t">
<li>Upper-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="u">
<li>None type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="v">
<li>inherit type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</div>
<style>
ul.a {list-style-type: circle; list-style-image: none;}
ul.b {list-style-type: disc; list-style-image: none;}
ul.c {list-style-type: square;list-style-image: none;}
ol.d {list-style-type: armenian;}
ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.h {list-style-type: georgian;}
ol.i {list-style-type: hebrew;}
ol.j {list-style-type: hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l {list-style-type: katakana;}
ol.m {list-style-type: katakana-iroha;}
ol.n {list-style-type: lower-alpha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-latin;}
ol.t {list-style-type: upper-roman;}
ol.u {list-style-type: none;}
ol.v {list-style-type: inherit;}
</style>
code:
<div>
<ol id="color1">
<li>Coffee
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ul id="color2">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</div>
<style>
#color1 {background: #ff9999; padding: 2vw;}
#color2 {background: #3399ff; padding: 2vw;}
#color1 li {background: #ffe5e5; padding: 0.5vw; margin-left: 3.5vw;}
#color2 li {background: #cce5ff; margin: 0.5vw;}
</style>
default list:
remove bullets, margin and padding:
code:
<div>
<p>default list:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>remove bullets, margin and padding:</p>
<ul class="demo">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</div>
<style>
ul.demo {list-style-type: none; margin-left: 1vw; padding: 0;}
</style>
Codes:
<div class="div1">
<h3>The big five!</h3>
<ul>
<li>Lion</li>
<li>Leopard</li>
<li>Rhino</li>
<li>Elephant</li>
<li>Buffalo</li>
</ul>
<h3>The big five!</h3>
<ul class="styled">
<li>Lion</li>
<li>Leopard</li>
<li>Rhino</li>
<li>Elephant</li>
<li>Buffalo</li>
</ul>
<style>
.div1 {display: flex; flex-flow: row wrap; height: 20vh;margin: 0.2vw 1vw;}
.styled {list-style: none; padding: 0; margin: 0;}
.styled li {padding-left: 2vw; text-indent: -0.75vw}
.styled li::before {content: "🦁 ";}
.styled li:nth-child(2)::before {content: "🐆 ";}
.styled li:nth-child(3)::before {content: "🦏 ";}
.styled li:nth-child(4)::before {content: "🐘 ";}
.styled li:nth-child(5)::before {content: "🐃 ";}
</style>
</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus elit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?
Codes:
<div class="ex2">
<p>Lorem ipsum dolor sit ..?</p>
<p>Lorem ipsum dolor sit amet ..?</p>
<p>Lorem ipsum dolor sit amet ...?</p>
<p>Lorem ipsum dolor sit amet ...?</p>
<p>Lorem ipsum dolor sit amet ....?</p>
</div>
<style>
.ex2{width: 60vw; height: auto; margin: auto;}
.ex2 p {border-top: 0.2vw dashed; border-color: blue !important; margin:0; padding: 1vw; counter-increment: section; position: relative;}
.ex2 p:nth-child(even):before {content: counter(section); right: 100%; margin-right: -1vw; position: absolute; border-radius: 50%; padding: 1vw; height: 1.2vw;
width: 1.2vw; background-color: blue; text-align:center; color: white; font-size: 110%;}
.ex2 p:nth-child(odd):before {content: counter(section); left: 100%; margin-left: -1vw; position: absolute; border-radius: 50%;padding: 1vw; height: 1.2vw;
width: 1.2vw; background-color: blue; text-align:center; color: white; font-size: 110%;}
.ex2 p:nth-child(even) {border-left: 0.2vw dashed; border-top-left-radius: 2vw; border-bottom-left-radius: 2vw; margin-right: 2vw; padding-right: 0;}
.ex2 p:nth-child(odd) {border-right: 0.2vw dashed; border-top-right-radius: 2vw; border-bottom-right-radius: 2vw; margin-left: 2vw; padding-left: 0;}
.ex2 p:first-child {border-top: 0; border-top-right-radius:0; border-top-left-radius:0;}
.ex2 p:last-child {border-bottom-right-radius:0; border-bottom-left-radius:0;}
</style>
Codes:
<div class="ex3">
<ol>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
<li>Item #5</li>
</ol>
<ol>
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
<li>Item #5</li>
</ol>
</div>
<style>
.ex3{display: flex; flex-flow: row wrap; width: 30vw; height: auto; margin: 0.2vw 1vw;}
ol { counter-reset: custom; list-style-type: none; padding: 0; margin: 0vw 1.5vw;}
.ex3 li {counter-increment: custom; padding: 1.2vw 0; display: flex; align-items: center;}
.ex3 li:before {content: counters(custom, ".") " "; width: 2vw; height: 2vw;
margin-right: 0.75vw; background: purple; color: #fff; border-radius: 50%;
display: flex; align-items: center; justify-content: center;}
</style>
Codes:
<ul>
<li><a href="#"><h3>Title #1</h3><p>Text Content #1</p></a></li>
<li><a href="#"><h3>Title #2</h3><p>Text Content #2</p></a></li>
<li><a href="#"><h3>Title #3</h3><p>Text Content #3</p></a></li>
<li><a href="#"><h3>Title #4</h3><p>Text Content #4</p></a></li>
<li><a href="#"><h3>Title #5</h3><p>Text Content #5</p></a></li>
<li><a href="#"><h3>Title #6</h3><p>Text Content #6</p></a></li>
<li><a href="#"><h3>Title #2</h3><p>Text Content #2</p></a></li>
<li><a href="#"><h3>Title #7</h3><p>Text Content #7</p></a></li>
<li><a href="#"><h3>Title #8</h3><p>Text Content #8</p></a></li>
</ul>
<style>
.ex4 ul, .ex4 li{list-style:none;}
.ex4 ul{overflow:hidden; padding:1.4vw;}
.ex4 ul li a{text-decoration:none; color:#000; background:#ffc; display:block; height:12vw; width:12vw; padding:0.5vw; -moz-box-shadow: 0.5vw 0.5vw 0.7vw rgba(33,33,33,1);
-webkit-box-shadow: 0.5vw 0.5vw 0.7vw rgba(33,33,33,.7); box-shadow: 0.5vw 0.5vw 0.7vw rgba(33,33,33,.7); -moz-transition:-moz-transform .15s linear;
-o-transition:-o-transform .15s linear;-webkit-transition:-webkit-transform .15s linear;
transition: transform .15s linear;}
.ex4 ul li{margin: 1vw; float:left;}
.ex4 ul li h3{ font-size:180%; font-weight:bold; padding-top:0.5vw;}
.ex4 ul li p{ font-family:"Reenie Beanie",arial,sans-serif; font-size:100%;}
.ex4 ul li a{-webkit-transform: rotate(-6deg); -o-transform: rotate(-6deg); -moz-transform:rotate(-6deg); transform:rotate(-6deg);}
.ex4 ul li:nth-child(even) a{-o-transform:rotate(4deg); -webkit-transform:rotate(4deg); -moz-transform:rotate(4deg); transform:rotate(4deg); position:relative;
top:0.5vw; background:#cfc;}
.ex4 ul li:nth-child(3n) a{-o-transform:rotate(-3deg); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); transform:rotate(-3deg); position:relative;
top:-0.5vw; background:#ccf;}
.ex4 ul li:nth-child(5n) a{-o-transform:rotate(5deg);-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg); transform:rotate(5deg); position:relative;top:-1vw;}
.ex4 ul li a:hover,ul li a:focus{box-shadow:1vw 1vw 0.7vw rgba(0,0,0,.7); -moz-box-shadow:1vw 1vw 0.7vw rgba(0,0,0,.7); -webkit-box-shadow: 1vw 1vw 0.7vw rgba(0,0,0,.7);
-webkit-transform: scale(1.25); -moz-transform: scale(1.25); -o-transform: scale(1.25); transform: scale(1.25); position:relative; z-index:5;}
.ex4 ol{text-align:center;}
.ex4 ol li{display:inline;padding-right:1em;}
.ex4 ol li a{color:#fff;}
</style>