Skip to content
ReferenceCoreLook up every styling helper.

Styling functions

Every styling helper works the same way: it takes content, changes one visual property, and returns the content, so helpers can wrap each other. All of them accept a component, a plain string (wrapped in text for you), or a list (each element is styled).

from drafter import *


@route
def index() -> Page:
    return Page([
        bold("Bold.\n"),
        change_color(italic("Crimson italics.\n"), "crimson"),
        change_background_color(
            change_padding("Boxed in.\n", "8px"), "lavender"),
        Button("Reload", "index")
    ])


start_server()

The how-to, organized by what you want to change, is Styling functions and keywords. This page is the full list.

Text emphasis

Function Effect (CSS)
bold(content) font-weight: bold
italic(content) font-style: italic
underline(content) text-decoration: underline
strikethrough(content) text-decoration: line-through
monospace(content) font-family: monospace
small_font(content) font-size: small
large_font(content) font-size: large

Text appearance

Each of these takes the content first, then one string argument.

Function Second argument Effect (CSS)
change_color(content, color) A color name or CSS color color
change_background_color(content, color) A color background-color
change_text_size(content, size) A size such as "20px" or a number of pixels font-size
change_text_font(content, font) A font name font-family
change_text_align(content, align) "left", "center", "right", or "justify" text-align
change_text_decoration(content, decoration) Any CSS text decoration, such as "underline dotted" text-decoration
change_text_transform(content, transform) "uppercase", "lowercase", or "capitalize" text-transform

Size and box

Values are CSS lengths: include units, as in "200px" or "2em". The box properties follow the CSS box model, explained with pictures in Design basics.

Function Effect (CSS)
change_height(content, height) height
change_width(content, width) width
change_border(content, border) border, e.g. "2px solid black"
change_margin(content, margin) margin: space outside the border
change_padding(content, padding) padding: space inside the border

Position

Function Effect (CSS)
float_left(content) float: left: content flows around the right side
float_right(content) float: right: content flows around the left side

The general-purpose primitives

Every helper above is a shortcut for update_style, which can set any CSS property by name:

update_style("Warning!", "letter-spacing", "4px")
update_style(Button("Go", "index"), "border-radius", "50%")

Its sibling update_attr sets an HTML attribute instead of a style:

update_attr(TextBox("guess"), "placeholder", "Type a number")

Both return the component, so calls can be nested. Remember to include units in style values: "20" is not a size, but "20px" is.

Notes

  • Helpers change how content looks, never what it is. Styling a value does not change your state, and in tests, styled components are still compared by their underlying content and settings. assert_style can check styles directly; see Testing functions.
  • The same effects are available as style_* keyword arguments on any component (Button("Go", "index", style_color="red")); see Keywords every component accepts.
  • For sitewide changes, prefer a theme or add_website_css over styling every component individually.