CSS – Lists

  • CSS – Lists

    • CSS – Lists Lesson

      Using CSS; various designing lists can be printed as per type, style, position and offset. The various properties are as below,

      • List-style-type: it specifies the shape or type of the marker like circle, square, decimal, disc, etc.

      • List-style-position: it specifies whether the market can locate outside or inside of the list.

      • List-style-image: it specifies an image of the marker rather than number or bullet.

      • Marker-offset: it specifies the distance between text and the marker of the list.

      • List-style: it sets various properties of lists in one statement.



      Example:

      <html>

         <head>

         </head>

            <body>

            <ul style = "list-style-type:circle; list-stlye-position:outside;">

               <li>HTML</li>

               <li>CSS</li>

               <li>Python</li>

            </ul>

               <ul style = "list-style-type:square;list-style-position:inside;">

               <li>PC</li>

               <li>Laptop</li>

               <li>Notebook</li>

            </ul>

              <ol style = "list-style-type:decimal;list-stlye-position:outside;">

               <li>Kolkata</li>

               <li>Madras</li>

               <li>Bangalore</li>

            </ol>

               <ol style = "list-style-type:lower-alpha;list-style-position:inside;">

               <li>Physics</li>

               <li>Chemistry</li>

               <li>Math</li>

            </ol>

            <ul style = "list-style: inside square; marker-offset:2em;">

               <li>Outstanding</li>

               <li>Excellent</li>

               <li>Good</li>

            </ul>

             <ol style = "list-style: outside upper-alpha;">

               <li>PHP</li>

               <li>ASP</li>

               <li>JSP</li>

            </ol>

             <ol>

               <li style = "list-style-image: url(listimg.jpg);">Maths</li>

               <li>Social Science</li>

               <li>Physics</li>

            </ol>

         </body>

      </html>



      Output:


      Quiz :

      Quiz 1: What are the various properties used in printing lists using CSS?

      Quiz 2: How can you set all types of lists in one declaration? Give examples.


CSS – Margins
CSS – Padding