Adding CSS class to a Markdown element¶

The correct syntax for adding a CSS class to a Markdown element is { .class-name } or the standard Python-Markdown {: .class-name } format via the attr_list extension.

Zensical Configuration¶

To assign classes, IDs, or raw attributes to block or inline elements, ensure that the attr_list extension is enabled in your zensical configuration file:

[project.markdown_extensions]
attr_list = {}

Styling Inline Elements¶

To style text links, buttons, or icons, place the curly braces immediately after the element without any preceding spaces:

• Links: [example.langley.stream](https://example.langley.stream:4443/){ style="color: green;" }

  Styled Link to example.langley.stream

• Buttons: [Click Here](https://example.langley.stream:4443/){ .md-button .md-button--primary }

  Click Here

• Icons: :lucide-check:{ style="color: red;" } Ready

  Ready

Styling Within Admonitions¶

!!! abstract "Admonition Inline Styling"
    **Indent**{ style="color: teal;" } admonition text with 4 spaces. Admonitions are specially marked "topics" that 
    can appear anywhere an ordinary body element can. They contain arbitrary body elements.
    Typically, an admonition is rendered as an offset block in a document, sometimes outlined or shaded, 
    with a title matching the admonition type.

Styling Block Elements¶

<div class="grid cards" markdown>

- __HTML__ for content and structure
{ style="color: teal; background-color: pink;" }
- __CSS__ for styling definitions
{ style="color: blue; background-color: #ccc;" }

</div>