33.a List Style Types – Code

Video Summary

All right, in this section we’re gonna play with the generic list style types that CSS gives us. So right if we let’s look at this page and see what we’re looking at. So we have an ordered list at the top right here and we have an unordered list at the bottom. I did put a P with just a space there. So I could put a one pixel solid black line to split these up. So that way, it’s easier to see that we have an ordered list and an unordered list. And I went through I made each size or the font size 30 pixels so we can easily read it, but right below that I have a list style type property. So let’s start off with the ordered list. And let’s try upper alpha and I need to put an A right here. So we have upper alpha, and it just changed all instead of 12345. We have A B C D E. Now what happens if we change this to lower alpha? 

But if we want to change those two letters or Roman numerals, we have that ability through the list style type. Now when we’re talking about unordered lists, let’s try this out. So we have the traditional circle, but we can put square and we make these circles into squares. It’s pretty straightforward. There’s not a lot of creative stylings because I think CSS when they were building this, they knew that they gave us the features to where we can use icons, we can use graphics, we can use images, so we can really customize the individual bullet points that we want for our lists. But for the most part, especially if you’re building blog articles, or you have some content on your website where you want to do a standard list or you want to do a quick outline. They want to give you the options to make it as looks as best as they can for what they have. So if you want to use numbers, you can if you want to use Roman numerals, you can if you want to use letters you can or you can choose between circles and squares. So I think we finished up this section I think we should hop over and figure out how we can use images for our list icons. 

PHP Code Snippets Powered By : XYZScripts.com