Working with classes
With all default styles for the elements in place, Classes can be added to create design variations. For example, certain paragraphs that perform a different role can be given a different font family, size and/or color using a class selector.
To apply styles to a Class simply enter a class name in the Type Class box (in the Styles pane at top). Also make sure to select Class in the Apply Styles dropdown. Now all style adjustments with the design controls below — yes, we will get to work with them real soon! — will be tied to that class.
Any control used for applying a style to a class uses a blue indicator, like the font color thumbnail of the image in the previous section.
Specificity: which styles prevail
So what happens when different styles are assigned to different selectors? Some selectors are more powerful than others, their styles will prevail. In CSS this is called specificity, the styles from a more specific selector will take precedence over styles from less specific selectors.
A Class selector is more specific than a style applied to a Type and will therefore prevail. On its turn, an ID is more specific than a class and will prevail. Styles applied to an ID have an orange indicator.
When an element has an ID applied to it, the object can be targeted within a link. This way the link will take the view directly to that section. Simply add #ID-Name at the end of your link address.
Reusing and combining classes
Styles attached to a class selector are intended to be used by multiple elements. To add the class to another element simply type the class name in the Class input box. The video below shows that the auto-complete can be a great help!
An element can be targeted by up to 5 different classes. Styles can be applied to a specific class selector by deselecting other classes. Deselected classes are gray (see ‘step-p’ above), any style updates will not apply to them, only to the class or class combination currently selected.
Styles can also be applied to class combinations. They are more specific than a single class and therefore these styles will take precedence.