jsEditor - Style Sheets: The Lists Tab

Aim: To learn about the Lists Tab of the Style Sheet Dialogue.

Having looked at the other tabs, the lists tab should be fairly familiar. First we have a line containing a box named 'Bullet Image', and buttons named URL and Add respectively.

This line makes all the pages linked to the style sheet use an image bullet, specified by the URL in the box.

Type UL in the Selector box, and add it to the style sheet.

Now select an image for the bullet.

And finally, having checked the cursor is in the curly brackets, click on the Add button. I got:

UL { list-style-image: url("myImage.gif"); }

View your image bullets by choosing View.

Now consider the next line which contains a menu called 'List Style', a box named 'Value' and a button named 'Add'.

Type OL in the Selector box and Add the selector.

Choose a style for your ordered list from the drop-down menu named 'List Style'. I chose upper-alpha. Add the style to the Style Sheet and Preview. I saw some capital letters for my list! The Style Sheet looks like this:

OL { list-style:upper-alpha}

At the bottom of the drop-down menu, there are some items for unordered lists: square and circle.




You have learned:

Next: Contents

Style Sheets