CSS3 > Lists

Lists in CSS3

How to apply style to the lists in CSS3?


Lists

Lists are very helpful in conveying a set of either numbered or bullet points. This chapter teaches you how to control list type, position, style, etc., using CSS.

There are different types of lists they are ordered list and numbered list

 <p>Bullet lists with style</p>
    <ol style="list-style-type:circle">
        <li>Orange</li>
        <li>Mango</li>
        <li>Apple</li>
    </ol>

In the above code snippet we have list style as circle which defines the list with circle

output

List with square

Square in the list box is used to add the square box shape to the lists

 <p>Bullet lists with square</p>
    <ol style="list-style-type:square">
        <li>Orange</li>
        <li>Mango</li>
        <li>Apple</li>
    </ol>

List Square

In the above code snippet we have list style as square which defines the list with square

output

List with upper roman

Upper roman numbers in the lists creates the list with roman numbers in upper case letters 

<p>Lists with upper roman</p>
    <ol style="list-style-type:upper-roman">
        <li>Orange</li>
        <li>Mango</li>
        <li>Apple</li>
    </ol>

List with upper roman

In the above code snippet we have list style as upper roman which defines the list with upper roman

output

List with lower roman

Lower roman numbers in the lists creates the list with roman numbers in lower case letters

<p>Lists with Lower roman</p>
    <ol style="list-style-type:lower-roman">
        <li>Orange</li>
        <li>Mango</li>
        <li>Apple</li>
    </ol>

List with lower roman

In the above code snippet we have list style as lower roman which defines the list with lower roman numbers

output

Lists with lower greek

by using greeks in the lists, it adds the style alpha, bet and gamma values in the list

<p>Lists with Lower greek</p>
    <ol style="list-style-type:lower-greek">
        <li>Orange</li>
        <li>Mango</li>
        <li>Apple</li>
    </ol>

Lists with lower greek

In the above code snippet we have defined the lists with lower greek which defines the lists with alpha, beta and gamma values  

output

Lists with image 

Image in the lists are uses to create the image to the lists 

<style>
    ul {
        list-style-image:url('tumb.jpg');
    }
</style>
</head>

<body>
    <ul>
        <li>mango</li>
        <li>techfunda</li>
        <li>orange</li>
    </ul>
</body>

 List with image

In the above code snippet we have defined the list with image we have taken the image in ul and we have given the li values in the ul, where the image in the ul applies for all the values in the li

output

List style position

Style position in the list creates the list inside or outside of the content of the webpage 

<style>
    ul.a {
        list-style-position:inside;
    }
    ul.b{
        list-style-position:outside;
    }
</style>
</head>
<body>
    <p> lists with inside and outside </p>
    <ul class="a">
        <li>mango</li>
        <li>apple</li>
        <li>orange</li>
    </ul>
    <ul class="b">
        <li>techfunda</li>
        <li>dotnetfunda</li>
        <li>itfunda</li>
    </ul>
</body>

List style position

In the above code snippet we have define the lists style position to define inside or out side of the content

  • ul.a("inside") = It defines the content inside  
  • ul.b("ouitside") =It defines the outside the content

output

List with disc

Disc shape in the list creates the disc shape or circle with dark black color to the list 

 <p><i>Lists with disc shape </i></p>
    <ul style="list-style:disc">
        <li>mango</li>
        <li>banana</li>
    </ul>

Lists with disc

In the above code snippet we have defined the lists with disc defines the lists with disc shape

output

 Views: 1142 | Post Order: 116



Write for us