34. CSS styling lists in English

HTML and CSS tutorial for beginners in English

Hello friends, welcome again to KTL's HTML and CSS tutorial. Today we will study lesson-34.

In our previous lesson we have studied about CSS box shadow property.

Today we will study CSS list properties and learn how to apply styles to lists.

CSS list properties

We have already seen how to display lists in a web page. We have studied ordered lists and unordered lists in lesson-11. Also, we have studied description lists and nested lists in lesson-12. Today we will see how we can use CSS properties and make lists more impressive.

There are some CSS list properties by using which we can apply styles to our lists. These properties are discussed below:

CSS list properties

1. CSS list-style-type property

This property is used to specify the type of list markers displayed. There are different types of list markers like circle, square, upper-alpha, lower-alpha, upper-roman, lower-roman and so on. This property has other values also. Syntax for writing this property is

list-style-type: lower-alpha;

2. list-style-image property

Using this property we can use an image as a list marker. Its syntax is as follow:

list-style-image: url("image name");

3. list-style-position property

This property is used to specify position of item markers. Item markers can be displayed inside the list items or outside the list items of a list. This property is written as follows:

list-style-position: inside, or list-style-position: outside;

We can also apply other CSS properties to lists. We can use CSS margin, CSS padding and so on for lists. Using CSS background color property we can apply background color to lists.

We can specify these properties at any level of lists. For instance, if we specify these properties for <ul> or <ol> then these are applied to whole lists.

For example,

ol {
  background: blue,
  margin-left: 5vw;
  padding: 2vw;
  }

Let us write CSS styles for lists in our script. Open a new Notepad file. Copy all code from Lesson-11 in this file. Under style write following:

<style>
ol.a {
  list-style-type: lower-alpha;
  list-style-position: outside;
  background: #DAA520;
  padding: 2vw;
  }

ol li {
  background: #FFD700;
  margin-left: 8vw;
  padding: 1vw;
 }
</style>

In this code we have defined different backgrounds for ol.a and ol.li. We know all these properties, read them carefully and understand them.

Save this file as "Lesson-34" and "Lesson-34.html". Click on figure 34-1 for PDF file of source code.

Figure 34-1 CSS styles for lists

From Windows explorer double click on Lesson-34.html. See the output. To see this list in a web page click on figure 34-2.

Figure 34-2 CSS styles for lists

We can see that the style that we have specified is applied to the list.

CSS list style property

This property is used to specify more than one styles in a single  property. For example,

ul {
  list-style: square inside;
}

Important Points:

1. CSS list properties are used to apply styles to lists.
2. We can display different types of item markers and we can define position of item markers using CSS list properties.
3. We can apply other CSS properties to lists like CSS margin, CSS padding and so on.
4. We can specify more than one CSS properties a single CSS property namely CSS list-style property.

Lesson-33                                                             Lesson-35