A brief look at the editor options for assigning styles and classes to text.
Start by highlighting text and selecting the style drop-down assignment:
Here we’ve assigned the H1 heading style:
Now we will assign a class to the H1 text by selecting the “title-1-thick” class from the Class drop-down:
The output for the H1 style with the “title-1-thick” class looks like this:
Now we’ll change that class to a different class. To begin, we select the text, then select “Clear class” from the class drop-down:
This will remove the class from the text:
Then we select the “p-lg-red” class from the drop-down while our text is still highlighted:
The H1 style with the “p-lg-red” class looks like this:
Now we’ll change the class assignment again. Start by highlighting the text and selecting “Clear Class”:
Then we’ll assign the “title-big1” class to the text:
Notice the text appearance changes even in the editor:
And after we save we see the H1 style with the “title-big1” class looks like this:
Now we’ll add some paragraph text. First we enter the paragraph text into the editor, then we highlight the paragraph and select the “Standard Paragraph” style from the style drop-down:
This is a quick view of the HTML code that is generated for the text we’ve been formatting:
Here we are assigning the Standard Paragraph style the class “p-med-green” from the class drop-down:
And the new formatted text looks like this:
Now we’ll assign a different class to the paragraph. Start by selecting the paragraph and clearing out the current class assignment:
Now we’ll assign the “blockquote-2” class to the paragraph text:
Notice the text changes in the editor window:
And the final text looks like this:
Let’s center the H1 text:
And the final text looks like:
These styles and classes can be adjusted within the style sheet at any time, and the changes in the style sheet will then be reflected throughout the site immediately. Consider font sizing, color, spacing, backgrounds, and even new ideas for formatting.