List CSS

There are two types of lists.

1. Ordered Lists
2. Unordered Lists

Ordered list

Ordered list is denoted by <ol> and ended with </ol>.

1. Database by T4Tutorials
2. C++ by T4Tutorials

Unordered Lists

Unordered list is denoted by <ul> and ended with </u>.

• DLD by T4Tutorials
• OOOP by T4Tutorials

An Image as The List Item Marker

ul {
    list-style-image: url('logo.jpg');
    border: 5px solid blue;
}

Try it

Different List Item Markers

ul.a {
    list-style-type: circle;
    border: 5px solid blue;
}

ul.b {
    list-style-type: square;
    border: 5px solid red;
}

ol.c {
    list-style-type: upper-roman;
   border: 5px solid green;
}

ol.d {
    list-style-type: lower-alpha;
    border: 5px solid pink;
}

h1, p
{
     color: purple;
}

Try it

List – Shorthand property

ul {
    list-style: square inside url("logo.jpg");
    font-size: 30px;
    color: purple;
}

Try it

Position The List Item Marker

ul.a {
    list-style-position: outside;
    border: 5px solid red;
}

ul.b {
    list-style-position: inside;
    border: 5px solid purple;
}

Try it

Remove Default Settings

ul.r {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

Try it

Styling List With Colors

ol {
    background: purple;
    padding: 30px;
}

ul {
    background: grey;
    padding: 35px;
}

ol li {
    background: lightgrey;
    padding: 5px;
    margin-left: 35px;
}

ul li {
    background: lightpink;
    margin: 10px;
}

Try it

Video Lecture