More List Styles


Page sections

1-8 A 1 1-8 A 2 1-8 A 3 1-8 A 4 1-8 A 5 1-8 A 6 Rereading the yellow sections 1-8 A 7 StarfruitJuice07.html 1-8 B 1 Cats 1-8 B 2 Dogs 1-8 B 3 Birds 1-8 Explanation 1: The styles of the unordered list: disc, circle and square 1-8 Explanation 2: The styles of the ordered list: decimal, upper-alpha, lower-alpha, upper-roman and lower-roman 1-8 Explanation 3: Number of items in a list 1-8 Orientation 1: Styling list items 1-8 Orientation 2: Copies of previous files

Workbook pages

1. Settings. Line breaks and paragraphs.

2. Commenting code and checking your StarfruitJuice files

3. Style Terms

4. Headings

5. Fonts and Colors.

6. Simplified HTML structure. Colors.

7. Ordered and unordered lists

8. More List Styles

9. Font Families and Font Sizes

10. Bold, Italic and Underline

11. Tables. Online HTML Editor.

12. Including images in Tables

13. Visual Studio Code. Table Colors.

14. Table Headings and Heights of Table Rows

15. Table Sizes, Borders and Alignments

16. Rice Files

17. Hyperlinks

18. Further studies

1-8 Orientation 1: Styling list items

The following sections provide further details on how to style the items in ordered and unordered lists.

1-8 Explanation 1: The styles of the unordered list: disc, circle and square

In an unordered list, the list-style-type property specifies the way items are marked: <ul style="list-style-type:value;" ></ul>.
The property can be set to these values:

Value
HTML
disc
  • This is a little text
  • This is another little text
  • This is the last little text

circle

  • This is a little text
  • This is another little text
  • This is the last little text

square

  • This is a little text
  • This is another little text
  • This is the last little text

<ul>
         <li>This is a little text</li>
         <li>This is another little text</li>
         <li>This is the last little text</li>
</ul>

<ul style="list-style-type:circle;">
         <li>This is a little text</li>
         <li>This is another little text</li>
         <li>This is the last little text</li>
</ul>

<ul style="list-style-type:square;">
         <li>This is a little text</li>
         <li>This is another little text</li>
         <li>This is the last
</ul>

If this style is not set, like in the first example, then the value of the ordered list-style-type will default to disc.

1-8 A 1

Create an HTML file that shows this content:
  • Beetroot
  • Ginger
  • Potato
  • Radish

1-8 A 2

Create an HTML file that shows this content:
  • Orange
  • Lemon

1-8 Explanation 2: The styles of the ordered list: decimal, upper-alpha, lower-alpha, upper-roman and lower-roman

In an ordered list the list-style-type property specifies the way items are marked: <ol style="list-style-type:value;" ></ol>.
The property can be set to these values:

Value
HTML
decimal
  1. This is a little text
  2. This is another little text
  3. This is the last little text

upper-alpha

  1. This is a little text
  2. This is another little text
  3. This is the last little text

lower-alpha

  1. This is a little text
  2. This is another little text
  3. This is the last little text

upper-roman

  1. This is a little text
  2. This is another little text
  3. This is the last little text

lower-roman

  1. This is a little text
  2. This is another little text
  3. This is the last little text


<ol>
         <li>This is a little text</li>
         <li>This is another little text</li>
         <li>This is the last little text</li>
</ol>

<ol style="list-style-type:upper-alpha;">
         <li>This is a little text</li>
         <li>This is another little text</li>
         <li>This is the last little text</li>
</ol>

<ol style="list-style-type:lower-alpha;">
         <li>This is a little text</li>
         <li>This is another little text</li>
         <li>This is the last little text
</ol>

<ol style="list-style-type:upper-roman;">
         <li>This is a little text</li>
         <li>This is another little text</li>
         <li>This is the last little text</li>
</ol>

<ol style="list-style-type:lower-roman;">
         <li>This is a little text</li>
         <li>This is another little text</li>
         <li>This is the last little text</li>
</ol>

If this style is not set, like in the first example, then the value of the ordered list-style-type will default to decimal.

1-8 A 3

Create an HTML file that shows this content:
  1. Beetroot
  2. Ginger
  3. Potato
  4. Radish

1-8 A 4

Create an HTML file that shows this content:
  1. Orange
  2. Lemon

1-8 A 5

What is the difference between an ordered and an unordered list?

1-8 Orientation 2: Copies of previous files

In the Exercises01 folder, create a copy of the corresponding HTML file from the previous exercise for each of the following three exercises. Rename each copied HTML file using the exercise number. In your code, include comments that describe the lists you add.

1-8 B 1 Cats

Add texts for lists to include a disc list and a decimal list to the cats file you have created for an exercise on page 6.

1-8 Explanation 3: Number of items in a list

Logically, a list with a single item is still a list. But you should only create a list when you include more than one item. A single item can simply be stated in a sentence.

1-8 B 2 Dogs

Add texts for lists to include a circle list and an upper-alpha and an upper-roman list to the dogs file you have created for an exercise on page 6.

1-8 B 3 Birds

Add texts for lists to include a square list and a lower-alpha and a lower-roman list to the birds file you have created for an exercise on page 6.

1-8 A 6 Rereading the yellow sections

Now that you have gone through the exercises on this page, reread the yellow sections.

1-8 A 7 StarfruitJuice07.html

  • within the StarfruitJuiceFiles folder, create a copy of the StarfruitJuice06.html file
  • rename the copy of the StarfruitJuice06.html file to StarfruitJuice07.html

At this point you have 2 identical files, named StarfruitJuice06.html and StarfruitJuice07.html.

  • modify StarfruitJuice07.html to make it look like this.
  • save StarfruitJuice07.html

This page was created by Hanspeter Amend
Previous page   Table of contents

Solution proposals

 

1-8 A 1

<html>

<body>

<ul style="list-style-type:square;">
       <li>Beetroot</li>
       <li>Ginger</li>
       <li>Potato</li>
       <li>Radish</li>
</ul>

</body>

</html>



 

1-8 A 2

<html>

<body>

<ul style="list-style-type:circle;">
         <li>Orange</li>
         <li>Lemon</li>
</ul>

</body>

</html>


 

1-8 A 3

<html>

<body>

<ol style="list-style-type:upper-alpha;">
        <li>Beetroot</li>
        <li>Ginger</li>
        <li>Potato</li>
        <li>Radish</li>
</ol>

</body>

</html>



 

1-8 A 4

<html>

<body>

<ol style="list-style-type:decimal;">
       <li>Orange</li>
       <li>Lemon</li>
</ol>

</body>

</html>



 

1-8 A 5

Ordered lists number the list items with numbers or letters. Unordered lists simply place a bullet or similar character in front of the list item.

 

1-8 A 7

<html>

<!- - Set style attribute for the color style of the page background. - ->
<body style= "background-color:lightblue;">

<!- - Title: Set style attribute for text style. - ->
<h1 style= "text-align:center;color:blue;">About the Star Fruit</h1>

<!- - Line break - ->
The starfruit, also called carambola, is a sweet and sour fruit that is in the shape of a five-point star.<br>
The skin is edible and the flesh has a mild, sour flavor that makes it popular in a number of dishes.

<!- - Paragraph - ->
<p>The starfruit is yellow or green in color. It comes in two main types: a smaller, sour variety and a larger, sweeter one.</p>

<!- - Set heading - ->
<h1>Starfruit Juice Recipe</h1>

<!- - Set style attribute for font styles. - ->
<p style= "text-align:left;">Starfruit Healing Properties</p>

<!- - Set style attribute for list style and font styles. - ->
<ul style="list-style-type:circle;">
         <li>low calories</li>
         <li>supports metabolism</li>
</ul>
</body>

</html>

This page was created by Hanspeter Amend Previous page   Table of contents