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 © Renewable.Media. All rights reserved. Created : November 3, 2014 Last updated :February 14, 2016

Latest Item on Science Library:

The most recent article is:

Trigonometry

View this item in the topic:

Vectors and Trigonometry

and many more articles in the subject:

Subject of the Week

Environment

Environmental Science is the most important of all sciences. As the world enters a phase of climate change, unprecedented biodiversity loss, pollution and human population growth, the management of our environment is vital for our futures. Learn about Environmental Science on ScienceLibrary.info.

Environmental Science

Great Scientists

John Sulston

1942 -

John Sulston, born 1942, is an English biologist and geneticist, most well-known for the first animal genome sequencing (nematode), and winning the race to sequence the human genome, ensuring it would remain a public property legacy.

John Sulston
Rewewable Media

Quote of the day...

Wall Street indices predicted nine out of the last five recessions!

Renewable.Media Internet Promotions

SaraOrdine