How To Best Utilize CSS Lists?

CSS lists are very helpful in reaching a set of either numbered or bulleted points. This article will show you how to control the type, position, style of web pages using CSS. Following Pointers will be covered here,

• CSS Properties
• The list-style-type Property
• CSS Lists: Sample Program
• Marker Values For In list-style-position property

So let us get started then,

CSS Lists

CSS Properties

There are five different CSS properties in which you can use it to control lists:

• List-style-type :It allows us to control the shape or the appearance of the marker.
• List-style-position :It specifies that a long point is needed to wrap to a second line or should align with the first line or start with with the marker.
• List-style-image :It specifies that an image for the marker should be added or made more attractive rather thane the bullets or numbered points.
• List-style : It shows the shorthand to the preceding properties.
• Marker-offset :It specifies the distance between the marker and the text entered in the list.

Here the commonly used list are:list-style-type and list-style-position. It is been explained below

Moving on with this article on CSS Lists

The list-style-type Property

In list-style-type property it let’s you to control the shape and style of the bullet points or marker in the unordered list case. In ordered list case it is numbering characters.

Below table representing for the unordered lists:

Below table representing for the ordered lists:

Moving on with this article on CSS Lists

CSS Lists: Sample Program

<ul style="list-style-type:circle;"><li>Java</li>
<li>Python</li>
<li>Angular</li>
</ul>
<ul style="list-style-type:square;">
<li>Java</li>
<li>Python</li>
<li>Angular</li>
</ul>
<ol style="list-style-type:decimal;">
<li>Java</li>
<li>Python</li>
<li>Angular</li>
</ol>
<ol style="list-style-type:lower-alpha;">
<li>Java</li>
<li>Python</li>
<li>Angular</li>
</ol>
<ol style="list-style-type:lower-roman;">
<li>Java</li>
<li>Python</li>
<li>Angular</li>
</ol>

Output

Moving on with this article on CSS Lists

The list-style-position Property

Marker Values For In list-style-position property

In list-style-position property it shows that the marker should appear inside or outside the box containing the bullet points. This can have one of the two values:

Example:

<ul style="list-style-type:circle; list-stlye-position:outside;"><li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style="list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style="list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style="list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

Output

This brings us to the end of this article on CSS Lists.

Check out our Full Stack Web Developer Masters Program which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.

Got a question for us? Please mention it in the comments section of  article and we will get back to you.