The Complete WebDeveloper (38 Blogs) Become a Certified Professional

How To Best Utilize CSS Lists?

Published on Aug 26,2019 15 Views

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

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,

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:

ValueDescription
NoneNA
Disc It is filled-in the circle.(default one)
CircleIt is an empty circle.
SquareIt is filled-in the square.

Below table representing for the ordered lists:

ValueDescriptionExample
DecimalIt is a number1,4,3
Decimal leading zero0 before the actual number 01, 04, 03
Lower-alphaIt is lowercase alphanumeric characters.a, b, c, d
Upper-alphaIt is uppercase alphanumeric characters.A, B, C, D
Lower-romanIts is lowercase Roman numerals.i, ii, iii, iv, v
Upper-romanIt is uppercase Roman numerals.I, II, III, IV, V
Lower-greekMarker is in lower-greekalpha, gamma
Lower-latinMarker is in lower-latina, b, c, d
Upper-latinMarker is in upper-latinA, B, C, D

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

Output - CSS Lists - Edureka

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:

ValueDescription
NoneNA
InsideIn this case if the text goes in the second line then the text will wrap underneath the marker.It will also show where the text would have started if the lists had a vale outside.
outsideIn this case if the text goes into the second line, the text will be aligned with the start of the first line.

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

Output - CSS Lists - Edureka

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.

Comments
0 Comments

Browse Categories

Subscribe to our Newsletter, and get personalized recommendations.