The most straightforward way to define a style is do so within the element itself. Defining style rules along with the element they affect is the clearest way to connect where style rules are defined and where they are applied.

While basic style rules are scoped to the element they are defined within, they

This also forms the basis for style Composition and Inheritance.

(from the elements definition in case of a widget), or

A word about order of precedence…​

Just like modifying data within an object (in an object oriented programming language) uses a reference to the object itself before referencing its functions/methods/data (e.g. this.value or self.func()), all rules are anchored to the element they are defined within.

Selectors are anchored to the element they are defined within through the use of the :this selector. Due to the object oriented nature of MKDL’s design styles, every rule’s selector begins with (or only contains) :this.

An element’s default rules (:this) are always applied for the element unless overridden (see precedence) but any number of states can be chosesn such as :this:selected or :this:selected:hover.

Following a rule’s selector is its body, which consists of curly braces {} surrounding any number of style declarations.

The built-in hover state is applied to an element whenever a user’s pointing device (e.g. mouse) is directly over the element.

When working with Modkit Design language’s CSS-like format (i.e. in a <display> tag within an .mkdl file), custom states are used in selectors by adding a : to its name so that a state named selected would become :selected. Multiple states can be strung together such as :selected:error.

Note that because display styles are "object oriented", they will begin with :this so the simplest selector that will use the selected state would be :this:selected and applying both selected and error states would use the selector :this:selected:error.

New states are set up in the state tag within the display tag. The following example declares a state named selected which is applied when the condition this.selected is met for the enclosing container element. The state selector :selected is used in the display style to change the element’s background color. Finally the state is toggled between true and false when the element’s PRESSED event is triggered.