cssx

API Reference

Complete reference for all CSSX properties, attributes, and features. This guide covers everything you need to build with CSSX.

Root Variables

Root variables are defined in the :root selector and control document-level metadata and configuration. These properties affect the generated HTML document as a whole.

Property Description Default
--lang Language of the document en
--title Title of the document CSSX
--description Description of the document CSSX is compiler for CSS
--icon Link to the favicon favicon.svg
--generator Meta generator CSSX v0.0.0
--transition Add @view-transition false

Reserved Variables

Reserved variables have special meaning in CSSX and control core functionality. These cannot be used for custom data.

--content Sets the text content of an element. Supports Markdown formatting for most elements (except code). Use "Sets the text content of an element. Supports Markdown formatting for most elements (except code). Use var(--variable) to reference other custom properties." to reference other custom properties.
--import Imports and includes another CSSX file at this location. Path is relative to the src/pages directory. Imported components inherit the parent's custom properties.

Example Usage

CSSX

p {
    --content: "Hello **World**";
}

header {
    --import: "../components/header.cssx";
}

HTML Attribute Properties

These custom properties map directly to HTML attributes. Any property starting with -- (except reserved ones) becomes an HTML attribute with the -- prefix removed.

--href Sets the href attribute, typically used with <a> elements for links. Supports both relative and absolute URLs.
--target Sets the target attribute for links. Common values: _blank (new tab), _self (same frame), _parent, _top.
--src Sets the src attribute, used with <img>, <script>, <iframe>, and other elements that load external resources.
--alt Sets the alt attribute for images, providing alternative text for accessibility and when images fail to load.
--onclick Sets the onclick event handler. Contains JavaScript code that executes when the element is clicked.
--id Sets the id attribute, providing a unique identifier for the element. Useful for JavaScript targeting and anchor links.
--class Adds additional CSS classes to the element (in addition to the auto-generated CSSX class). Space-separated for multiple classes.
--type Sets the type attribute, commonly used with <input>, <button>, and <script> elements.
--placeholder Sets the placeholder attribute for input fields, providing hint text that appears before user input.
--name Sets the name attribute for form elements, identifying the element when submitting form data.
--value Sets the value attribute for input elements, defining the initial value of the field.

Custom Attributes

You can create any HTML attribute by prefixing it with --. For example:

CSSX

div {
    --data-value: "123";
    --aria-label: "Descriptive label";
    --role: "button";
}

Variable References

You can reference other custom properties using CSS var() syntax within --content and other properties:

CSSX

div {
    --user-name: "John Doe";
    
    p {
        --content: "Welcome, var(--user-name)!";
    }
}

Standard CSS Properties

All standard CSS properties work as expected. You can use any valid CSS property alongside CSSX-specific features:

Best Practices