Inside the CSS
What’s a CSS file? CSS Style sheets include all visual appearances of objects, texts and media. For example a modification of a headline’s font size in the style sheet will reflect a change of the headline throughout the whole publication.
A brief overview of the main style sheets
Use this CSS template as a start for your dossier-specific stylesheet.
The main stylesheet. Page widths are defined here. All other CSS files containing styling of typography etc. are also being imported.
structure.css stores all styles concerning the structure, such as column widths, “content-element” margins etc.
Text and headline styles are part of this file (font face, font size, line-height etc.).
All custom fonts, included via @font-face (for more information, see “custom fonts”).
Contains all styles concerning the “table of content” (on iOS devices activated with a doubletap) and the navigation bar on desktop browsers.
display-grid.css (deactivated by default)
Display the underlying grid of “content-element” by enabling “display-grid.css”. Just uncomment (delete the “/*” and “*/”) the following lines in the beginning of the main style sheet “styles.css”.
/*Turn on the visual grid view by deleting the "/*"... @import url('display-grid.css'); ... and this » */
Media related appearances, like image widths and f.e. styling of captions are stored here.
Module-related CSS files
Manages the appearance of the module „slideshow“. Note: The styling of the captions are saved in “media.css”, because they are used also in other modules.
The styles of the module “audio”.
The styles for the module “card-flip”.