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.com. 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

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

Ernst Weizsäcker

1939

Ernst Ulrich von Weizsäcker, b. 1939, is a prominent German scientist and politician. He is a popular author, with best-selling books like 'Factor Four', the update to the Club of Rome 'Limits to Growth', which explains how a sustainable economy requires reductions in consumption and increases in efficiency of this order of magnitude.

Ulrich von Weizsäcker, German environmentalist
Umwelt.Science

Quote of the day...

If your experiment needs statistics, you ought to have done a better experiment.

ZumGuy Internet Promotions

Renewable energy media services