Basics · Styling

Selectors and the cascade

The <style> block takes a subset of CSS. You select elements three ways: by type (span, div), by class (.todo), and by id (#app). Combinators work too — #app > .todo for a direct child, label + input for the next sibling — though you rarely need them for a small component.

When two rules touch the same element, the cascade decides. Specificity is the usual (ids, classes, types) triple: an id beats a class, a class beats a type, and on a tie the later rule wins. Every element also starts from the user-agent stylesheet — the built-in defaults that make a <button> look like a button. Those UA rules sit underneath yours, so at equal specificity your rule wins.

One terminal-specific split: layout properties written as attributes (width, a template class) always beat a CSS rule for the same property, while visual properties — colour, weight, decoration — come only from CSS. The starting app is unstyled; give it a shape.

Your turn

Add a type selector, a class selector, and an id selector:

#app {
    padding: 1 2;
    border: single;
}
.title {
    color: green;
    font-weight: bold;
}
span {
    color: cyan;
}

Press Run — the panel gains a border, the title turns bold green, and the item text picks up the span colour.