Added more details for styling lists (#20047)

* Added more details for styling lists

More details have been provided on how to style the unordered and ordered list like changing the default list item markers and also replacing them with images.

* Grammar updates

guide/english/html/lists/index.md

@@ -44,6 +44,23 @@ and is displayed as:
 - Fuji
 - Gala
 
+## Styling Lists
+
+Ordered and unordered lists can have different list item markers. The default numbering system in ordered list can be changed to lowercase or uppercase roman numerals, as well as lowercase or uppercase alphabetical.  The start of the list can be changed from the default value of 1. In an unordered list, different list markers can be used like the disc, circle, square etc. 
+
+Styling Ordered List:
+```CSS
+ol {
+  list-style-type: upper-roman; 
+  }
+```
+Styling Unordered List:
+```CSS
+ul {
+  list-style-type: square; 
+  }
+```
+
 ## Styling Bulletpoints
 
 An ordered list can be used for a variety of functions and in a number of styles. Since changing the encompassing tag colors doesn't change the color of the bullets themselves, you can style them by first removing the traditional black bullets and inserting your own:
@@ -65,8 +82,14 @@ ul li::before {
   }
 ```
 
-The content style adds a new bulletpoint while display and width style create a space between the bullet and the word. Regular font styles can apply here if you would like to make the bullet larger or bolder.
+The content style adds a new bulletpoint while display and width style create a space between the bullet and the word. Regular font styles can apply here if you would like to make the bullet larger or bolder.  Images can also be used as list item markers.
 
+Images as list item markers:
+```CSS
+ul {
+    list-style-image: url('rock.png');
+  }
+```
 
 
 ## Description lists