Using style sheets

Within the standalone distribution of Kontrast, there is a file called site.css inside the style directory. In this file, there are several CSS class definitions that can be useful for your own HTML pages. (You don’t have to use these styles, though. Kontrast itself works independent of the file.)

To use the predefined styles, you need to include this file within the <header> tag of your HTML:

The style sheet provides three class selectors that you can use within your HTML document:

• one-column for a single-column layout

• two-column for a two-column layout, where optionally the second column is always visible (sticky)

The one-column and two-column CSS classes are meant to be used on a single <div> tag that is a descendant of the <main> tag within the document body.

Please also refer to the series of MDN articles which provide a useful introduction to Cascading Style Sheets (CSS).

The single-column layout

This is the most basic layout which results in a horizontally centered arrangement of the content. If the height of the content is smaller than the screen height, the content is also vertically centered. To increase readability, the width of the text is limited to 600px instead of the full screen width.

The two-column layout

The two-column layout can be used to display text (or any longer content) in the left column and a figure on the right. By adding class="sticky" to the right column <div> the right column will stay in place even if you scroll down on the left column.