Textual CSS¶

Textual uses CSS to apply style to widgets. If you have any exposure to web development you will have encountered CSS, but don't worry if you haven't: this chapter will get you up to speed.

VSCode User?

The official Textual CSS extension adds syntax highlighting for both external files and inline CSS.

Stylesheets¶

CSS stands for Cascading Stylesheet. A stylesheet is a list of styles and rules about how those styles should be applied to a web page. In the case of Textual, the stylesheet applies styles to widgets, but otherwise it is the same idea.

Let's look at some Textual CSS.

Header {
  dock: top;
  height: 3;
  content-align: center middle;
  background: blue;
  color: white;
}

This is an example of a CSS rule set. There may be many such sections in any given CSS file.

Let's break this CSS code down a bit.

Header {
  dock: top;
  height: 3;