The list-style-position property defines where to position the list marker, and it accepts one of two values: "inside" or "outside".
The list-style-type property defines the type of list by setting the content of each marker, or bullet, on the list. Acceptable keyword values for list-style-type
include:
The list-style-type
property applies to all lists, and to any element that is set to display: list-item
.
The color of the list marker will be whatever the computed color of the element is (set via the color
property).
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-greek
lower-latin
upper-latin
armenian
georgian
lower-alpha
upper-alpha
none
HTML Lists and CSS List Properties
In HTML, there are two main types of lists:
The CSS list properties allow you to:
The list-style-type property specifies the type of list item marker.
The position of the list item markers in a list can be set to be inside or outside of the list's principal block box via the 'list-style-position' property. This property can have values of: outside, inside, and inherit.
The effects of the 'outside' and 'inside' values for 'list-style-position' can be seen in the style-test.html file.The list-style-position property specifies the position of the list-item markers (bullet points)."list-style-position: outside;" means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically.
One of the many great possibilities in CSS is the use of shorthand properties, which let you specify several properties by using only one. If you have started to learn about CSS and implement it on your Web pages, you’ll immediately see the benefit of using these shorthand properties. CSS shorthand makes it even easier for you to apply style to your markup, and makes your CSS code more concise.
In order for you to gain any value from this article you’ll need to know the common CSS properties and their values (see Kevin Yank’s "CSS Is Easy!"). They will be used here, but not extensively explained.
Browser support as indicated here for each shorthand property often only gives a general idea of actual compatibility. For more detailed information about the nature in which a particular property is buggy or partially supported under certain browsers, check the links at the end of this article.