li Selector Introductory
As you know, <li> is the tag for lists or bullets in html.
In this tutorial, you will learn how to customize the <li> tag with css.
Start it with li { and ends with }
Here are the two properties that are related to the selector li.
- list-style-type
- list-style-image
There are other stuff you can add or change other than just the marker.
You can change the font of the text or add borders to it.
list-style-type
This property lets you control what the markers (little bullets) look like.
The 'none' value makes it so that you do not have a marker at all.
The most common values of this property are
disc,
circle,
square,
decimal,
lower-roman,
upper-roman,
lower-alpha,
upper-alpha.
If you do not include this property, the defult type is disc.
disc :
Disc is the defult type for list. It is a colored in circle like a usual marker.
circle :
The circle value is used quite often. It is a circle (duh), however it is not colored in. It's just the outline of the circle.
square :
Obviously the bullet will seem like a square. The sqaure will be colored in.
Decimal :
The decimal is one of the best choices of all types. Every item on the list will have a number instead of a bullet. Of course the number will increase with every item.
Below is an example of a list that uses the list-style-type decimal.
lower-roman & upper-roman :
Both the lower-roman and upper-roman use Roman numerals. The lower-roman will use lower case letters like i, ii, iii, iv, v, vi, and so on. The upper-roman will use upper case letters like I, II, III, IV, V, VI, and so on.
Below is an example of a list that uses the list-style-type upper-roman.
lower-alpha & upper-alpha :
Bother the lower-alpha and upper-alpha use english letters. The lower-alpha will use lower case letters like a, b, c, d, and so on. The upper-alpha will use upper ase letters like A, B, C, D, and so on.
Below is an example of a list that uses the list-style-type upper-alpha.
If you have many lists and you want them all to have the same type of marker, you use this format
li {
list-stye-type: value;
}
However, if you want a single list in another type that is different than your others, you need to indicate that.
There are many ways of doing this, but this is the easiest.
Other than your 'overall' code, you need to add a seperate one.
Here is how make mine.
/* Below is the 'overall' code that controls all lists. */
li {
list-stye-type: value;
}
/* This code makes it so that the class that is indicated has a different type of marker. */
.myclass {
list-stye-type: value;
}
You have to make it so that the HTML matches it. Make sure that you put a dot before the seletor if it's a class. (If you are just beginning with CSS, you might not get the whole class thing) This is the easiest way to match the HTML to the CSS you just created.
<ul class="myclass">
<li>pink</li>
<li>blue</li>
<li>red</li>
<li>green</li>
</ul>
list-style-image
You don't always have to have a bullet for a list.
If you don't want the plain ugly markers, you can make you're own marker.
The property list-style-image lets you do so. It makes an image the marker of each bullet.
This property is actually quite easy to use.
li {
list-style-image: url('http://url-of-image-here.com');
}
You have to change the http://url-of-image-here.com to whatever the url of your image is.
make sure that when you make your image, that it is small enough to look like a marker.
|
