CSS Lesson 8: List

0
14

Introduction to CSS List

Here’s another exciting CSS lesson for you! Have you ever wondered how web developers come up with such elegant and complex navigation bars? If so, this lesson will enlighten you!

In this lesson, you’ll learn how to add images to the list instead of default shapes e.g. square, circle, alpha, roman etc . We’ll also teach you how to position the list items. But before starting the FUN, let’s quickly revisit the List lesson of HTML.

Add Image

A list can be ordered or unordered. Ordered lists have uppercase and lowercase Alpha and Roman text, while unordered lists contain shapes like squares, circles, and discs. In CSS, you can replace the HTML List of shapes to images. It doesn’t matter whether you use the ordered list or unordered list type. Cool, isn’t it?

Source Code Output

 

  • List item 1
  • List item 2
  • List item 3
  1. List item 1
  2. List item 2
  3. List item 3

 

 

As you can see, we used images on both the ordered list items and unordered list items. Fun!

[tooltip]You might be wondering how to define the list item as a selector in CSS. First, you have to define the main element and then move on to lower one. For example, you want to style the <li> of <ul> which is within a <div> navigation bar with id=”navbar”. First you will define the div id, then ul and then li.[/tooltip] Here is the syntax of it

Adding shapes

Suppose you want to use the default shapes of <ul> for <ol> and vice versa. You need to define a class for it in side <ul> and <ol> then use list-style-type property. Here’s a demonstration of it:

Source Code Output

  • List item 1
  • List item 2
  • List item 3
  1. List item 1
  2. List item 2
  3. List item 3

List Position

The last property of CSS list-style is list-style-position. To define the indentation of list items, you will use list-style-position. You can define the list position as outside and inside. Like this:

Source Code Output
  • List item 1
  • List item 2
  • List item 3
  1. List item 1
  2. List item 2
  3. List item 3

List Style Shorthand

Let’s apply the shorthand technique in list-style, just like you did in Font and Background. Here is the sequence of it.

  • list-style-type
  • list-style-position
  • list-style-image
Not Combined Combined

Summary

  • Use the CSS list-style property to design ordered and unordered list items.
  • Set shapes with the list-style-shape property.
  • Use images instead of shapes with the list-style-image property.
  • Position list items with the list-style-position property.

Next Lesson

In the next lesson you will learn how to style the Tables.

Horizontal and Vertical Navigation bar

As promised, here’s the snippet of Horizontal and Vertical Navigation bar styling with CSS list-style property.

 

Leave a Reply