/

Quarkdown

1.13.0

Docs

On this page

CSS

The .css docs ↗ function lets you apply CSS styles to the document.

CSS styles only apply to HTML and HTML-PDF documents. They have no effect on other output formats.

See the HTML page for more details on this topic.

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

You can also load CSS styles from a file using the .read function:

.css {.read {styles.css}}

Unlike .code, the .css function does not allow function calls inside its body argument because they would be ambiguous with CSS syntax.

For this reason, you must inline the .read call as shown in the previous example.

Custom classes

You can assign custom CSS class names to specific elements using the classname parameter, which is available in .container for blocks and .text for inline elements.

Example 1

.container classname:{my-custom-class}
    This is a block with a custom class.

    - Item 1
    - Item 2
    - Item 3

This is an .text {inline text} classname:{my-custom-class} with a custom class.

.css
    .my-custom-class {
        padding: 8px;
        border-radius: 8px;
        background: linear-gradient(to right, blue 0%, forestgreen 100%);
    }

This is a block with a custom class.

  • Item 1
  • Item 2
  • Item 3

This is an inline text with a custom class.

Custom reusable elements

You can leverage custom functions to create reusable elements with custom classes.

Example 2

.function {mytext}
    content:
    .text {.content} classname:{my-custom-class}

This is a .mytext {text} and here is .mytext {another}.

This is a text and here is another.

Overriding properties

If you want to override Quarkdown’s default styles, we recommend using the .cssproperties docs ↗ function.

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

You can find a complete list of available properties in the global theme source. Unknown properties are safely ignored.

Example 3

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

Why is this preferred over .css?

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

When you call functions like .pageformat or .paragraphstyle, they apply their effects by injecting the corresponding --qd-* properties.

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