The eLML CSS Guide

Some general remarks about eLML and CSS

Since the start of the project in 2004 eLML has been building on CSS (Cascading Style Sheets). With the launch of eLML 3.0 in April 2006 the "core" files have changed to fully support CSS and even use custom CSS classes defined by the projects themselves. All the CSS definitions are made in the elml.css file located within the corresponding templates folder. In eLML there are structural elements like "clarify", "look" and "act" parts of a learningObject and there are content elements like "table", "box" or "paragraph". The latter can be overridden by the @cssClass attribute of these elements. The available list of @cssClass attribute values is defined within the _config/validate.xsd file of the project and should not be changed by the author. It is imperative that the project defines as a whole if they want to use custom CSS classes and if so, how these classes will be named. Then the designer can do the implementation of these classes. But remember that each eLML element already is assigned to a CSS class (usually named the same as the element name). So customized CSS classes would only make sense if e. g. you want two or three different representations of a <box> element. But if all your boxes should look the same, than you can just use the "box" CSS class an define it as you like. Here is an example:

<box>Hello World!</box>

within your eLML XML file will be transformed in your XHTML document as follows:

<div class="box">Hello World!</div>

Now let's say you define your own CSS class called "fancylooking" and you use it for your box:

<box cssClass="fancylooking">Hello World!</box>

then the code of your XHTML document would look like this:

<div class="fancylooking">Hello World!</div>

Of course all other "box" (or any other content element) elements without the @cssClass attribute will still all be assigned to the "box" CSS class.

Content elements that can be overridden by the cssClass attribute (mostly content elements):

The following elements will all have the possibility to define a "cssClass" attribute to override the default CSS class. If this attribute isn't used, then the elements' name is used as a CSS class in the final XHTML document (as illustrated above).

box: Used for the DIV tag that defines the box. The title is also inside this box.
citation: A citation is always surrounded by a SPAN tag of that class. If a citation is shown inline or as paragraph, it is defined by the transformation using display:inline or display:block respectively. Within the citation text itself the citation is in italics using the I tag. The link to the bibliography has the CSS class "bibLink" assigned.
column: Defines the TABLE tag that is used for a two or three column layout. Each column (TD tag) can have its own class. If not, the default CSS classes are named after the element (so: columnLeft, columnMiddle and columnRight)
columnLeft, columnMiddle and columnRight: The TD tag that is used to display a two or three column (including columnMiddle) layout.
item, itemAlt: Defines the LI list item of a list. If no @cssClass is defined, the LI classes are named alternating "itemAlt" and "item".
link_table: If a link is displayed as paragraph, then a TABLE with this CSS class is used (e.g. to generate download link tables).
link: Used for the anchor A tag in both the paragraph and the inline display. If a paragraph display is used, then the table that displays the download links has the CSS class "link_table".
list: Defines either an OL or a UL tag depending on the @listStyle attribute of the list element.
multimedia: The multimedia element itself (IMG, OBJECT or APPLET tag) gets this CSS class.
paragraph: The P tag of a paragraph uses this CSS class.
popup, popupTitle: The popupTitle CSS class is used for the sentence the student clicks on to view the solution (usually the question defined in the @title attribute of the popup together with a default "click here" text in brackets). If an icon is used, the icon is also part of the popupTitle class and can be clicked. The popup CSS class, on the other hand, is used for the box that opens afterwards containing the solution (defined with a DIV tag). It is usually similar to the box class but it can be defined according to personal taste using the @cssClass attribute.
table: Defines the TABLE tag used by the table element.
tabledata, tableheading: Defines the TD tag, and respectively, the TH table cell of a content table.
tablerow, tablerowAlt: Defines the TR tag within a content table. If no @cssClass is defined the CSS classes are defined alternating: tablerow and tablerowAlt.
term: The term class is only used for the inline representation of the term element (usually an anchor A tag). For the paragraph representation, the "glossary" CSS class is used, as with the glossary itself.

eLML elements that cannot be overridden (mostly structural elements)

clarify, look, act: Within a learning object each clarify/look/act element is nested within a DIV tag belonging to the CSS class named accordingly.
glossary: Defines the glossary term definitions. Usually a DL tag. Also used for term elements displayed as paragraph within the text.
goals: Defines the goals list. Either a TABLE or a UL tag depending on the @presentation attribute. Each item (learning objective) uses the CSS class "lObjective" for the TR (@presentation=table) or LI (@presentation=list) tag.
lObjective, lObjectiveAlt: Either the LI tag of a list or the TR tag of a table depending on how the goals @presentation attribute is defined. Alternating classes are used!
icon: When an icon is used both the IMG and the TD tag that contains the icon image are defined as CSS class "icon".
multimedia_*: Multimedia elements are all surrounded by a DIV tag that has the multimedia_container CSS class assigned to. Things like text-align, float, clear, padding, display=block or display=inline etc. are defined directly with the transformation!
index_list: Defines the index list. Usually a UL tag.
index: An indexed word with the text is surrounded by a SPAN tag of this class.
legend: Defines the legend of a multimedia element or table. In HTML a SPAN tag with display=block (for correct display below images etc.) is used!
tutor: CSS class used for things that are only visible to tutors. Can be P, LI, TD etc. tag in HTML representation.
footer: The footer is usually displayed smaller and is defined by this CSS class.
glossaryTooltip: Defines the box with the glossary description when the user moves the mouse over a term.
metadata_table: Defines the table used within the metadata section to represent data.

The bibliography listings by default uses HTML tags for bold and italic but these tags can also be customized as following:

bibliography: Defines the bibliography list. Usually a UL tag.
furtherReading: Defines the further reading section. Usually a UL tag.
bibLink: Used for the anchor A tag that links the author's name within a citation/reference to the according bibliography item at the end of the lesson.
bibAuthor: The author's name is usually bold (B tag).
bibTitle: The title of the resource (book, paper etc.). Defined with a I tag and therefore usually italic
bibCommentFurther: Using a SPAN tag this class defines how a text added to a further reading resource is presented. Usually italic.
bibCommentSource: Using a SPAN tag this class defines how a text added to a bibliography reading resource is presented. Usually italic.

A closer look at the navigation

The default navigation created by eLML is a special case since it does not only use CSS classes but also CSS IDs to identify the exact position of the navigation item.

As can be seen in the source code of this documentation file, the navigation of eLML is built up by lists (UL tag) and list items (LI tag) that are then defined in the elml.css file. These two HTML tags belong to the following CSS classes:

UL tag: Always belongs to the "navigation" class. Depending on the level, the UL tag also has a CSS defined ID called "nav_lesson", "nav_unit" or "nav_lo"!
LI tag: All links to pages use the CSS class "navigationLink", only the active page navigation item uses the "navigationActual" CSS class to allow special highlighting (and is NOT a link).

The whole eLML website navigation is built up only by defining the corresponding fonts, list-stlye-image etc. within the elml.css file. Have a look at the source code of this page for more information :-)