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

Resources

Science resources on ScienceLibrary.info. Games, puzzles, enigmas, internet resources, science fiction and fact, the weird and the wonderful things about the natural world. Have fun while learning Science with ScienceLibrary.info.

Science

Great Scientists

Paul Dirac

1902 - 1984

Paul Dirac is a leading figure in 20th century physics. His Dirac Equation describes fermions and predicted the existence of anti-matter, winning him a Nobel Prize in 1933.

Paul Dirac
Rewewable Media

Quote of the day...

Facts do not cease to exist because they are ignored.

ZumGuy Internet Promotions

IT information forum by Sean Bone