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

Nicolaus(I) Bernoulli

1687 - 1759

Nicolaus Bernoulli (I) was the first Nicolaus in the illustrious family dynasty of Bernoulli mathematicians in Basel, Switzerland, in the 17th and 18th centuries.

Rewewable Media

Quote of the day...

"There is no room for demons when you are self-possessed."

ZumGuy Internet Promotions

Vitruvian Boy