CSS List style control HTML LIST tag like <ol> order list and <ul> unorder list. You can full control <ol> and <ul> tag using CSS List style. 

Example of HTML List

<ol> HTML tag

1. This is demo text

2. This is demo text

3. This is demo text

<ul> HTML tag

• This is demo text
• This is demo text
• This is demo text

Controlling List Style type using CSS: there are have many type List style type in <ol> and <ul> HTML tag. You can declare it using HTML, or you can control it using CSS.

<ul> HTML tag list style

1) Disc. This is default list style type.

How to use in HTML?

Ans: <ul type="disc"><li>Demo text here.</li></ul>

How to use in CSS?

ul {
    list-style-type: disc;
}

2) Circle.

How to use in HTML? 

Ans: <ul type="circle"><li>Demo text here.</li></ul>

How to use in CSS?

ul {
    list-style-type: circle;
}

3) Square.

How to use in HTML? 

Ans: <ul type="circle"><li>Demo text here.</li></ul>

How to use in CSS?

ul {
    list-style-type: square;
}

4) Image.

How to use in HTML? 

Ans: <ul style="list-style-image: url("photoname.jpg");"><li>Demo text here.</li></ul>

How to use in CSS?

ul {
    list-style-image: url("photoname.jpg");
}

5) None.

How to use in HTML? 

Ans: <ul style="list-style-type: none;"><li>Demo text here.</li></ul>

How to use in CSS?

ul {
    list-style-type: none;
}

<ol> HTML tag list style

1) Lower Alpha.

How to use in HTML? 

Ans: <ol type="a"><li>Demo text here.</li></ol>

How to use in CSS?

ol {
    list-style-type: lower-alpha;
}

2) Upper Alpha.

How to use in HTML? 

Ans: <ol type="a"><li>Demo text here.</li></ol>

How to use in CSS?

ol{
    list-style-type: upper-alpha;
}

3) Lower Roman.

How to use in HTML? 

Ans: <ol type="a"><li>Demo text here.</li></ol>

How to use in CSS?

ol{
    list-style-type: lower-roman;
}

4) Upper Roman.

How to use in HTML? 

Ans: <ol type="a"><li>Demo text here.</li></ol>

How to use in CSS?

ol{
    list-style-type: upper-roman;
}

Color with List using CSS

ol {
    background: red;
    padding: 10px;
}
ul {
    background: red;
    padding: 10px;
}
ol li {
    background: green;
    padding: 10px;
    margin-left: 35px;
}
ul li {
    background: green;
    margin: 5px;
}

Output

<ol> HTML tag

1. This is demo text

2. This is demo text

3. This is demo text

<ul> HTML tag

• This is demo text
• This is demo text
• This is demo text

Video Tutorial coming soon...