The Inspector is used to change the properties of all elements and rules, and the attributes of elements (rules do not have attributes.)
As of version 4, Flux has two Inspector mode, one is floating like in previous versions, the other is embedded into the Page Editor window.
The floating Inspector can be toggled using the Inspector button on the main toolbar, or the Inspector menu item in the View menu.
You can toggle the Embedded Inspector from the View menu, using the Toggle Embedded Inspector item.
You can use both Inspectors at the same time if you want to.
You can toggle the collapse state of all sections by holding the Option key when toggling.
If you want to only have a single section of the Embedded Inpsector visible at any one time, use the Concertina Mode in the 'gear' menu.
Both types of Inspector work in fundamentally the same way. There are 'sections' of properties, for example the Text section contains all the properties relevant to text and paragraph styling.
In the screengrab to the right, an element to modify has been selected (green arrow), a 'section' selected (pink arrow), and now we can change the background-color property by clicking it.
The property can usually be editing using an 'assistant control', in this case, it's a color well, and some useful colors, such as the colors already in use in the document, and the current Swatch.
If you can't see these assistants, make sure sure the Use Assistant Controls menu is checked in the 'gear' pop up menu.
By clicking a property, such as background-color, we are enabling it on the selected element, which can be an element on the page, or a CSS rule. After enabling it, we need to give it a value, the 'assistants' make this quite simple.
To disable the property, so that it is no longer declared in the CSS, simply click the small 'X' icon at the top right of the property.
The floating Inspector works in the exact same way, there is no functional difference between them, so whenever this manual or a screencast instructs you to use the Inspector, you can use either
CSS Rules are edited in the exact same way as on page elements, however, CSS rules do not have the Attributes & Actions section of the Inspector, as CSS Rules do not have attributes or actions.
The Inspector works the same in FreeCode as it would normally. There is subtle difference however.
When not in FreeCode, the Inspector will display the properties that are parsed and interpreted, i.e. If the property is invalid in the code, then it won't display in the Inspector.
In FreeCode, the values in the Inspector are taken directly from the code, so invalid values will still appear, so can be corrected.
Contributor styles are listed in the left column of the floating Inspector, and in the 'gear' menu in both the Embedded and Floating Inspector.
Contributors are shown when the selected element is selecting a CSS rule.
For example, if you have a 'body' CSS rule defined, with some properties in it, and you select the body element on the page, then this 'body' rule will be shown as a contributor. This is because the 'body' CSS rule is contributing to the style of the body element.
Another example would be to have a DIV element with the class attribute set to 'mystyle' and have a rule called '.mystyle'.
You can read more about CSS selectors here.