If you like my work, please consider supporting its development.

The styles partial is used to generate a <link> tag that includes an external stylesheet on a page. It is compatible with files from CDNs, static files, and stylesheet assets.


The styles partial takes a dict as its context argument, with the following possible keys:


Specifies a path relative to the assets/ directory where a CSS file can be used as a resource. It or Src must be present.


Specifies a path relative to the static/ directory or an absolute URL to where a CSS file is located. It or Asset must be present.

https://cdn.example.com/resource.css or /path/to/static-file.css


Whether the CSS file should be preloaded (asynchronously loaded and possibly pushed by the server with HTTP/2 Push). Defaults to true.


Set the crossorigin attribute on the <link> tag. CDNs may require it to be set to "anonymous" for CORS requests.


Set the integrity attribute on the <link> tag to prevent maliciously modified files from loading. Only for stylesheets included with Src - those using Asset generate this value.

AttrsAny other attributes that may not be covered by the above options.media="print"

Must be set to the top-level context ($) so the partial can access site variables via .Root.Site.Params.



Below, you can find examples using the styles partial with Asset and with Src. The call to styles can be long, so the lines have been broken up to better fit on the page without causing too much horizontal scrolling.

{{ partial "styles" (dict "Asset" "css/foundation.css" "Root" $) }}
{{ partial "styles" (dict "Src" "https://use.fontawesome.com/releases/v5.2.0/css/all.css"
"Integrity" "sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
"CrossOrigin" "anonymous" "Root" $) }}