ptg16476052
76 LESSON 5: Organizing Information with Lists
Let me digress briefly to talk about how you can use Chrome’s Developer Tools to
edit styles on the fly. If you want to see what the list in Figure 5.2 looks like with the
lower-roman list style, you can change the style attribute directly and see the results.
Just open the developer tools, make sure the elements tab is open, and then click on the
style attribute of the <ol> tag. You can then edit the attribute and see the page change
instantly. The updated developer tools window is shown in Figure 5.3.
You can also use the list-style-type property with the <li> tag, changing the num-
bering type in the middle of the list, but you need to change every list item following
it if you want them all to have the same new type. Using the start attribute, you can
specify the number or letter with which to start your list. The default starting point is 1,
of course. You can change this number by using start. <ol start="4">, for example,
would start the list at number 4, whereas <ol style="list-style-type: lower-alpha"
start="3"> would start the numbering with c and move through the alphabet from there.
The value for the start attribute should always be a decimal number, regardless of the
numbering style being used.
For example, you can list the last six months of the year and start numbering with the
Roman numeral VII as follows. The results appear in Figure 5.4.
FIGURE 5.3
The Chrome devel-
oper tools with the
updated <ol> tag.