The Complete WebDeveloper (39 Blogs) Become a Certified Professional

How To Best Utilize CSS Lists?

Last updated on Jun 19,2023 621 Views


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.

Check out the Angular Certification by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities.

If you want to get trained in React and wish to develop interesting UI’s on your own, then check out the React JS Course by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Unleash your creativity and design skills with our UI and UX Design Course.

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

Upcoming Batches For Web Developer Certification Training Course
Course NameDateDetails
Web Developer Certification Training Course

Class Starts on 28th December,2024

28th December

SAT&SUN (Weekend Batch)
View Details
Web Developer Certification Training Course

Class Starts on 4th January,2025

4th January

SAT&SUN (Weekend Batch)
View Details
Comments
0 Comments

Join the discussion

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.

image not found!
image not found!

How To Best Utilize CSS Lists?

edureka.co