1. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 15: Lists

2. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Objectives Create ordered and unordered lists. Choose markers or display lists without markers. Decide where to start list numbering. Change numbering of a list item in an ordered list. Use custom markers. Control where markers hang. Set all list-style properties at once. Style nested lists and use for drop-down navigation. Create description lists.

3. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Lists Three list types: –Ordered list: ol for the parent, li for each list item –Unordered list: ul for the parent, li for each list item –Description list: dl for the parent, dt marks the term to describe, and dd marks the description of the term. This was known as a definition list before HTML5.

4. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Creating Ordered and Unordered Lists Ordered lists: Any list of items in which the order is meaningful: –Providing step-by-step instructions. –Creating outline of larger document. –Marking up breadcrumb navigation. Unordered lists: For when the order of list items isn’t tied to the list’s meaning. –Most common lists on web. –Unordered lists have solid round bullets by default.

5. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Ordered and Unordered Lists Ordered ListUnordered List

6. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Create Lists Type for an ordered list or for an unordered list. –Optional attributes for ordered lists: start, type, and reversed. Type to begin the first list item. –Optional value attribute for ordered list. Add content to be included in list item. Type to complete each list item. Repeat steps for each new list item. Type or to complete list.

7. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Choosing Your Markers When creating lists, choose markers (bullets, numbers, or images, none) to appear to left of each list item.

8. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Choose Your Markers To choose your markers: –In style sheet rule, type list-style-type: marker marker is one of following values: disc, circle, square decimal (1, 2, 3,...), upper-alpha (A, B, C,...), lower-alpha (a, b, c,...), upper-roman (I, II, III, IV,...), lower-roman (i, ii, iii, iv,...) To display lists without markers: –In the style sheet, type list-style-type: none

9. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Using Custom Markers Create a custom marker with an image. You don’t have to change the HTML, just the CSS.

10. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Use Custom Markers In the rule for the desired list or list item, type list- style: none; to turn off normal markers. In the rule for the desired list, set margin-left and/or padding-left properties to dictate indentation.

11. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Use Custom Markers In the rule for li elements within the desired list, type background: url(image.ext) repeat-type horizontal vertical; –image.ext is path and file name of image; –repeat-type is value of no-repeat, repeat-x, or repeat-y; –horizontal and vertical are values for position of background. Type padding-left: value; –value is at least width of background image to prevent list item content from overlapping custom marker.

12. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Choosing Where to Start List Numbering You can start an ordered list’s numbering somewhere other than 1.

13. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE List Numbering To specify the initial value of an entire list’s numbering scheme: –Within the ol start tag, type start="n” n represents the initial value for the list. To change the numbering of a given list item in an ordered list: –In the desired li item, type value="n” n represents the value for this list item.

14. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Controlling Where Markers Hang By default, lists are indented from the left side of their parent. To control where markers hang: –In the style sheet rule for the desired list or list item, type list- style-position:. –Type: Inside to display markers flush with list item text. Outside to display markers to the left of the list item text (default).

15. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Where Markers Begin Outside the contentInside the content

16. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Setting All List-Style Properties at Once List-style properties can all be set at once.

17. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Set All the List-Style Properties at Once Type list-style:. If desired, specify kind of markers to appear next to list items, if any. If desired, specify custom marker that should be used for list items. If desired, specify whether markers should be hung outside the list paragraphs or flush with text.

18. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Styling Nested Lists Nested list: Inner list inserted in an outer list. –Ordered and unordered lists (together or independently) can be nested. –Good for several levels of items in an outline structured as ordered lists, or navigation with sub-menus structured as unordered lists.

19. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Style Nested Lists For styling outermost list, type toplevel li {style_rules} –toplevel is list type of outermost list. –style_rules are styles that should be applied. For second-level list, type toplevel 2ndlevel li {style_rules} –2ndlevel is list type of second-level list. For third-level list, type toplevel 2ndlevel 3rdlevel li {style_rules} –3rdlevel is the kind of list used for the third nested list. Continue for each nested list.

20. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Each Level of a Nested List Formatted Separately First-level lists (ol) have capital Roman numerals. Second-level lists (ol ol) have capital letters. Third-level lists (ol ol ol) have Arabic numerals.

21. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Using Nested Lists for Drop- Down Navigation Nested lists can structure drop-down (or fly-out) navigation menus. –Style navigation with CSS so that each sub-menu shows only when the visitor hovers over the parent list item and hides again when the visitor moves the pointer away. –Can be implemented a few ways, but always involves leveraging the :hover pseudo-class as part of the selector that reveals the sub-menu. Use a similar approach for vertical navigation with fly- out sub-menus that appear to the side.

22. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Creating Description Lists Description lists are a type of list in HTML5 specifically for describing an association between names (or terms) and values in groups. –Known as definition lists in previous versions of HTML. –May be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data. –Each list is contained in a dl, and each name-value group within it has one or more dt elements (the names or terms) followed by one or more dd elements (their values).

23. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Creating Description Lists Valid arrangements for a group of dt and dd elements within a dl: –A single dt grouped with a single dd. This is the most common occurrence. –A single dt grouped with multiple dd elements. –Multiple dt elements grouped with a single dd. –Multiple dt elements grouped with multiple dd elements.

24. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Create Description Lists Type. Type the word or short phrase that will be described or defined, including any additional semantic elements (such as dfn). Type to complete the name or term in the name-value group. Repeat steps 2 through 4 as necessary if the group has more than one name or term. Type.

25. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE To Create Description Lists Type the description of the name or term that was entered in step 3. Type to complete the description (the value) in the name-value group. Repeat steps 6 through 8 as necessary if the group has more than one value to define. Repeat steps 2 through 9 for each group of terms and descriptions. Type to complete the description list.

26. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Basic Description List By default, the name (dt) is aligned to the left, and the value (dd) is indented. The names are in bold.

27. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Description List with Multiple Defined Terms This example includes multiple dts paired with a single dd in each name-value group.

28. LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE Nested Description List When a dl is nested in another dl, it automatically indents another level by default. First-level dt elements are in uppercase letters, while the ones in the nested list are normal.