# Styling with CSS
## Overview
A `Css` is a parsed stylesheet. You build one from a string, attach it to a
`Dom` subtree with `.with_component_css(css)`, and the cascade applies it on the next
layout pass. The dialect is a strict subset of standard CSS: tag, class, id,
and attribute selectors; descendant, child, sibling, and pseudo-class
combinators; the `@media`, `@os`, `@theme`, and `@lang` at-rules; and
shorthand properties for the common cases.
```rust,no_run
use azul::prelude::*;
let css = Css::from_string("
body { font-family: sans-serif; padding: 20px; }
.panel { background: #f0f0f0; border: 1px solid #ccc; padding: 12px; }
.panel:hover { background: #e8e8e8; }
".into());
let _ = Dom::create_body()
.with_child(Dom::create_div().with_class("panel".into()))
.with_component_css(css);
```
```azul-render screenshot=styling-panel width=400 height=160 subtitle="A class-styled panel with hover-ready rules"
A panel with class-based styling
```
## Two ways to attach styles
There is **one** CSS model, and it works like the web's [`@scope`][scope]:
every stylesheet is *scoped to the subtree of the node it is attached to*.
- **`Dom::with_css(s)`** — the main entry point. The CSS string is parsed
into a `Css` struct and **pushed onto that node's `.css` vec**. The
cascade selector-matches it against the node's subtree during the
single per-frame pass. A string with selectors (`body { … } .btn { … }`)
matches elements in the subtree; a bare-declaration string (`color: red`)
parses to `* { color: red }`, so it applies to the whole subtree — and
on a **leaf node (subtree length 1) that is exactly an "inline style."**
There is no separate node-only path: inline *is* a one-node `@scope`.
- **`Dom::with_css_property(p)`** — programmatic single-property override
for when you already hold a typed `CssProperty` and don't want to
round-trip through string parsing. Highest priority short of `!important`.
```rust,no_run
use azul::prelude::*;
// 1. "Inline" — a bare-declaration string on a leaf node (subtree len 1)
let _ = Dom::create_div()
.with_css("color: blue; padding: 4px; :hover { color: red; }");
// 2. A stylesheet scoped to a subtree — selectors match within it
let _ = Dom::create_body()
.with_css(".btn { background: #1976d2; color: white; }")
.with_child(
Dom::create_button("Save", SmallAriaInfo::label("Save"))
.with_class("btn".into())
);
```
> **Note:** the old `with_component_css(Css)` API has been removed — it was
> the same thing as `with_css(&str)` minus the string parse. Pass a CSS
> string to `with_css`; if you already have a parsed `Css`, the low-level
> `Dom::add_component_css(css)` still pushes onto the `.css` vec.
Matching and inheritance happen once after `layout()` returns, in a single
cascade pass. [The DOM page](dom.md#when-does-css-actually-apply-not-until-after-layout)
walks through the timing.
[scope]: https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
For a static stylesheet shared across many nodes, build the `Css` once at
app startup and pass it through `style()`. Multiple `style()` calls stack.
A later one overrides earlier ones at equal specificity.
## Selectors
The selector language matches W3C Selectors Level 3 minus a few rarely-used
pseudo-classes:
- **Universal**: `*` matches every node.
- **Type**: `div`, `button`, `h1` match nodes whose tag matches.
- **Class**: `.panel` matches nodes with `with_class("panel")`.
- **Id**: `#sidebar` matches nodes with `with_id("sidebar")`.
- **Attribute**: `[lang]`, `[lang="en"]`, `[lang^="en"]` test attribute
presence and match. The operators are `=`, `~=`, `|=`, `^=`, `$=`, `*=`
(see `AttributeMatchOp`).
- **Descendant**: `nav a` matches an `` anywhere under `