CSS

The .css^[docs] function makes it possible to apply CSS styles to the document.

Warning

CSS styles are applied only in HTML (and HTML-PDF) documents, and won't have any effect in other future targets.

This topic is thoroughly covered in the HTML page.

.css
  body {
    background-color: green !important;
  }
  h1 {
    color: pink !important;
  }

CSS styles can also be loaded from file by means of the .read function:

.css {.read {styles.css}}

Note

Contrary to what happens with, for example, .code, .css does not allow function calls inside the body argument, since they would be ambiguous with the CSS syntax.

For this reason the call to .read must be inlined, as in the previous example.

 

Overriding properties

If the purpose is to override Quarkdown's default style, then the suggested approach is to take advantage of the .cssproperties^[docs] function.

This function takes a dictionary of strings, where each item is a --qd-* CSS property and value pair.

Why is this preferred over .css?

Quarkdown's themes use properties for more granular control and easier overrides. For instance, the same property may be applied differently depending on the document type.

For context, when calling functions such as .pageformat or .paragraphstyle, their effects are applied by injecting the corresponding --qd-* properties.

Overriding a --qd-* property rather than its raw CSS equivalent allows for a smoother control and reduces the risk of future breaking changes.

.cssproperties
  - background-color: green
  - heading-color: pink
  - block-margin: 12px

A complete list of available properties can be found in the global theme.
Unknown properties are safely ignored.