Style blocks and code blocks

Web Export
1

Style blocks are style declarations you declare inside of elements.

For example, if you want to add hover effects to your project add a graphic or text to the artboard. Then set the markup inside to contain your styles:

<style>
 a {
   color: teal;
   text-decoration: none;
 }
 a:hover {
    font-weight: bold;
   text-decoration: underline;
 }
</style>

Set the tag name to none to exclude it and you now have a style rule added to your document.

You can copy and paste this style rule into other projects or make it a symbol and have all artboards apply the latest changes.

Code blocks are script declarations you declare inside of an element.

<script>
    console.log("Hello world");
</script>

Using the same approach as style blocks you can add special effects to your pages.

For many pages you want to run pages after the page loads or the elements are created.

It is recommended to keep all of your code in one place or easily identified.

For a quick and easy method, select the artboard and in the markup after put any additional styles or script blocks.