<ol>
<li>content for screen here</li>
<li>more content for screen</li>
<li>repeat as often as necessary</li>
</ol>
<ul>
<li>content for screen here</li>
<li>more content for screen</li>
<li>repeat as often as necessary</li>
</ul>
The first choice is to insert the style attribute into a list-item tag or an unordered-list tag or an ordered-list tag. Example:
The second choice is to insert the style rule into the style tag in the head of the document. Example:
<style type="text/css">
li {list-style-type:square;}
</style>
The third choice is to insert the style rule into an external CSS stylesheet. The rule declaration would be identical to the second line of the preceding example. A CSS stylesheet does not incorporate the HTML <style> tag.
The natural choices for an unordered list are:
This is applicable to both ordered and unordered lists. The declaration may be applied to a list-item tag or an unordered-list tag or an ordered-list tag. Example:
Using margin, padding, and positioning rules allows an author to position an entire list as he wishes. Following are four lists positioned with browser-default, margin, padding, and relative-positioning rules. A background color is added to point out some aspects of the differences between the four.
The rules written into different browsers differ. Importantly, the essential definition of the content box has been implemented in the past by Microsoft in a way that deviates from the W3C international standards which most browsers follow. As a result, positioning can give different (sometimes unacceptable) results from browser to browser. It is advised that you look at the web page on the main browsers on as many operating systems as you can.
code:
This is where and how the browser places a list without specific instructions. A twenty-five pixel wide reference is shown.
25
The left indent is usual. The amount of indent can vary from browser to browser. The browser assigns the list to a content box with a width as wide as defined by its parent division and as tall as necessary to display the content.
code:
The style rule margin-left:50px; was added to the <ul> tag.
50
25
This differs from the default by having fifty pixels more left margin. Notice that the content box is not as wide (now: the original width minus the additional margin) as the default list. The left margin has moved, but the right margin remains in the same place. Notice also that the left indent within the colored area is the same as the default.
code:
The style rule padding-left:50px; was added to the <ul> tag.
25
This differs from the default by having fifty pixels of left indent instead of the approximately twenty-five pixel (will vary from browser to browser) indent that is normal. The difference between using the margin or padding is that the margin is clear and the padding takes on the assigned background color. If a different background color is not specifically assigned to the list, then there is little functional difference between shifting with margin or padding. Notice also that the right margin remains in the same place as the default.
code:
The style rules position:relative; left:50px; was added to the <ul> tag.
50
25
The list is displayed identically to the default list, except that the entire space normally reserved for the list is shifted fifty pixels to the left. This shift disregards the established right margin.