CSS Lists



There are different CSS properties to control lists.These HTML lists can be classified as ordered lists and unordered lists.

ordered lists marking with alphabets and numbers.unordered lists marking with bullets and dots.

Types of CSS List-style Properties

CSS list-style-type property

Example

<!DOCTYPE html>
    <html>
    <head>
    <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>
    


Click on the "Run This Code" button to see how it works.

CSS list-style

Example

<html>
    <head>
    </head>
    
    <body>
       <ul style ="list-style: inside square;">
          <li>Maths</li>
          <li>Social Science</li>
          <li>Physics</li>
       </ul>
       
       <ol style ="list-style: outside upper-alpha;">
          <li>Maths</li>
          <li>Social Science</li>
          <li>Physics</li>
       </ol>
    
    </body>
 </html>
 


Click on the "Run This Code" button to see how it works.

CSS list-style-position

Example

<!DOCTYPE html>
    <html "en">
    <head>
    <title>Setting the Position of List Marker</title>
    <style>  
        body{
            font-size: 14px;
            font-family: Arial,sans-serif;
        }
        ol li {
            background: pink;
            padding: 5px;
            margin: 5px;
        }
        ol.my li {
            list-style-position: inside;
        }
        ol.person li {
            list-style-position: outside;
        }
    </style>
    </head>
    <body>
        <h2>List Marker Position - Inside</h2>
        <ol class="my">
            <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="person">
            <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>
    


Click on the "Run This Code" button to see how it works.

CSS list-style-image

Example

<!DOCTYPE html>
    <html>
    <head>
    <title>Setting an Image as List Marker with CSS</title>
    <style>
        ul li {
            list-style-image: url("code.png");
            margin: 5px;
        }
    </style>
    </head>
    <body>
        <h2>Using Image as Bullet Point</h2>
        <ul>
            <li>List Item 1</li>
            <li>List Item 2</li>
            <li>List Item 3</li>
        </ul>
    </body>
    </html>
    


Click on the "Run This Code" button to see how it works.

CSS list-style-offset

Example

<html>
    <head>
    </head>
    <body>
       <ul style ="list-style: inside square; marker-offset:2em;">
          <li>list one</li>
          <li>list two</li>
          <li>list three</li>
       </ul>
       
       <ol style ="list-style: outside upper-alpha; marker-offset:2cm;">
          <li>list one</li>
          <li>list two</li>
          <li>list three</li>
       </ol>
    </body>
 </html>
 


Click on the "Run This Code" button to see how it works.




CSS

Welcome CSS Syntax CSS Selectors CSS ADD css CSS Borders CSS Backgrounds CSS Colors CSS Padding CSS Margin CSS Fonts CSS Text CSS Outline CSS Box-Model CSS Height&Width CSS Icons CSS Links CSS Lists CSS Display CSS Tables CSS Position CSS Overflow CSS Align CSS Float CSS Inline-block CSS Opacity CSS Image-Gallery CSS Navigation Bar CSS Dropdowns CSS Cursors CSS Forms CSS Pseudo-classes CSS Pseudo-elements

CSS3 FEATURES

CSS Gradients CSS shadows CSS 2D Transforms CSS 3D Transforms CSS Animations CSS Media Queries CSS Flexbox CSS important CSS Units