How to style lists with CSS in WordPress

You can create ordered (numbered) and unordered (bullet point) lists in WordPress posts and pages. In this article, we’ll show you how to create and style lists with CSS.

How to create a list in WordPress

  1. In the standard post/page editor, type the list’s contents (one entry per line).
  2. Highlight the entries, and click the appropriate button to format them as a list.

WordPress list

3. Use the dropdown menus to display simple bullet formatting options.

Bullet formats

Style lists with CSS

For more advanced styling, you’ll need to use CSS rules for the following tags:

  • <ol> for an Ordered List
  • <ul> for an Unordered List
  • <li> for each item in a list, ordered or unordered

By default, most WordPress lists are identified by an id or class. Edit the WordPress style.css file (available via Appearance > Editor > Stylesheet) to change the styling of your list. Common choices include changing line spacing, switching the bullet point, or creating additional space between lists and surrounding paragraphs. You can also display the list horizontally instead of vertically or in other advanced formats.

Creating a nested list

A popular list format, especially for sidebars, is nested lists. For example, you may have a list with bullet points where each entry has several sub-bullets. For clarity, the best practice would be to indent the sub-bullets to the right of the parent entry.

If you work with nested lists and wish to have an individual style for each list, you need to recreate the “nest” in the stylesheet.

The CSS formatting would be structured as follows:

#mylist ul {attributes}
#mylist li {attributes}
#mylist ul li {attributes}
#mylist ul ul li {attributes}
#mylist ul ul ul li {attributes}
#pagenav {attributes}
#pagenav ul {attributes}
#pagenav ul li {attributes}

Let’s take a look at the individual rules:

#mylist ul 

This rule configures the look for the overall list. It contains the margins and padding styles and may contain the font family, colour, and other list details.

#mylist li 

This rule assigns a style to the actual list item. You can use it to set the format to include a bullet or not. Other attributes you can configure are the font, font size, colour, and more.

#mylist ul li 

This rule determines the style of the first nested list. Each first-level nested list can be customized here, but you can style sub-lists differently if they’re contained within a specific ID.

#mylist ul ul li

This rule styles links within the #sidebar ul ul, customizing the list’s appearance.

#mylist ul ul ul li

This rule styles the nested “sub-sub-list,” for example:

  • Category Title
    • Category One
    • Category Two
      • Sub-Category One
      • Sub-Category Two
    • Category Three

List styling options

The style of bullet or numbering for a list is determined by a list-style-type property in the style sheet. The default value is disc. Other values you can use are:

  • Circle
  • Square
  • Decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • none

To change the bullet point style, add the following code to your CSS stylesheet:

#mylist li {
   list-style: square;
}

Instead of using circles, your list bullets will now use squares.

Other available customizations include removing bullets altogether (list-style: none;) or even adopting an image for your bullets (list-style-image: url(/wp-images/myimage.jpg).

Head to the WordPress Codex to find out more about list styling using CSS. If you need help with your HostPapa account, please open a support ticket from your dashboard.

Related Articles