When HTML first came into use in the early 1990s, all unordered lists looked the same because there was only the standard black dot symbol to use as a bullet point. With Cascading Style Sheets (CSS), so much more is possible. Lists can be styled with different shapes, a user-selected image or a combination of options.
Standard CSS Bullet Styles
The standard bullet styles you can choose in CSS include a disc, square or circle or a lower-roman, upper-roman, lower-alpha or upper alpha character. The code for a lower roman character looks like the following:
To change one designated list to this style, create a class and give it the lower-roman attribute, as such:
The list code would appear in the body of your document, as such:
Styling through bullet position
You also can change the position of the bullet, altering whether it's indented or outdented.
This code is now written:
This is useful when you want the bullet in line with other content (inside).
Changing the style with another image
A more controlled way to get the exact look of the bullet point is to use your own pre-designed bullet image. Make sure the image is small enough to be a bullet point, as larger images can throw the page formatting off. The code would look something like this:
The URL points to the location of the image on the server.
If you want to directly alter the list in the HTML, specify the list style in each bullet point:
<li type=square>text 1<li>
The fastest way is through CSS.
How to Do Bullet Points for Job Descriptions
One essential job duty for any human resources or recruiting professional is to advertise available job openings in a manner that will...
How to Make Bullet Points on Your Computer
Bullet points are a concise way of summarizing information in text documents. They make lists of data visually distinct from the rest...