Science Library - free educational site

Styling Lists

Lists

unordered lists

Lists can be styled via the full list tag: <ul> means 'unordered list', which will create a list without any system of ordinal numbering of the list items.

<ul style="list-style-type:disc">My favourite scientists:

<li>Einstein, Albert</li>

<li>Newton, Isaac</li>

<li>Bohr, Niels</li>

<ul>

The above code results in the display:

    My favourite scientists:
  • Einstein, Albert
  • Newton, Isaac
  • Bohr, Niels

Alternative list item symbols are: circle, square, none (default).

ordered lists

An ordered list is one that provides automatically an ordinal numbering, or equivalent lettering sequence, of the list items. Ordered lists can be styled via the full list tag: <ol>.

<ol type="1">My favourite scientists:

<li>Einstein, Albert</li>

<li>Newton, Isaac</li>

<li>Bohr, Niels</li>

<ol>

The above code results in the display:

    My favourite scientists:
  1. Einstein, Albert
  2. Newton, Isaac
  3. Bohr, Niels

type="1" is default. Alternative list item symbols are: type="A" (capital letters), type="a" (lowercase letters), type="I" (large Roman numerals), type="i" (lowercase Roman numerals).

e.g. type="i":

    My favourite scientists:
  1. Einstein, Albert
  2. Newton, Isaac
  3. Bohr, Niels

lists of lists

A list may also include lists as items.

<ul>My favourite scientists:

<li>Einstein, Albert</li>

<ol>

<li style="text-indent:20px;">Relativity (space-time continuum)</li>

<li style="text-indent:20px;">Electromagnetic theory (Nobel Prize 1921)</li>

<li style="text-indent:20px;">Brownian Motion (proof of the existence of atoms)</li>

<li style="text-indent:20px;">Mass-energy equivalence (E = mc2)</li>

</ol>

<li>Newton, Isaac</li>

<ul style="list-style-type:circle">

<li style="text-indent:20px;">3 Laws of Motion</li>

<li style="text-indent:20px;">Laws of Optics</li>

<li style="text-indent:20px;">Differential calculus</li>

<li style="text-indent:20px;">Reflector telescope</li>

</ul>

<li>Bohr, Niels</li>

<ul style="list-style-type:square">

<li style="text-indent:20px;">Atomic model</li>

<li style="text-indent:20px;">Copenhagen interpretation of quantum reality</li>

</ul>

<ol>

The above code results in the display:

    My favourite scientists:
  • Einstein, Albert
    1. Relativity (space-time continuum)
    2. Electromagnetic theory (Nobel Prize 1921)
    3. Brownian Motion (proof of the existence of atoms)
    4. Mass-energy equivalence (E = mc2)
  • Newton, Isaac
    • 3 Laws of Motion
    • Laws of Optics
    • Differential calculus
    • Reflector telescope
  • Bohr, Niels
    • Atomic model
    • Copenhagen interpretation of quantum reality

    description lists

    Another type of list, with different attribute tags, is list which includes descriptions:

    <dl>My favourite scientists:

    <dt>Einstein, Albert</dt>

    <dd>1879 - 1955, who changed science forever with his Theories of Special and General Relativity</dd>

    <dt>Newton, Isaac</dt>

    <dd>1643 - 1721, who laid down the laws of Classical Physics</dd>

    </dl>

    The above code prints out:

    Einstein, Albert
    1879 - 1955, who changed science forever with his Theories of Special and General Relativity
    Newton, Isaac
    1643 - 1721, who laid down the laws of Classical Physics

    Content © Andrew Bone. All rights reserved. Created : November 3, 2014 Last updated :February 14, 2016

Latest Item on Science Library:

The most recent article is:

Fission

View this item in the topic:

Nuclear and Particle Physics

and many more articles in the subject:

Subject of the Week

Computing

Information Technology, Computer Science, website design, database management, robotics, new technology, internet and much more. JavaScript, PHP, HTML, CSS, Python, ... Have fun while learning to make your own websites with ScienceLibrary.info.

Computer Science

Great Scientists

Lise Meitner

1878 - 1968

Lise Meitner was an Austrian physicist who worked with Otto Hahn for 30 years, and helped discover an explanation for the nuclear decay of uranium in 1938, which started the modern nuclear industry.

Lise Meitner, 1878 - 1968, Austrian physicist
Vitruvian Boy

Quote of the day...

Relationships are a lot like algebra: have you never looked at your X and wondered Y?

ZumGuy Internet Promotions

SaraOrdine