CSS Basics: Easy List Design – A Beginner’s Guide to Organized vs. Unorganized Lists on the Web

Style Unordered and Ordered HTML Lists

Ordered and unordered HTML Lists lists are one of the most important tools in the web design world. Lists are used in HTML to display text on a web page in a structured and uncluttered way. Depending on your needs, you can design the content as an ordered list with numbering or as an unordered list with a preceding marker (e.g. ⏺).

HTML lists are an important element of rich, well-structured web pages. They make sure that information is communicated in a precise and quick manner.

But lists are not only used for enumeration. Navigation is nearly always implemented as an unordered list. Lists have their own semantics, and the default representation can vary from browser to browser.

However, CSS makes it easy to customize the representation without changing the semantics.

A Simple Example of Lists Using the Default Settings

<h2>Unordered List</h2>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
</ul>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea tak</p>

<h2>Ordered List</h2>

<ol>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ol>

<p>No sea takimata sanctus est Lorem ipsum dolor labore elit. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos accusam et justo duo dolores est.</p>

Customize Enumerations (UL) and Numbered Lists (OL)

In the example shown above, we were introduced to the bullet list (<ul>) and numbered list (<ol>). Using CSS, it is possible to customize the marker and the spacing of the list.

Each item in the list begins with the opening tag <li> and must end with the closing tag </li>. For each LI element, the display: list-item property is defined by the browser stylesheet. The special thing about this property is that two boxes are created:

• a block-level box for the content of the list item
• and an inline box for the marker, which is inserted before the content.

Set the Bullet Point Symbol (Marker) for the List

There are three list-specific properties that are used to change how list items are displayed:

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

Use list-style-type to specify the bullet character for an unordered list or the type of numbering for an ordered list. The following values can be used:

The two tables shown above are logically separated from each other. It is important that you use lists in a logical way. With CSS it is possible to display an enumeration (UL list) with numbered list items, but this would contradict the logic of the unordered list.

Specify any Character as a Bullet Point

You can also define your own enumeration symbol by specifying a character string: e.g. by using a UTF-8 character list-style-type: "✔ "

Please note: If you use this method, the font size and font color that are defined for the list item will also be used for the bullet points.

The next section explains how to style the marker and the content of the list item on their own.

Separate Styling of Marker and List Item Content

With CSS3, it is now even possible to define your own bullet points (markers) by specifying a character string (for example list-style-type: "✅ " ) and to format these independently of the list item content.

The bullet point in a list is called a marker. The inline box in which the bullet point is placed is called the marker box. It is placed at the very beginning of the list item, before the content itself.

The marker box can be selected separately with the pseudo element ::marker. It can thus be styled independently of the content of the list element.

/* Specify List Marker */
h2 {
  margin: 0 0 0.83em 0;
  font-size: 1.5em;
  color: #0000bb;
}

p {
  margin: 0 0 0.5em 0;
}

/* Define List Style */
ul.n1 {
  margin: 0 0 1em 0;
  padding: 0 0 0 2em;
  font-size: 1em;
  color: #6a1782;
  list-style-type: "✅ ";
}

ul.n2 {
  margin: 0 0 1em 0;
  padding: 0 0 0 2em;
  font-size: 1em;
  color: #6a1782;
  list-style-type: "✔ ";
}

::marker {
  font-size: 1.2em;
  color: #ff0000;
}

<h2>List Marker</h2>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea tak</p>

<ul class="n1">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ul>

<p>No sea takimata sanctus est Lorem ipsum dolor labore elit. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos accusam et justo duo dolores est.</p>

<ul class="n2">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ul>

Using an Image as a Bullet Point

The list-style-image: url("PATHNAME/image.png") property allows you to use an image as a bullet point. If the image file is stored in a different folder than the CSS file, the path to the image file must be specified relative to the CSS file or absolute.

If both list-style-type and list-style-image are specified, list-style-type is used as a fallback if the graphic cannot be loaded for any reason.

The behavior of the various browsers is not consistent. Some crop the graphic to the height of the list item. Others enlarge the list item so that the graphic is displayed completely.

The use of graphics as bullet point has several disadvantages:

• It is not possible to position the graphics exactly.
• Graphics will not adjust to different standard font sizes.
• The graphics often look pixelated on high-resolution displays.

Position the Bullet Point (Marker) of the List

The list-style-position property allows you to specify wether the list item marker (bullet point) should appear inside the list item or outside before the start of the list item.

The following values are possible:

• list-style-position: inside Bullet point inside the list item
  

  Only the first line of the list item is indented to leave space for the bullet point. If the text is longer than one line, the text breaks and flows around the bullet point. This setting is only useful for short, single-line list items

• list-style-position: outside Bullet point outside the list item (default)
  

  If the text of the list item extends over more than one line, the bullet point is placed on the left-hand side before the paragraph. The appearance of the list item is therefore calm as usual.

Left-Align List Items

By default, all browsers indent list items to the right. However, indentation of list items is not a fixed property. The indentation for UL or OL can be set individually using the CSS properties Margin or Padding.

/* Left-Align List Items */
h2 {
  margin: 0 0 0.83em 0;
  font-size: 1.5em;
  color: #0000bb;
}

p {
  margin: 0 0 0.5em 0;
}

/* Specify List Styling */
ul {
  margin: 0 0 1em 0;
  padding: 0 0 0 1em;
  font-size: 1em;
  color: #00dd00;
  list-style-type: circle;
}

ol {
  margin: 0 0 1em 0;
  padding: 0 0 0 1.2em;
  font-size: 1em;
  color: #d26a0c;
  list-style-type: decimal;
}

<h2>Unordered List</h2>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea tak</p>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ul>

<h2>Ordered List</h2>

<ol>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ol>

<p>No sea takimata sanctus est Lorem ipsum dolor labore elit. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos accusam et justo duo dolores est.</p>

How to Create a Navigation Bar Based on a List of Items

The navigation bar is an essential part of a graphical user interface (GUI) that is designed to make it easy for visitors to browse the website effortlessly. The main navigation on a web page is commonly known as navigation bar, abbreviated as navbar.

In this article, we will discuss how to create a navigation bar. We will present all the elements that are necessary for a well-designed navigation bar.

Make sure that the navigation bar stands out from the rest of the page. Use Colors, Fonts and Margin to distinguish the main content of the page from the navigation bar.

Nowadays, links are preferred over buttons in the navigation. They are search engine friendly and on top of that, they’re accessible for visually impaired people.

The enumerated list (unordered list) is in semantic terms the correct HTML element for listing links. The result is a structured item consisting of three nested HTML elements that you can style with CSS: UL, LI and A. If you want to create a well-designed horizontal navigation from a list, you need to remember that the list is a block element.

Let's look at a simple navigation. We add some padding and background colors to make it clearer.

/* Horizontal Navigation */
h2 {
  margin: 0 0 0.5em 0;
  font-size: 1.5em;
  color: #0000bb;
}

nav ul {
  padding: 1em;
  background: #ffffd2;
  list-style-type: none;
}

nav li {
  display: inline-block;
  margin-top: 0.2em;
  padding: 0;
  background: #6ccd6c;
}

nav a {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  color: #000000;
}

nav a:hover {
  background: #ffa500;
}

<h2>Horizontal Navigation</h2>

<nav>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Angebote</a></li>
  <li><a href="#">Kontakt</a></li>
  <li><a href="#">Datenschutz</a></li>
  <li><a href="#">Impressum</a></li>
</ul>
</nav>