CSS Lists

Lists are used to group together related pieces of information so they are clearly associated with each other and easy to read. There are three list types in HTM Ordered list and unordered list. We can also customize the list with CSS list properties, which are as follows :

list-style-type : The list-style-type property allows us to control the shape and style of bullet point or marker. In case of unordered list the values are :

none : not show any marker
disk : A filled-in circule, it is default value
circle : An empty circle
square : A filled-in square

Example :
<!DOCTYPE html>
<html>
<body>
  <ul style="list-style-type: disk;">
    <li>Disk Bullet</li>
    <li>Disk Bullet</li>
  </ul>
  <ul style="list-style-type: circle;">
    <li>Circle Bullet</li>
    <li>Circle Bullet</li>
  </ul>
  <ul style="list-style-type: square;">
    <li>Square Bullet</li>
    <li>Square Bullet</li>
  </ul>
</body>
</html>
Output :

  • Disk Bullet
  • Disk Bullet
  • Circle Bullet
  • Circle Bullet
  • Square Bullet
  • Square Bullet

And in case of Ordered list the values are :

decimal : Numbers
upper-alpha : Uppercase alphanumeric characters
lower-alpha : Lowercase alphanumeric characters
upper-roman : Uppercase Roman numerals
lower-roman : Lowercase Roman numerals

Example :
<!DOCTYPE html>
<html>
<body>
  <h1>Decimal :</h1>
  <ol style="list-style-type: decimal;">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Mysql</li>
  </ol>
  <h1>Upper-Alpha :</h1>
  <ol style="list-style-type: upper-alpha;">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Mysql</li>
  </ol>
  <h1>Lower-Ulpha :</h1>
  <ol style="list-style-type: lower-alpha;">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Mysql</li>
  </ol>
  <h1>Upper-Roman</h1>
  <ol style="list-style-type: upper-roman;">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Mysql</li>
  </ol>
  <h1>Lower-Roman</h1>
  <ol style="list-style-type: lower-roman;">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Mysql</li>
  </ol>
</body>
</html>
Output :

Decimal :
  1. HTML
  2. CSS
  3. Javascript
  4. PHP
  5. Mysql
Upper-Alpha :
  1. HTML
  2. CSS
  3. Javascript
  4. PHP
  5. Mysql
Lower-Ulpha :
  1. HTML
  2. CSS
  3. Javascript
  4. PHP
  5. Mysql
Upper-Roman
  1. HTML
  2. CSS
  3. Javascript
  4. PHP
  5. Mysql
Lower-Roman
  1. HTML
  2. CSS
  3. Javascript
  4. PHP
  5. Mysql

list-style-position : The list-style-position property specifies the position of the list-item markers or bullet points whether a long point that wraps to a second line should align with the first line or start underneath the start of the marker. There are two possible values outside and inside. With "list-style-position: outside;" the bullet points will be outside the list item and with "list-style-position: inside;" the bullet points will be inside the list item.

Example :
<!DOCTYPE html>
<html>
<body>
  <h1>Web Development :</h1>
  <ul style="list-style-position: outside;">
    <li>Web development broadly refers to the tasks associated with developing websites for hosting via intranet or internet.</li>
    <li> The web development process includes web design, web content development, client-side/server-side scripting. and network security configuration.</li>
    <li>Web development is also known as website development.</li>
  </ul>
  <h1>Web-Testing : </h1>
  <ul style="list-style-position: inside;">
    <li>Web testing is the name given to software testing that focuses on web applications. Complete testing of a web-based system before going live can help address issues before the system is revealed to the public.</li>
    <li>Complete testing of a web-based system before going live can help address issues before the system is revealed to the public.</li>
    <li>A web application performance tool (WAPT) is used to test web applications and web related interfaces.</li>
  </ul>
</body>
</html>
Output :

Web Development :
  • Web development broadly refers to the tasks associated with developing websites for hosting via intranet or internet.
  • The web development process includes web design, web content development, client-side/server-side scripting. and network security configuration.
  • Web development is also known as website development.
Web-Testing :
  • Web testing is the name given to software testing that focuses on web applications. Complete testing of a web-based system before going live can help address issues before the system is revealed to the public.
  • Complete testing of a web-based system before going live can help address issues before the system is revealed to the public.
  • A web application performance tool (WAPT) is used to test web applications and web related interfaces.

list-style-image : The list-style-image specifies an image for the marker rather than a bullet point or number. And for image we need to provide the url of image. Example :
<!DOCTYPE html>
<html>
<body>
  <ul>
    <li style="list-style-image: url('http://www.mycsnotes.com/images/picture.jpg');">HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
  </ul>
  <ol>
    <li style="list-style-image: url('http://www.mycsnotes.com/images/picture.jpg');">PHP</li>
    <li>MySQL</li>
    <li>ASP.Net</li>
  </ol>
</body>
</html>
Output :

  • HTML
  • CSS
  • Javascript
  1. PHP
  2. MySQL
  3. ASP.Net

list-style : The list-style allow us to specify all the list properties into a single expression. And Note that this properties are appear in any order. For example :
<!DOCTYPE html>
<html>
<body>
  <ul style="list-style: square inside;">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
  </ul>
  <ol style="list-style: decimal outside;">
    <li>PHP</li>
    <li>MySQL</li>
    <li>ASP.Net</li>
  </ol>
</body>
</html>
Output :

  • HTML
  • CSS
  • Javascript
  1. PHP
  2. MySQL
  3. ASP.Net


Next Topic :