From 8f6e7165a03d2dd83298ca445775f23b136e1224 Mon Sep 17 00:00:00 2001 From: averyl36 <44373518+averyl36@users.noreply.github.com> Date: Wed, 12 Dec 2018 15:52:05 -0700 Subject: [PATCH] Different Ordered Lists (#28137) Added in a section to show how to display a list ordered by roman numerals or letters rather than just numbers. --- guide/english/html/lists/index.md | 58 +++++++++---------------------- 1 file changed, 17 insertions(+), 41 deletions(-) diff --git a/guide/english/html/lists/index.md b/guide/english/html/lists/index.md index 713b6a3e7b..0074d44c89 100644 --- a/guide/english/html/lists/index.md +++ b/guide/english/html/lists/index.md @@ -46,19 +46,26 @@ and is displayed as: ## 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. +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: +An ordered list can also be programmed to display roman numerals or letters instead of numbers. + +Roman numerals: ```CSS -ol { - list-style-type: upper-roman; - } +
    +
  1. Dogs
  2. +
  3. Cats
  4. +
  5. Birds
  6. +
``` -Styling Unordered List: + +Letters: ```CSS -ul { - list-style-type: square; - } +
    +
  1. Dogs
  2. +
  3. Cats
  4. +
  5. Birds
  6. +
``` ## Styling Bulletpoints @@ -68,7 +75,7 @@ An ordered list can be used for a variety of functions and in a number of styles Remove bullets: ```CSS ul { - list-style: none; + list-style: none; } ``` @@ -140,37 +147,6 @@ is displayed as: - Green tea - Milk -## Nested HTML Lists - -List can be nested (lists inside lists): - -##### Code: -```html - -``` - -##### Output: - - - #### More Information: * [HTML lists on w3schools](https://www.w3schools.com/html/html_lists.asp)