Subtitles of the Movie

In the previous movie, I introduced you to the possibilities of using CSS to format your bullet lists in Dreamweaver. Let me continue in this movie and provide some additional details and demonstrations for the second two properties for formatting your lists with CSS; the bullet image and position. Let me start off with position. Really to see a good example of the difference between inside and outside, you need a multi-line list here. In this case I have an ordered list and I'm using the lower-case Roman numerals as my type. Here the position is inside. Notice that the second line is inside the bullets. If I choose outside for my position and then click on the Apply Button here in the Rule Definition Dialog, you can see that this time, let's go back and do my ordered list again and let's go to List and let's format this inside. Click Apply. Notice that the bullet is inside the outer edge of the second line of my list. Outside will look like this. So you can see that it's the bulleted item in the first line that's moving inside or outside depending on which position I choose. In general, I like to use outside so I get a nice lineup of all of my bulleted list, but you do have the option of moving that to the inside. Now, the typical list markers are fine for basic lists, but in most cases you'll want to use this property here, the Bullet Image Property, to customize and add more style to your lists. This List Style Image Property will replace the List Item Marker with an image of your choice. I should point out that you should always specify a List Style Type Property as well just in case the image is available. So you want to provide an option here. So all you do is you prepare an image. Generally you want to use a small image; not too complicated because it's going to be very small and you'll probably want to have a small image there and I've prepared an image as an example, Here is, for example, a very small Apple logo. Click Apply and then notice that the Apple logo is now my bulleted image there. I can also do a little line drawing, click Apply and this one's a little bit bigger. You can see that if it gets much bigger, it kind of destroys the formatting. Notice that the alignments are off. So this may be a good example of a time when you might want to use the inside position so that the outside edge of the graphic lines up with the outside edge of the text there. And one more example is I have a little graphic there that I can apply. I'm using a little animal as a bullet image for my list. Now, you're not limited to the use of just a single style image or type for any of your lists. Notice in this example I have two different list styles. One is the Apple logo where I put an image and then the other is the default style. So you can mix and match these. You can add as many to the style image or types as you want using Classes. It's what I've done here. Notice that I have a Class labeled .ListA. If we open that up and look at the definition in the List Category, notice that I have the, for the bullet image, the Apple logo. If I want to apply that Class to any of these list items, I just simply click on the LI Tag right there and then right click if you're on the Windows machines or Control click that style definition and simply apply it. Notice that now that bullet gets replaced, the style gets replaced by the bullet image that I've defined. Let's go ahead and take this example further by creating another Class here. Let's call this .ListB, Style B, click OK and for this Class, let's go to the List Category and choose a different image. Let's choose the animal image here, click OK. Notice that the animal hasn't been applied yet so you won't see it so let's go ahead and mix this up and take this tag, right click on List B and choose Apply and now I have the animal style image there, list style image. So you can mix and match these using the Class in which you can define different list styles or list images to really mix up these bullet points. Probably don't want to go too crazy with the same list but you may have different lists in your document and perhaps you want a different list style or list image for each of those lists to spice up your design a little bit. So that will conclude this section of the tutorial covering how to style lists and links. In this section of the tutorial you've learned about the different link states, you're link formatting options, how to set up multiple link schemes, some tips for the hover link and the image links, as well as CSS List Properties and this last movie covering CSS Bullet List Images and the positioning options that you have available. Let me now move on to the next section of the tutorial, laying out pages with CSS.