Basic CSS : UL OL & LI List Style Type, Position, Image, & Horizontal Property

Share:

Basic CSS Tutorial : UL OL & LI List Style Type, Position, Image, and Horizontal Property. List tags like ul, ol and li is we need to create a list item in a website document. In a previous tutorial, list style has a lot of help in creating table, navigation menus, and even functions are so important because the list style used main frame. Combined with using css property list, the list style that we make will be much nicer. For that, in this tutorial we will learn css code for ul ol li list style property.
Basic CSS Tutorial  UL OL & LI List Style Type Position Image and Horizontal Property

Basic CSS Tutorial : UL OL & LI List Style Type, Position, Image, and Horizontal Property

Before learning about the css code for ol and ul li list style, we do a refresher to remember the html code of the ol and ul li list style. This is the basic html code :

  1. UL is used to create a list style bullets.
  2. OL is used to create a list style in the form of numbers or letters.
  3. Li used to create an item from a list.

HTML code for UL OL and LI list style :

<ul>
<li> CSS List Style Type </li>
<li> CSS List Style Position </li>
<li> CSS List Style Image </li>
</ul>

<ol>
<li> CSS List Style Type </li>
<li> CSS List Style Position </li>
<li> CSS List Style Image </li>
</ol>

CSS List Style Properties

CSS List Style Type Property

On basic html, usually in the form of a list style bullet or number, but you can change the items on the list to be more interesting with css list style type. Here are some types of the style list :

  • None to create a list item without style
  • Circle to create a list item style in the form of circle
  • Square to create a list item style in the form of square
  • upper-alpha / lower-alpha style list to create items such as large and small letters alpha
  • upper-roman / lower-roman style list to create items such as big and small letters roma

The CSS code example for list style type :

 ul {
list-style-type:square;
}
ol {
{list-style-type:lower-alpha;}
}

Basic CSS Tutorial  UL OL & LI List Style Type Position Image and Horizontal Property

CSS List Style Position Property

CSS list style potision used to determine the position of the style list. There are two options in determining the position of the style list, including Inside and outside. UL and OL could use two types of this style position. Here’s the CSS code :

ul {
list-style-position:inside;
}
ol {
list-style-position:inside;
}

Basic CSS Tutorial  UL OL & LI List Style Type Position Image and Horizontal Property

CSS List Style Image Property

If you want to use a different style list of list style in general, as an alternative you can use css list style image, where the image you want to be a style for your item list. Here’s to css code from the image list style :

ul {
list-style-image:url('http://domain/image-url');
}

Basic CSS Tutorial  UL OL & LI List Style Type Position Image and Horizontal Property

Horizontal UL OL and LI List Style Property

UL and LI list style is often applied to create a navigation menu, especially creating horizontal navigation menu. So ul and li is a horizontal list, we add the following css code :

ul, li{
display: inline-block;
display:inline; /* this fix is needed for IE7- */
}

Basic CSS Tutorial  UL OL & LI List Style Type Position Image and Horizontal Property
Tutorial about css code for ul, ol and li list has been completed since all the points of each list style properties has we discussed. I hope this tutorial is easy to understand so that can help you learn about css list style.
Thank you for reading Basic CSS Tutorial : UL OL & LI List Style Type, Position, Image, and Horizontal Property

[Tutorial.World.Edu]

3 thoughts on “Basic CSS : UL OL & LI List Style Type, Position, Image, & Horizontal Property

  1. Pingback: How To Create A Headline News Slideshow For Website Using jQuery & HTML | Online Website Design Tutorials

Add Comment Register



Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>