Pinegrow lets you style your pages with CSS rules. Here's how to do it:
Open CSS tab in the left panel.
It has two sections: on the top we have a list of stylesheets that are attached to the page and below that we have a list of CSS rules in these stylesheets. In this tutorial we are working with just one stylesheet.
List of document's stylesheets
Let's look at the Stylesheets section:
Click on the two icons next to TUTORIALS.CSS. Checkmark
hides / shows CSS rules in the list while the eye icon
will enable / disable the stylesheet. Try clicking on both. See how this page looks when stylesheet is disabled.
Clicking on the name TUTORIALS.CSS will hide all other stylesheets and show just the rules from tutorials.css. In this example we have just one stylesheet so that doesn't do much.
Let's move on to the CSS Rules section.
List of CSS rules
The search box helps us to quickly find rules.
Select this paragraph. You'll see that the .highlight rule will light up. This shows that the .highlight rule affects the selected element. It affects it because this paragraph has class highlight.
Assign classes to elements
In CSS Rules list, click on the plus or minus icon in front of the .highlight rule to add or remove the class from the selected element. Try clicking on the icon while the above paragraph is selected. The class will be removed. Click again to assign the class back to the selected element.
Only CSS rules that represent classes can be directly assigned to elements in this way.
Editing rule properties
Now click on the .highlight in CSS Rules. Rule properties will open and you can change the style properties of the rule. Try changing the background color, for example. Click on Back to rules at the top when you're finished.
Editing rule code directly
Another way to edit rules is by clicking on the code icon on the right side of .highlight
rule in CSS Rules list. This will open a code editor where you can freely edit the rule.
Deleting and moving rules
Next to code edit icon we have the trashcan icon for deleting
the rule and handle for moving
the rule. As you know, the order of CSS rules is important and you can change it by simply dragging a rule to a desired place. For example, notice that we have two h3 rules. One has font-weight set to 300 and another to bold.
The last rule will take precedence. Try switching the order of these two rules and observe what happens.
Adding new rules
Let's add a new rule. Click on + Add rule at the top of the CSS Rules section and enter a rule selector, for example p. Click on Create and set rule properties. For example, set the text color. You'll see that all paragraphs change color.
Adding new class rules
If you add a new class rule (with . at the beginning, for example .mynewclass) you can click on Create & Assign to create the rule and assign the class to the selected element. This is a great time saver. Again click on + Add rule and try creating a new class and assigning it to the selected paragraph.
CSS rules in element properties
CSS rules are also listed among the selected element's properties. Go to Prop tab and select a heading above this paragraph. Take a look at the Style section at the top of properties. All CSS rules that apply to the selected element are listed there. Click on + Add class at the top of the Style section.
A separate CSS panel will open. You can move it around. There you can create new rule as we did before or assign one of the existing classes. Try clicking on the assign class icon (yellow arrow) for .highlight class.
Class highlight was assigned to the selected heading and is now shown in Prop Style section as well. There classes have a remove icon (x at the right side) that will remove the class from the element. Try removing highlight class in this way.
To be continued...
So much for now. The next step is playing with variables. Variables are great for making CSS rules easily customisable. We're working on a tutorial for that. In the meantime just switch to Vars tab and try changing the values. CSS rules use @variableName instead of hard-coded values. Checkout font color and background section of .jumbotron CSS class for example of how variables can be used.
See you soon!