CSS tip: Give lists a touch of style

Give ordered and unordered lists more style and purpose with a few simple techniques

CREATING UNORDERED AND ordered lists is a relatively simple process. Unordered lists use opening and closing tags, <ul></ul>, while ordered lists use <ol></ol>. Both are then populated with the list tags, <li></li>. Unordered lists attach bullet points to each list item – these are known as discs. To change to a different bullet point, ie circle, the opening tag can be modified as follows: <ul type=”circle”>. Alternatively, circle can be replaced by square or decimal, which is a number. This can be done from directly within the code or by creating a CSS class in Dreamweaver. After creating the class, double-click in the CSS Panel to open the CSS Rule Definition window. Select List under Category, and choose a list type from the Type drop-down list.
Ordered lists operate in much the same manner, but being ordered they are associated with progressive numbers and letters, ie 1, 2, 3, a, b, c, etc. To modify the default list type 1, 2, 3 in Dreamweaver, follow as before but select a different type form the list, ie lower-roman, upper- roman, lower-alpha and upperalpha. Roman adds Roman numerals, ie I, II, III, while alpha adds A, B, C. Upper equals upper case and lower is lower case. To change the start point in an ordered list, add the following in the top of the list: <ol start=”4”>. This will start the list item at D instead of A.