Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Modifying type in the CSS Styles panel
- Understanding the different type measurement unit options
- Allowing users to set page type size
- Employing web-safe fonts
- Exploring CSS 3 typeface options
- Setting up @font-face
- Applying color and transparency to type
- Styling the font weight, case, and letter spacing
- Inserting drop caps
- Rotating text with CSS transform
- Laying out text in multiple columns
- Incorporating ordered and unordered lists
- Targeting lists items with the nth-child selector
Skill Level Intermediate
Creating a number, or as it's known in HTML, ordered list is dirt simple. Creating a numbered list inside of an unordered list with bullet images, not so simple. Let me show you how to swing it. So I have open the resources.htm file found in the Chapter8 > 08_02 folder. I'm in Display view. Let's scroll down to where the unordered lists are and here you can see that I have an unordered list and nested inside of it another unordered list.
So we're going to convert this nested unordered list into an ordered or numbered list. Let's go ahead and put our cursor inside of the nested list and then down at the tag selector choose that ul which is closest to the right. That's going to be that nested list and all we have to do is go over to the Property Inspector and instead of clicking on the bulleted lists, Unordered List, we'll click on the numbered or Ordered List and that will change that ul tag to an ol, for Ordered List.
However, as you can see, we're not getting much love here. We still have the images going on. So perhaps we should get rid of those. Let's go ahead and create a new rule and I'll go over to the CSS STYLES panel and click New CSS Rule and get rid of my little wrapper there. So I have a #mainContent, # mainArticle, as the divs, ul, li, ol, li. So this is a pretty targeted selector, but it's needed in order to overcome the specificity of the other rule that puts the star images into the bulleted list.
Let's click OK and go over to the List category and for List-style-image, choose none, click OK. Numbers. Excellent! However, we're in Design view. Let's take a look in Live View. Bullets! That's not right. To remove the bullets, we are going to need to change the list-style-type property. So I'm actually going to go and in CSS STYLE panel, click on the Add Property link, and type in list-style-type, press Tab, and I'll just go and choose number from the list here.
Well, there is no number. What you have to do in order to achieve the effect that we want of converting it actually to numbers is go down and choose inherit. Now this is a little counterintuitive, but as you can see, it's the proper way to do it. So another technique that you might want to apply now that you have your numbers, is let's say you want to color the numbers, give them another colors so that it will stand out. The way you handle it is by adding in a color property first.
Let me actually scroll up here, so I can get my dark blue. Try that again, Type in color, that will give me the color swatch, which I can then open, forget the eyedropper and click on my blue. Let's scroll back down and see how that worked. Well, my numbers are colored, but so is the text and that's a little overwhelming. So if you want to have just the numbers colored, you're going to have to go in and put in just a little bit more HTML, a span tag to be precise, around just the text.
So let me go ahead and go to Split View and I'm going to go up to my first item here, select just the text and then press Command+T on the Mac, Ctrl+T on the PC to open up the Quick Tag Editor in wrapper mode. If you've watched any of my courses you know I'm a big fan of the Quick Tag Editor. So I use it quite a bit. So hit Enter and we'll just go ahead and repeat that operation a number of times.
While it's a little time consuming, it definitely does get the job done and using the Quick Tag Editor is far faster than typing all of these tags manually. Last one. Now, if I go back over to Design View, you won't see any change yet, but that's because we just have to create a new CSS rule that will handle that. So I'll put my cursor within the text there which is within the span tag and click New CSS Rule.
Make that just a tad less specific and then go ahead and click OK. Now the color that we want is the same one that we used previously on the list items and that's 51341a. We'll click OK, and as you can see we now have colored numbers and the text is the same color as the text of our other list items. Styling ordered lists, especially when embedded within an unordered one, is anything but straightforward.
Hopefully, the techniques covered in this video should help you achieve your goals.