Quick Contact

    CSS Lists

    Types of HTML Lists

    In HTML, there are three different list types:

    • Unordered lists —

      A list of things, each item in the list denoted by a bullet.

    • Ordered lists —

      A list of things with numbers next to each item in the list.

    • Definition list —

      A list of things, each with a description.

    For further information on lists and how to make them, see the HTML lists tutorial.

    Styling Lists with CSS

    The most popular sorted and unordered lists can be styled and formatted using a variety of CSS features. Typically, these CSS list properties allow you to:

    • Control the marker’s form or appearance.
    • Instead of a bullet point or number, specify an image for the marker.
    • Decide how far a marker should be from the list’s text.
    • Give specific instructions as to whether the marker should appear inside or outside the box containing the list elements.

    Changing the Marker Type of Lists

    In an ordered list, elements are by default marked with round bullets (•), while in an unordered list, items are numbered using Arabic numerals (1, 2, 3, 5, and so on).

    However, you may use the list-style-type property to switch this default list marker type to any other kind, including roman numerals, latin characters, circles, squares, and more.

    To learn how this attribute truly functions, let’s try out the following example:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Setting Numbering or Bullet Point Style of Lists< /title>
    < style>
    ul {
    list-style-type: square;
        }
    ol {
    list-style-type: upper-roman;
        }
    < /style>
    < /head>
    < body>
    < h2>Unordered List< /h2>
    < ul>
    < li>List Item 1< /li>
    < li>List Item 2< /li>
    < li>List Item 3< /li>
    < /ul>
    < h2>Ordered List< /h2>
    < ol>
    < li>List Item 1< /li>
    < li>List Item 2< /li>
    < li>List Item 3< /li>
    < /ol>
    < /body>
    < /html>
    

    Changing the Position of List Markers

    Every list item’s markers are initially placed outside of their respective display boxes.

    However, you can also use the value inside and the list-style-position property to put these markers or bullet points inside the list item’s display boxes. In this instance, the lines will not be indented but rather wrap around the marker.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Setting the Position of List Marker< /title>
    < style>
    body{
    font-size: 14px;
    font-family: Arial,sans-serif;
        }
    ol li {
    background: #ddd;
    padding: 5px;
    margin: 5px;
        }
    ol.in li {
    list-style-position: inside;
        }
    ol.out li {
    list-style-position: outside;
        }
    < /style>
    < /head>
    < body>
    < h2>List Marker Position - Inside< /h2>
    < ol class="in">
    < li>Fasten your seatbelt< /li>
    < li>Start the car's engine and take a closer look the instrument cluster for any warning sign< /li>
    < li>Look around carefully and go< /li>
    < /ol>
    < h2>List Marker Position - Outside< /h2>
    < ol class="out">
    < li>Fasten your seatbelt< /li>
    < li>Start the car's engine and take a closer look the instrument cluster for any warning sign< /li>
    < li>Look around carefully and go< /li>
    < /ol>
    < /body>
    < /html>
    

    Using Images as List Markers

    Additionally, you may use the list-style-image property to set an image as a list marker.

    The unordered list’s elements are all given a transparent PNG image named “arrow.png” as the list marker by the style rule in the example below. Let’s give it a go and see how it functions:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Setting an Image as List Marker with CSS< /title>
    < style>
    ul li {
    list-style-image: url("/examples/images/bullet.png");
    		margin: 5px;
        }
    < /style>
    < /head>
    < body>
    < h2>Using Image as Bullet Point< /h2>
    < ul>
    < li>Step 1< /li>
    < li>Step 2< /li>
    < li>Step 3< /li>
    < /ul>
    < /body>
    < /html>
    

    The list-style-image property may occasionally fail to deliver the desired results. For more control over the placement of image markers, use the following technique as an alternative.

    You can also set image bullets using the background-image CSS property as a workaround. Set the list’s first option to “no bullets.” Define a unique background image for the list element after that.

    The picture markers are displayed uniformly in all browsers in the example below:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Setting Image Marker in Background with CSS< /title>
    < style>
    ul {
    list-style-type: none;
        }
    ul li {
    background-image: url("/examples/images/bullet.png");
    background-position: 0px 3px;
    background-repeat: no-repeat;
    padding-left: 20px;
    margin: 5px
        }
    < /style>
    < /head>
    < body>
    < h1>Using Image as Bullet Point< /h1>
    < ul>
    < li>Step 1< /li>
    < li>Step 2< /li>
    < li>Step 3< /li>
    < /ul>
    < /body>
    < /html>
    

    Setting All List Properties At Once

    List-style is a shorthand property that defines all three of a list’s properties—list-style-type, list-style-image, and list-style-position—in a single location.

    The next characteristic defines each list property in a single declaration.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>CSS list-style Shorthand Property< /title>
    < style>
    ul {
    list-style: square inside url("/examples/images/bullet.png");
    background: #9ddfef;
        }
    ul li {
    background: #ededed;        
    margin: 5px 0;
    padding: 5px;
        }
    < /style>
    < /head>
    < body>
    < h2>The< code>list-style< /code> Shorthand Property< /h2>
    < ul>
    < li>Step 1< /li>
    < li>Step 2< /li>
    < li>Step 3< /li>
    < /ul>
    < /body>
    < /html>
    

    Note:

    List-style shorthand property values are arranged in the following order: list-style-type | list-style-position | list-style-image. As long as the remaining values are in the designated order, it is irrelevant if one of the mentioned values is absent.

    Creating Navigation Menus Using Lists

    The horizontal menu or navigation bar that generally appears at the top of a page is frequently made with HTML lists. However, because the list items are block elements, we must employ the CSS display property in order to display them inline. Let’s use an example to demonstrate how it actually functions:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Building Navigation Bar with HTML List and CSS< /title>
    < style>
    body{
    font-size: 14px;
    font-family: Arial,sans-serif;
        }
    ul {
    padding: 0;
    list-style: none;
    background: #f2f2f2;
        }
    ul li {
    display: inline-block;
        }
    ul li a {
    display: block;
    padding: 10px 25px;
    color: #333;
    text-decoration: none;
        }
    ul li a:hover {
    color: #fff;
    background: #939393;
        }
    < /style>
    < /head>
    < body>
    < nav>
    < ul>
    < li>< a href="#">Home< /a>< /li>
    < li>< a href="#">Courses< /a>< /li>
    < li>< a href="#">Gallary< /a>< /li>
    < li>< a href="#">Services< /a>< /li>
    < li>< a href="#">About us< /a>< /li>
    < li>< a href="#">Contact< /a>< /li>
    < /ul>
    < /nav>
    	< p>< strong>Note:< /strong> Place mouse pointer over the menu link to see the hover effect.< /p>
    < /body>
    

    FAQS

    Q1. What does list-style do in CSS?

    The appearance, positioning, and image for list item elements are specified by the CSS list-style property. It is an abbreviation for the CSS attributes list-style-type, list-style-position, and list-style-image.

    Q2. What is target _blank in CSS?

    A specific keyword called target=” blank” will always open links in a new tab. The first link clicked with target=”blank” will open in a new tab, but any subsequent links clicked with target=”blank” will open in the same tab.

    Q3. How do we make a list in CSS in one line?

    Giving the < li> elements a display property value of inline or inline-block is the easiest way to display a list on a single line. By doing this, each < li> element is positioned on its own line, separated by a single space.

    Copyright 1999- Ducat Creative, All rights reserved.

    Anda bisa mendapatkan server slot online resmi dan terpercaya tentu saja di sini. Sebagai salah satu provider yang menyediakan banyak pilihan permainan.