Function insertGlobalCss

insertGlobalCss(style: object): void

Inserts CSS rules globally (unscoped).

Works exactly like insertCss, but without prefixing selectors with a unique class name. This is useful for global resets, base styles, or styles that need to apply to the entire document.

Accepts the same concise style string syntax and CSS shortcuts as insertCss. See insertCss for detailed documentation on syntax and shortcuts.

Parameters

style: object
Object with selectors as keys and concise CSS strings as values.

Returns void

Example: Global Reset and Base Styles

// Set up global styles using CSS shortcuts
insertGlobalCss({
  "*": "m:0 p:0 box-sizing:border-box",
  "body": "font-family: system-ui, sans-serif; m:0 p:$3 bg:#434 fg:#d0dafa",
  "a": "text-decoration:none fg:#57f",
  "a:hover": "text-decoration:underline",
  "code": "font-family:monospace bg:#222 fg:#afc p:4px r:3px"
});

$('h2#Title without margins');
$('a#This is a link');
$('code#const x = 42;');

Example: Responsive Global Styles

insertGlobalCss({
  "html": "font-size:16px",
  "body": "line-height:1.6",
  "h1, h2, h3": "font-weight:600 mt:$4 mb:$2",
  "@media (max-width: 768px)": {
    "html": "font-size:14px",
    "body": "p:$2"
  },
  "@media (prefers-color-scheme: dark)": {
    "body": "bg:#1a1a1a fg:#e5e5e5",
    "code": "bg:#2a2a2a"
  }
});