express.ui.include_css

express.ui.include_css(path, *, method='link')

Include a CSS file.

Parameters

path : Path | str

A path to a CSS file.

method : Literal[‘link’, ‘link_files’, ‘inline’] = 'link'

One of the following: * "link" is the link to the CSS file via a link tag. This method is generally preferable to "inline" since it allows the browser to cache the file. * "link_files" is the same as "link", but also allow for the CSS file to request other files within path‘s immediate parent directory (e.g., @import() another file). Note that this isn’t the default behavior because you should be careful not to include files in the same directory as path that contain sensitive information. A good general rule of thumb to follow is to have path be located in a subdirectory of the app directory. For example, if the app’s source is located at /app/app.py, then path should be somewhere like /app/css/custom.css (and all the other relevant accompanying ’safe’ files should be located under /app/css/). * "inline" is the inline the CSS file contents within a style tag.

Returns

: Tag

If method="inline", returns a style tag; otherwise, returns a link tag.

Note

By default this places a link (or style) tag in the body of the document, which isn’t optimal for performance, and may result in a Flash of Unstyled Content (FOUC). To instead place the CSS in the head of the document, you can wrap it in head_content:

from htmltools import head_content
from shiny import ui

ui.page_fluid(
    ui.head_content(ui.include_css("custom.css")),

    # You can also inline css by passing a dictionary with a `style` element.
    ui.div(
        {"style": "font-weight: bold;"},
        ui.p("Some text!"),
    )
)

See Also

Examples

#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
#| viewerHeight: 400

## file: app.py
from pathlib import Path

from shiny.express import ui

css_file = Path(__file__).parent / "css" / "styles.css"

"Almost before we knew it, we had left the ground!!!"

ui.include_css(css_file)

# Style individual elements with an attribute dictionary.
ui.p("Bold text", {"style": "font-weight: bold"})


## file: css/styles.css
body {
  font-size: 3rem;
  background-color: pink
}