Lists style properties In CSS

Watch video presentation for better understanding and subscribe for more;

In this tutorial we will discuss how you can number your work to make it more presentable to the readers. As you have always used numbers, romans, alphabets numbers, dashes among others to specify order in your work, now we will see various examples on how to insert, position, the type and the style of either numbered or bulleted points. Some of the properties we will discuss includes;
i) How to set list-style-type– This property allows one to alter the shape or style of a bullets inserted in a document file. The shape may in circle, square, numbers, romans etc. We may have an example here to illustrate that.

Case 1.
<p>Some of the languages you can pursue in our program learntechphilloh includes;</p>
<ul style="list-style-type: square;">
<li>HTML</li>
<li>Javascript</li>
<li>PHP</li>
<li>Python</li>
</ul>

Case 2.
<p>Some of the languages you can pursue in our program learntechphilloh includes;</p>
<ul style="list-style-type: circle;">
<li>HTML</li>
<li>Javascript</li>
<li>PHP</li>
<li>Python</li>
</ul>

It will produce this;

Case 1.

Some of the languages you can pursue in our program learntechphilloh includes;

• HTML
• Javascript
• PHP
• Python

Case 2.

Some of the languages you can pursue in our program learntechphilloh includes;

• HTML
• Javascript
• PHP
• Python

ii) How to set list-style-position -In this property we sets the position of the bullets or numbers. We may set them outside, inside or you may prefer not to set any. Let’s this example below;

Case 1.
<p>Some of the languages you can pursue in our program learntechphilloh includes;</p>
<ul style="list-style-position: inside;">
<li>HTML</li>
<li>Javascript</li>
<li>PHP</li>
<li>Python</li>
</ul>

Case 2.
<p>Some of the languages you can pursue in our program learntechphilloh includes;</p>
<ul style="list-style-position: outside;">
<li>HTML</li>
<li>Javascript</li>
<li>PHP</li>
<li>Python</li>
</ul>

It will produce this;

Case 1.

Some of the languages you can pursue in our program learntechphilloh includes;

• HTML
• Javascript
• PHP
• Python

Case 2.

Some of the languages you can pursue in our program learntechphilloh includes;

• HTML
• Javascript
• PHP
• Python

iii) How to set marker-offset -It specifies the distance between the the bullet or the number and the text, the value is length and should be in either cm, px, pt, em. Let’s have an example here;

Case 1.
<p>Some of the languages you can pursue in our program learntechphilloh includes;</p>
<ul style="list-style: inside lower-roman; marker-offset: 3cm;">
<li>HTML</li>
<li>Javascript</li>
<li>PHP</li>
<li>Python</li>
</ul>

Case 2.
<p>Some of the languages you can pursue in our program learntechphilloh includes;</p>
<ul style="list-style: outside circle; marker-offset: 3em;">
<li>HTML</li>
<li>Javascript</li>
<li>PHP</li>
<li>Python</li>
</ul>

It will produce this;

Case 1.

Some of the languages you can pursue in our program learntechphilloh includes;

• HTML
• Javascript
• PHP
• Python

Case 2.

Some of the languages you can pursue in our program learntechphilloh includes;

• HTML
• Javascript
• PHP
• Python

iv) List-style – it used for combining several lists styles. For instance your may have;

<p>Some of the languages you can pursue in our program learntechphilloh includes;</p>
<ul style="list-style: outside circle; marker-offset: 3cm;">
<li style="list-style: inside square;">HTML</li>
<li>Javascript</li>
<li>PHP</li>
<li>Python</li>
</ul>

It will produce this;

Some of the languages you can pursue in our program learntechphilloh includes;

• HTML
• Javascript
• PHP
• Python

Thanks for reading through our tutorial, remember to leave your opinions in the comment section below. As we continue learning CSS hoping to meet you in our next tutorial.