CSS in GTK

This chapter describes how GTK uses CSS for styling and layout. It is not meant to be an explanation of CSS from first principles, but focuses on listing supported CSS features and differences between Web CSS and GTK.

There is plenty of introductory documentation available that can be used to learn about CSS in general. In the tables below we include links to the official specs that can be used to look up the definition of individual selectors and properties.

CSS nodes

GTK applies the style information found in style sheets by matching the selectors against a tree of nodes. Each node in the tree has a name, a state and possibly style classes. The children of each node are linearly ordered.

Every widget has one or more of these CSS nodes, and determines their name, state, style classes and how they are laid out as children and siblings in the overall node tree. The documentation for each widget explains what CSS nodes it has.

The CSS nodes of a GtkScale

scale[.fine-tune]
├── marks.top
│   ├── mark
┊   ┊
│   ╰── mark
├── trough
│   ├── slider
│   ├── [highlight]
│   ╰── [fill]
╰── marks.bottom
    ├── mark
    ┊
    ╰── mark