gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Different Ordered Lists (#28137)

Browse Source 
Added in a section to show how to display a list ordered by roman numerals or letters rather than just numbers.
This commit is contained in:
averyl36
2018-12-12 15:52:05 -07:00
committed by Randell Dawson
parent 6533b99fcd
commit 8f6e7165a0
1 changed files with 17 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
guide/english/html/lists/index.md
View File

@ -46,19 +46,26 @@ and is displayed as:
## Styling Lists ## 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 ```CSS
ol { <ol type="I">
list-style-type: upper-roman; <li>Dogs</li>
} <li>Cats</li>
<li>Birds</li>
</ol>
``` ```
Styling Unordered List:
Letters:
```CSS ```CSS
ul { <ol type="A">
list-style-type: square; <li>Dogs</li>
} <li>Cats</li>
<li>Birds</li>
</ol>
``` ```
## Styling Bulletpoints ## 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: Remove bullets:
```CSS ```CSS
ul { ul {
list-style: none; list-style: none;
} }
``` ```
@ -140,37 +147,6 @@ is displayed as:
- Green tea - Green tea
- Milk - Milk
## Nested HTML Lists
List can be nested (lists inside lists):
##### Code:
```html
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
```
##### Output:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
#### More Information: #### More Information:
* [HTML lists on w3schools](https://www.w3schools.com/html/html_lists.asp) * [HTML lists on w3schools](https://www.w3schools.com/html/html_lists.asp)