Tuesday, January 15, 2019

HOW TO USE IMAGE AS A LIST ITEM MARKER IN CASCADING STYLE SHEET

CENTAPRENEUR 6:23 PM CSS , IMAGE , STYLING 2 comments :

Can you vividly remember one of our lessons in HTML where I talked about ordered list and unordered list? Fine. In that lesson, I talked about ordered and unordered list; how to use numbers or bullets for listing items. If you’ve forgotten, then don’t feel shy. Just click Here for a brief reminder. In this lesson, I’m going to be adding milk and sugar to the tea using CSS. What I mean here, is that I will be teaching you how to use images or icons in addition to the normal number or bullets you've learned earlier.

Apart from images or icons, you can as well use awesome shapes such as circle, square, triangle etc to mark your lists items. I will teach you everything in this lesson if you are willing to follow me practically with that smartphone in your hand. Let's get started.

For example, let’s say I want to list my favorite foods using one particular picture (you can use more than one if you wish), then all I need to do is to write the following codes into my text editor. (You can also write them, I will explain later.)

HTML

<p>Here are my favorite Foods</p>

<ul>

<li>Fried Rice</li>

<li>Squashed Potato</li>

<li>Ofe Nsala</li>

</ul>

CSS

ul{

list-style-image: url('give.jpeg');

list-style-position: inside;

}

li{

font-size: x-large;

}

REFERENCE THE CSS IN YOUR HTML FILE. IT WILL LOOK LIKE THIS

SAVE AND OPEN IT, IT WILL LOOK LIKE THIS

NOTE:

PLEASE, USE SMALLER IMAGE, WHEN YOU ARE PRACTICING. I DON’T HAVE ANY ON MY COMPUTER.

EXPLANATION

a) List-style-image: is used to define the image you want to use as list item.

b) List-position: Is used to specify the position of the list marker box. It can be outside or inside. To know the difference, try replacing the above example with outside

c) color: Is used to define the color of the list item.

d) Font-size: Is used to specify the size of the list item. It can be small, medium, large, xlarge or xxlarge.

To Add Circle or other shapes

In your HTML

write
<ul class=''circle''>
and then begin to list your items with <li> tags. When you're done, close the <ul> tag.

CSS

Go to your CSS file and remove ''list-style-image'' and add

ul.circle{

list-style-type: circle;

}

WRAPPING UP

Our next lesson will be the last on CSS basics. We will move to the latest version of CSS (i.e CSS3) and subsequently move to JavaScript course. Keep practicing.