CSS Series | Lists

HTML provides for unordered (or bulleted) and ordered(numerical or alphabetical) lists.

Unordered lists are defined using <ul> tag.

<div>
Following are different programming paradigms.
<ul>
<li>Functional </li>
<li>Object Oriented</li>
<li>Imperative</li>
<li>Logical</li>
</ul>
</div>

Above will produce output as below.

Ordered lists are defined using <ol> tag.

<div>
Following are the top programming languages in use
<ol>
<li>Java</li>
<li>C#</li>
<li>Javascript</li>
<li>Golang</li>
</ol>
</div>

HTML Output

CSS Styles

Using CSS properties, we can to style above lists and control the appearance and position of markers. Lets see them one by one.

1.) list-style-type

It specifies shape or numbering format of list markers.

For unordered list, the allowed values are square, circle and disc.

Lets create a CSS class to render markers as empty circles.

.ListA {
list-style-type: circle;
}

Now, we render our unordered list using this class.

<div>
Following are different programming paradigms.
<ul class = "ListA">
<li>Functional </li>
<li>Object Oriented</li>
<li>Imperative</li>
<li>Logical</li>
</ul>
</div>

HTML output

Notice the empty circle markers in the above rendered list.

For ordered list markers, following are some of the values.

a.) decimal — The markers are numbering characters. (1,2,3,4,5)

b.) lower-alpha — Display lowercase alphanumberic characters. (a, b, c, d, e)

c.) upper-alpha — Display uppercase alphanumeric characters. (A, B, C, D, E)

d.) upper-latin — Display marker as upper latin characters. (A, B, C, D, E)

e.) lower-greek — Display as lower greek characters. (alpha, beta, gamma)

f.) upper-roman — Display as upper roman. (I, II, III, IV)

g.) lower-roman — Display as lower roman. (i, ii, iii, iv)

Lets create a new class listB to render markers as lower-greek.

.ListB {
list-style-type: lower-greek;
}

And now we render our ordered list using this class.

<div>
Following are the top programming languages in use
<ol class = "ListB">
<li>Java</li>
<li>C#</li>
<li>Javascript</li>
<li>Golang</li>
</ol>
</div>

Following is the rendered list now.

2.) list-style-position

It specifies the position of marker relative to content box. The content box here is virtual box encapsulating list items. It can have 2 values.

inside: Indicates marker as part of content box or we can say that marker is the first element of context box.

Lets add this property to our class ListB.

.ListB {
list-style-type: lower-greek;
list-style-position: inside;
}

outside: Indicates marker to be outside of context box.

Now, lets modify class ListB and change style-position to outside.

.ListB {
list-style-type: lower-greek;
list-style-position: outside;
}

Notice the difference in positioning of markers. When style-position is inside, the markers appear to be part of text, whereas for style-position outside, the markers appear to be outside of text box.

This is all about styling lists using CSS. In the next chapter, we would look at creating floating lists.