CSS List

CSS Tutorial  >  List

Common ways of manipulating font properties in CSS include the following:

  • list-style-type
  • list-style-position
  • list-style-image
  • list-style

    Each is described in detail below:

    list-style-type

    The list-style-type property lets you specify a different type of marker than the default disc. The most commonly used list-style-types are:

  • none
  • disc
  • circle
  • square

    One may also wish to use ordered character sets. Common ones are:

  • upper-latin
  • lower-latin
  • upper-roman
  • lower-roman
  • upper-alpha
  • lower-alpha

    Some examples below:

    Example 1:
    <ul style='list-style-type:upper-roman;'>
      <li>item 1</li>
      <li>item 2</li>
    </ul>

    Result:

    • item 1
    • item 2

    Example 2:
    <ul style='list-style-type:square;'>
      <li>square item 1</li>
      <li>square item 2</li>
    </ul>

    Result:

    • square item 1
    • square item 2

    list-style-position

    The list-style-position property offers a way for the user to specify whether the marker should be treated as part of the regular text when it comes to formatting. The possible values are 'inside' and 'outside'. 'Outside' is the default value.

    Below are examples to illustrate the difference between the two (notice the indentation and how the lines align):

    Example 3:

    <ul style='list-style-position:inside;'>
      <li>First one<br>second line
      <li>Second one
    </ul>

    Result:

    • First one
      second line
    • Second one

    Example 4:

    <ul style='list-style-position:outside;'>
      <li>First one<br>second line
      <li>Second one
    </ul>

    Result:

    • First one
      second line
    • Second one

    list-style-image

    The list-style-image property is used to specify an image to use for the market. The syntax is

    list-style-image:url([image_url]);

    For example, if our CSS code is

    ul {
      list-style-image:url("circle.gif");
    }

    the following HTML code

    <ul>
      <li>First list for custom marker.
      <li>Second list for custom marker.
    </ul>

    renders

    • First list for custom marker.
    • Second list for custom marker.

    list-style

    All 3 properties above (list-style-type, list-style-position, and list-style-image) can be combined into a single list-style property. This is called a shortcut, and the order does not matter. For example:

    ul {
      list-style: url("circle.gif") none inside;
    }

    the following HTML code

    <ul>
      <li>First list for combined list marker.
      <li>Second list for combined list marker.
    </ul>

    renders

    • First list for combined list marker.
    • Second list for combined list marker.

    Next: CSS Table



    Copyright © 2013   1keydata.com   All Rights Reserved   Privacy Policy

  • CSS Tutorial
    CSS Syntax
    Apply CSS
    CSS Media Types
    CSS Cascade
    CSS Inheritance
    CSS Class ID
    CSS Div Span
    CSS Length Units

    CSS Box Model
    CSS Margin
    CSS Border
    CSS Padding
    CSS Background
      CSS Background-attachment
      CSS Background-color
      CSS Background-image
      CSS Background-position
      CSS Background-repeat
    CSS Color
    CSS Font
    CSS Link
    CSS List
    CSS Table
    CSS Position
      CSS Absolute
      CSS Relative
      CSS Fixed
      CSS Static
      CSS Top
      CSS Bottom
      CSS Left
      CSS Right
      CSS Overflow
      CSS Z-Index
    CSS Text
    CSS Float
    CSS Clear
    CSS Cursor
    CSS Wrap

    CSS Codes

    Resources

    CSS Tutorial German