Learning The HTML Basics | Use Web graphics bullets To Make Your Text Stand Out

By admin on April 23, 2010

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Learning The HTML Basics | Use Web graphics bullets To Make Your Text Stand Out

Just like with the use of other high quality free web graphics such as web buttons, background images, webpage dividers and much more, you can use web graphics bullets to enhance your website. Web graphic bullets are perfect for lists, as decorations, menus, among many other purposes.

The purposes of web graphic bullets include:

When you are on a webpage, you may see one of the many bullets there. What the bullets does is to provide you the user with a graphical link to another website. Instead of using text to form a hyperlink, website designers make use of the bullets.

Bullets are also used to locate another web page on the same website. For example, you may have seen on numerous websites small arrow-shaped icons like the ones in this article. Those types of bullets allow the user to skip between pages or sets of pages while on the same website.

Web graphic bullets have to be downloaded from the internet. Seeing that they are the creative work of other users of the internet, a copyright has been granted, an agreement will have to be formed between the creator of the bullets and the user who is downloading them. This prevents users from taking advantage of the work done by others.

If you are interested in creating your personal bullets, then you will need to purchase the Adobe Dreamweaver or any other graphics software. The Dreamweaver software allows you to create bullets and other graphical images using HTML or CSS.

To create bullets using the CSS style codes you will have to follow the following steps:

  1. Click on Window > CSS Styles to open the CSS Styles pallet.
  2. Select the button that says ‘New CSS Style’ and provide the name of style as .bullet and whether it is a style sheet file or only the current document.
  3. From the List Category, you will select the type of bullet image that you want and save that style.
  4. At this stage, you are ready to create your list of bullet items using the default bullet. Afterwards you will apply the style by selecting the <ul> or <ol> tags in the tag selector found at the bottom of the document window. Right click on the window and Set Class to bullet.

Here is a list of the popular CSS style codes that can be used to create your bullets using Dreamweaver.

Bullet Type CSS Style Code Example
Circle .bullet {list-style-type: circle;}
  • List Item 1
Numbers .bullet {list-style-type: decimal;}
  1. List Item 1
Square .bullet {list-style-type: square;}
  • List Item 1
Image Bullet .bullet {list-style-image: url(/images/icons/arrow.gif);}
  1. List Item 1
Disc .bullet {list-style-type: disc;}
  • List Item 1

For easier navigation and selection, the bullets provided by many websites are categorized in themes such as:

  1. Arrow Bullets
  2. arrow bulletsarrow bulletsarrow bulletsarrow bullets

  3. Basic Bullets
  4. arrow bulletsarrow bulletsarrow bullets

  5. Cross Bullets :
  6. arrow bulletsarrow bulletsarrow bullets

  7. Glassy Bullets
  8. arrow bulletsarrow bullets /><img class=arrow bullets

  9. Metallic Bullets
  10. arrow bulletsarrow bulletsarrow bulletsarrow bullets

  11. Mica Bullets
  12. arrow bulletsarrow bulletsarrow bulletsarrow bullets

  13. Prismatic Bullets
  14. Prismatic BulletsPrismatic BulletsPrismatic Bullets

Bookmark and Share

Incoming search terms for the article:

Leave a Reply