CSS List Style Properties
List Style properties are very important properties to set of either Bullet Points or Numbered. In this Chapter, you will learn how to control list type, style, position, etc. with the of CSS (Cascading Style Sheet)
There are following Five CSS properties, which are used to control CSS Lists Properties-
CSS Syntax Used in CSS List list-style: list-style-position|list-style-type|list-style-image|initial|inherit;
List-style-Position
List-style-position also knows as Bullet position, in CSS list style, list-style-position properties used to set whether the bullets appear means that bullets appear inside the list item, or bullets appear themoutside before the start of every item. Basically, the default value is.outside
Example-
<!DOCTYPE html>
<html>
<head>
<style>
ul {list-style-position: outside;}
</style>
</head>
<body>
<h3>The list-style-position example</h3>
<p>The list-style-position set the bullets appears inside or outsides</p>
<ul>
<li>Engineering Students</li>
<li>Medical Students</li>
<li>MBA Students</li>
<li>CA Students</li>
</ul>
</body>
</html>
The list-style-position properties help you to set the points should appear inside or outside of the box containing, there are more than two values which used to set the bullets points inside and outside the box.
| Sr. No. | Value | Discription |
|---|---|---|
| 1 | inside | If you want to set the bullets points inside the containing box used inside value.i.e. If you set the value to inside, then the bullets points will sit inside the lines |
| 2 | outside | If you want to set the bullets points outside the containing box used outside the value i.e bullets points to sit outside the list items |
| 3 | none | NA |
<html>
<head>
</head>
<body>
<ul style = "list-style-type:square; list-stlye-position:inside;">
<li>Engineering Students</li>
<li>Medical Students</li>
<li>CA Students</li>
</ul>
<ul style = "list-style-type:circle;list-style-position:outside;">
<li>Engineering Students</li>
<li>Medical Students</li>
<li>CA Students</li>
</ul>
<ol style = "list-style-type:decimal;list-stlye-position:outside;">
<li>Engineering Students</li>
<li>Medical Students</li>
<li>CA Students</li>
</ol>
<ol style = "list-style-type:lower-alpha;list-style-position:inside;">
<li>Engineering Students</li>
<li>Medical Students</li>
<li>CA Students</li>
</ol>
</body>
</html>
List-style-type
List-style-type such as bullet style properties in CSS it allows you to set the what type of bullets you want to use for the bullet points, in this properties we can set the order list to use uppercase alpha or upper roman, etc. numerals.
<!DOCTYPE html>
<html>
<head>
<style>
ol {list-style-type: upper-alpha;}
</style>
</head>
<body>
<h3>The list-style-type</h3>
<p>Set order list type in alpha or numerical etc.</p>
<ol>
<li>Engineering Students</li>
<li>Medical Students</li>
<li>MBA Students</li>
<li>CA Students</li>
</ol>
</body>
</html>
you can control the style or shape of bullets point in the case of an unordered list (ul) and you can use the style of numbering characters in the case of an ordered list (ol).
as given below table the values which can be used for in the case of an unordered list (ul)–
| Sr. No. | Value | Discription |
|---|---|---|
| 1 | disc (deafult) | A filled circle bullets points list style |
| 2 | square | A filled square bullets points list style |
| 3 | circle | An empty circle bullets point list style |
| 3 | none | NA |
List-style-image
In List-style-image properties used custom bullet image.
<html>
<head>
<style>
ul { list-style-image: url(css_example/image/square.png); }
</style>
</head>
<body>
<h3>The list-style-image</h3>
<p>In List-style-image properties used custom bullet image.</p>
<ul>
<li>Engineering Students</li>
<li>Medical Students</li>
<li>MBA Students</li>
<li>CA Students</li>
</ul>
</body>
</html>
About Author
