CoderShot

Rate this post

CSS Lists

By using CSS (Cascading Style Sheets), lists can be styled, giving you control over how they look and are laid out.

Introduction to CSS Lists

An organized webpage can be created by using the List property in CSS, which describes how the contents or objects are listed in an orderly or unorderly manner.

Because it is versatile and manageable, it may be used for organizing large amounts of content.

NOTE*: For the list, borderless is the default style.

Control Over Lists In CSS

We have good control over the browser’s re-rendering of the lists through the use of CSS. Using it, we may perform the following kinds of control over the list:

  • For lists that are ordered, use distinct list item markers.
  • For unordered lists, use distinct list item markers.
  • Use a picture to represent the list item.
  • List items can have background colors added to them.

Types of CSS Lists

There are two basic kinds of lists in HTML:

1. Unordered List <ul>: In HTML, an unordered list, or <ul> is a list of items that are displayed without a set order.

It is usually indicated with bullets.

For unordered list, list-style-type are:

  • Disc
  • Circle
  • Square

NOTE*: For unordered lists, the default marker shows a disc.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS LISTS</title>
</head>
<body>
  <h1>CSS LISTS</h1>
  <h2>Unordered Lists</H2>
    <ul>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
      <li>Fourth</li>
    </ul>
</body>
</html>

Output:

2. Ordered List<ol>: In HTML, ordered lists, or <ol> are used to display elements in an organized manner.

It is usually indicated with letters and numbers.

For ordered list, list-style-type are:

  • Decimal Number(1, 2, 3, etc.)
  • Decimal-leading-zero(01, 02, 03, etc.)
  • Lowercase Roman Numerals(i, ii, iii, etc.)
  • Uppercase Roman Numerals(I, II, III, etc.)
  • Uppercase Alphabetical Characters(A, B, C, etc.)
  • Lowercase Alphabetical Characters(a, b, c, etc.)

NOTE*: For ordered lists, decimal numerals (1, 2, 3, etc.) are displayed by default in the marker.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS LISTS</title>

</head>
<body>
  <h1>CSS LISTS</h1>
  <h2>Ordered Lists</H2>
    <ol>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
      <li>Fourth</li>
    </ol>
</body>
</html>

Output:

List Item Marker

This property indicates whether the item marker is part of an ordered or unordered list.

  1. List-style-type: The list item element’s list item marker’s look is specified by the list-style-type property.

A disk is the default value for it.

Syntax:

list-style-type: value;
list-style-type: none| disc| circle| square| decimal-leading-zero| decimal| lower-roman| lower-alpha| upper-roman| upper-alpha

Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        ul.a {
            list-style-type: square;
        }
        ul.b{
          list-style-type: circle;
        }
        ol.d {
            list-style-type: lower-roman;
        }
        ol.e{
          list-style-type: decimal-leading-zero;
        }
    </style>
</head>
<body>
    <h2>
        LIST ITEM MARKER
    </h2>
    <p> Unordered lists </p>
    <ul class="a">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li>Fourth</li>
    </ul>
    <ul class="b">
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
      <li>Fourth</li>
  </ul>
  <ul class="c">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
</ul>

    <p> Ordered Lists </p>
    <ol class="d">
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
      <li>Fourth</li>
  </ol>
  <ol class="e">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
</ol>
<ol class="f">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
</ol>
</body>
</html>

Output:

2. List-style-image: An image can be designated as the list item marker using the list-style-image property.

Syntax:

list-style-image: url(link);

Example:

<!DOCTYPE html>
<html>

<head>
    <title> CSS list-style-image Property </title>
    <style>
        ul {
            list-style-image: url("image.png");
        }
    </style>
</head>
<body>
    <h2>
        List Item Marker
    </h2>
    <p> Unordered lists </p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

Output:

3. List-style-position: The list-item markers’ (bullet points’) location is specified by the list-style-position property.

Syntax:

list-style-position: outside| inside;
  • list-style-position: outside;(by default) indicates that the list item will not contain the bullet points. A list item’s beginnings will all be oriented vertically.
  • list-style-position: inside; indicates that the list item will have the bullet points inside of it.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>list-style-position property</title>
<style>
ul.out {
  list-style-position: outside;
}

ul.in {
  list-style-position: inside;
}
</style>
</head>
<body>
<h2>list-style-position: outside (default):</h2>
<ul class="out">
  <li>First - Lorem ipsum, dolor sit amet consectetur adipisicing elit.<br> Dignissimos tempora iste est eligendi. Suscipit consequuntur distinctio animi culpa sit! </li>
  <li>Second- Lorem ipsum, dolor sit amet consectetur adipisicing elit. <br>Dignissimos tempora iste est eligendi. Suscipit consequuntur distinctio animi culpa sit!</li>
</ul>

<h2>list-style-position: inside:</h2>
<ul class="in">
  <li>First - Lorem ipsum, dolor sit amet consectetur adipisicing elit.<br> Dignissimos tempora iste est eligendi. Suscipit consequuntur distinctio animi culpa sit!</li>
  <li>Second- Lorem ipsum, dolor sit amet consectetur adipisicing elit. <br>Dignissimos tempora iste est eligendi. Suscipit consequuntur distinctio animi culpa sit!</li>
</ul>
</body>
</html>

Output:

4. List-style: Shorthand properties include the list-style property. It is employed to set every list property in a single declaration.

Syntax:

list-style: value;

Example:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style: square inside url("image.png");
}
</style>
</head>
<body>

<h2>The list-style Property</h2>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
</body>
</html>

Output:

CSS Lists Properties

PROPERTYDESCRIPTIONVALUE
list-style-typedescribes the kind of marker for a list item.square, circle, disc, and none
list-style-imagedesignates a picture as the marker for the list item.none, url(‘path/to/image.png’).
list-style-positiondescribes where the list-item markers (numbers or bullet points) should be placed.outside, and inside
list-styleFor defining list-style-type, list-style-image, and list-style-position, use the shortcut property.square outside, disc inside, url(‘path/to/image.png’)
The features listed above give users complete control over how lists appear and behave in HTML texts.

0 0 votes
Course Rating

Share:

More Posts

Send Us A Message

A Simple Calculator in C: Understanding Basic Operations

A Simple Calculator in C: Understanding Basic Operations

In the world of programming, creating a calculator or menu-driven program is a rite of passage for many beginners. It’s …

Read more

Swapping Variables in C: A Beginner’s Guide

Swapping Variables in C: A Beginner’s Guide

In the world of programming, the need of swapping variables is a common occurrence. Whether you’re working on a simple …

Read more

Understanding Post-Decrement and Pre-Decrement in C Programming

Understanding Post-Decrement and Pre-Decrement in C Programming

In this blog post, we’ll explore the difference between post-decrement and pre-decrement using a simple C code example. C programming …

Read more

0
Would love your thoughts, please comment.x
()
x