Stratigraphy stylesheet

When preparing my post on the human arm as a geological timescale I looked up the colours for my table from the ICS’s International Stratigraphic Chart. This colour scheme is in turn based on the International Geological Map of the World. The ICS offers both the “official” CMYK and the corresponding RGB colour codes for download; the CGMW also has a table with CMYK, RGB and others.

During writing I realised that a stylesheet with these colour definitions might come in handy for future use(r)s.

Here it is: stratigraphy.css – from Hadean to Neogene.

Up to now, I have compiled background colours for the stratigraphic units down to the “period/system” level.

Update (11.01.10): In the meantime, I have extended the stylesheet with Cenozoic and Mesozoic epochs and Cretaceous ages.


Download the CSS file and make your web site include it by putting an appropriate <link> entry in the HTML head:

<link rel="stylesheet" href="stratigraphy.css">

Of course, the path in href has to point to where the file really is.

After that, using the styles is rather simple; just put the name of the stratigraphic unit in the class attribute, e.g. in a <td> or <span> element.

I have also specified a light grey text colour for the rather dark units, e.g. the Triassic. Otherwise, no text colour is defined; the backgrounds work best with black text.

For some units, there are alternative definitions where ICS and CGMW definitions disagree, e.g. jurassic and jurassic-cgmw. This is probably due to different colour management settings when they converted CMYK to RGB, and the difference is rather small in most cases. For Cambrian, Triassic, Jurassic, Cretaceous and Quaternary, however, the difference is noticeable.


Small stratigraphic table

Periods of the Mesozoic:

Mesozoic Cretaceous

<table cellpadding="6">
    <td rowspan="3" class="mesozoic">Mesozoic</td>
    <td class="cretaceous">Cretaceous</td>
    <td class="jurassic">Jurassic</td>
    <td class="triassic">Triassic</td>

Full stratigraphic table

This example table shows all defined colours.

Inline text (probably not very useful)

Little nonsense text:

Some names of the Proterozoic periods are quite well known, like the Ediacaran, whereas others are rather obscure, e.g. the Orosirian.

Some names of the <span class="proterozoic"​>Proterozoic</span> periods are quite well known, like the <span class="ediacaran"​>Ediacaran</span>, whereas others are rather obscure, e.g. the <span class="orosirian">Orosirian</span>.

Comment 1

  1. Lost Geologist 30 ⟨ 25 Nov 2008, 08:29 PM | #  ⟩

    Das ist eine interessante Idee! 🙂

Post a Comment

Your email is never published nor shared. Required fields are marked *

This blog is kept spam free by WP-SpamFree.