Prerequisites

The.comCSS

Intro

Usually, declaring an Element's style using the style grid is enough. However, for more complex or persistent styling, you can use Stylesheet Elements to write CSS rules.

Writing CSS can be helpful to apply global styling to certain elements or classes. Additionally, you can achieve more advanced styles by leveraging CSS's selection and pseudo-selection classes.

Adding and Editing the Stylesheet Element

You can add a Stylesheet Element in either the head or body of your page.

Once it is added, click to edit the Text cell and you can write any valid CSS.

In the above example, we added a Style Element to the head and wrote a CSS rule for all links (<a> tags) on this page. Note: because of how CSS works, this may change all links on this page, which might interfere with other styles you defined elsewhere.

Adding Classes

To avoid the issue of overwriting styles by writing CSS rules for HTML elements, we can write rules to be applied to classes. Then, we can give an element a class so that the styles are only applied to those elements.

In this example, we have a class my-class with some defined styles. We can click Edit on an element and then type "my-class" into the Class cell. All CSS rules defined under our class in the Stylesheet will be applied only to elements with that class.

If you are confused about the CSS syntax, check out more about that.

Creating and Managing Global Styles

If you want to do the above method for individual pages, it may start to get hard to manage.

For example, you have 100 pages where on each page there is a Stylesheet with a CSS class definition of "my-class." What happens if you want to add or change a style property defined in that class? A headache, that's what.

To get around this issue, we can leverage Blocks. Basically, we can create a new Block, add a Stylesheet Element, and write the desired CSS. Then when we want to use styles from that Stylesheet, just add that Block to that page.

To illustrate this, let's say we have a blog and want certain styles on all our blog pages. We can set up a Block with a single Stylesheet Element with the following styles:

main > section a {
 color:#FECE00;
 text-decoration: none;
 border-bottom: dashed 1px #FECE00;
 transition: all 0.3s ease;
}

main > section a:hover {
 color:#FECE00;
 border-bottom: dotted;
}

p {margin: 20 0;}

Then we add the Block to a page. See how the link and paragraph styling change based on the CSS we wrote in our Block.

Next Steps

We are working on a workflow to make setting up and managing an array of global styles and classes more streamlined. In the meantime, learn more about CSS!