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 Make a Bullet Point in MS Word
Microsoft Word allows users great flexibility in creating documents. Bulleted lists are great for highlighting key points. You can choose from a...
How to Remove List Styling Bullets in CSS
By default, the <ul> unordered list tag in HTML creates a list of elements preceded by a round bullet. In certain situations,...
How to Make Bullet Points in HTML
Using bullet points helps break up large chunks of text and point out lists of useful information. Bullet points are easy to...
How to Make a Bullet Point Using the Alt Key
If your work involves computers and drafting documents, you likely use symbols on a regular basis. Most keyboards include keys for symbols...
How to Convert an Image to HTML Code
With just a few snippets of HTML code, you can embed an image into any web page, email or other Internet-based HTML...
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...