saftutorials.com
CSS List Tutorial

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...

Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic