Editing List Styles

Outputs Supported

You can modify the look of lists by making adjustments to the tags and style classes used for them. By editing list styles, you can affect things such as the alignment, background, bullet images, and indentation of lists.

List Style Tasks

The following can be modified by using list styles:

Types of List Styles

When you modify the look of lists that you create, you can modify any of the following kinds of styles in your stylesheet. Each of these styles is used to control a different aspect of a list. You can also create classes of these styles if you want to have multiple lists with different looks. For example, you could create one class of the ul style and call it "Indent1Inch," and then create another class of that style and call it "Indent2Inches."

• li Modifies individual list items.

• ol Modifies an entire numbered ("ordered") list, such as a set of steps in a procedure.

  Example Here is a sample ordered list.

  1. First do this.
  2. Then do that.
  3. Then do the other thing.

  Here is how the tag structure for that ordered list would look behind the scenes.

  Copy

  <ol>
      <li>First do this.</li>
      <li>Then do that.</li>
      <li>Then do the other thing.</li>
  </ol>

  Therefore, if you applied a 1-pixel border to the li style, each list item would have a border around it. But if you applied the border to the ol style, the entire list would have a border around it.

• ul Modifies an entire bulleted ("unordered") list.

  Example Here is a sample unordered list.

  • This is the first chore I have to do today.
  • This is the second chore I have to do today.
  • This is the third chore I have to do today.

  Here is how the tag structure for that ordered list would look behind the scenes.

  Copy

  <ul>
      <li>This is the first chore I have to do today.</li>
      <li>This is the second chore I have to do today.</li>
      <li>This is the third chore I have to do today.</li>
  </ul>
  

  Therefore, if you applied a 1-pixel border to the li style, each list item would have a border around it. But if you applied the border to the ul style, the entire list would have a border around it.

• dl Modifies a definition list.

• dt Modifies terms in a definition list.

• dd Modifies definitions in a definition list.

  Example Here is a sample definition list.

  Basketball

  A game played with a hoop.

  Football

  A game with large men crashing into each other.

  Olympic Curling

  Nobody is exactly sure what this is.

  Here is how the tag structure for that definition list might look behind the scenes.

  Copy

  <dl>
      <dt>Basketball</dt>
      <dd>A game played with a hoop.</dd>
      <dt>Football</dt>
      <dd>A game with large men crashing into each other.</dd>
      <dt>Olympic Curling</dt>
      <dd>Nobody is exactly sure what this is.</dd>
  </dl>

  In this example, the font weight of the dt style is bold, and the dd style is indented by 20 pixels.

Custom List Format Styles

For PDF output, you can create and edit lists with custom formats up to 10 levels deep. Custom formats allow you to quickly create lists (especially multi-level lists) that already have a certain look applied as you indent in the list to create new levels. For each level in a custom list format, you can specify whether to use an ordered (numbered) or unordered (bulleted) style, select a custom bullet image, insert characters or symbols, and choose formatting (e.g., bold, color, size). The formats that you create are written to your stylesheet. See Creating Custom List Formats and Editing Custom List Formats.

Because custom list formats are written to your stylesheet as complex selectors, you can edit these formats in the Advanced view of the Stylesheet Editor.

When you view list styles in the Stylesheet Editor, you will see custom formats displayed as classes under the respective ol and ul parent styles, depending on whether the first level of that format is an ordered or unordered list. However, these classes are really limited to the list style type for each.

The real editing can take place in a special section called "(Custom Lists)," where all ordered and unordered custom list formats are grouped together.

As you expand each custom list format, you will see nodes for each level that you have formatted. You can change the list style type (e.g., decimal, lower-alpha) or select a custom bullet image on these nodes.

And under each level is a pseudo-element called "(marker)." A marker is the combination of the content and formatting for that level. It is usually a number, letter of the alphabet, symbol, or character, sometimes with punctuation, such as a period. This node is where the bulk of the editing takes place on a custom list format.

What’s Noteworthy?

http://dev.w3.org/csswg/css-lists/#marker-pseudo-element