Are you a fan of making lots and lots of lists? Neither am I. But, here I am not talking about chore or shopping lists. I am talking about that are inevitable when making modern websites and apps. ordered and unordered lists As mentioned, when creating lists in HTML and CSS, there are two types: . ordered and unordered In the case of . On the other hand, , that is why a common name for this type of lists is bulleted lists. ordered lists numeration is present in case of unordered lists, no numeration is present When using lists, it is important to properly. format the text The focus of this article will be on unordered lists, and the types and properties of bullets. The unordered list uses the tag. Let’s see a simple example. <ul></ul> HTML <ul> <li>First item</li> <li>Second item</li> <li>Third item</li><ul> The Type Attribute The attribute can be used to determine which type of bullet will be used on the list. This attribute can consist of three different values: type Bullet type can be set on either the or element, which means you can set the style on the , or . <ul></ul> <li></li> overall list style each list item individually A good thing to know is which to use when making lists. font size Bullet Style For changing the bullet style, two properties can be used. The property or the . The difference is by using the second one, you can change multiple properties at the same time. But I’ll get to that later. list-style-type list-style CSS .ul { list-style-type: square;} Here you can see the list style set to square. Using a Custom Image With the power of CSS, it is possible to use a . Usually, it is a simple small icon. For this purpose, I am going to use . custom image as a bullet list-style-image CSS ul { list-style-image: url(‘images/sample-bullet.png’);} Bullet Position You can also set the position of the bullets by using the property. It can have two values: list-style-position outside and inside. CSS ul { list-style-position: outside;} CSS ul { list-style-position: inside;} The first image shows the value set to , and the second one has the value set to . outside inside When setting the value to outside it means the bullet will be . And, when setting the value to inside, the bullet will be . outside the list item inside the list item Don’t forget to give the lists some . styling If this type of styling isn’t enough, you can of the bullets. change the color Combining the Properties As I’ve mentioned before, you can combine multiple properties by setting . list-style CSS ul { list-style: square inside url("element.gif");} With this shorthand you are simultaneously setting . list-style-type, list-style-position and list-style-image Lists are used very often when developing websites and apps, so you should always know how to style them. I hope this brief explanation will help in your projects. Thank you for reading! Originally published at kolosek.com on April 19, 2018.
