Design Tutorials

• Global site code
• Page code
• Two ways to shape your site

• Edit CSS properties in real-time and apply it to your site

• Class and Type selectors
• Combining selectors with the same CSS properties
• How to use ID
• Commenting in CSS
• Frequently asked CSS tips

• How to use light, dark, and system theme on your site
• How to change default Notion colors to your own brand colors
• How to create and assign a new color variable

Part 1: Shaping your site

1. The global site code
1. Click on site settings → select Code
2. The page code
1. Click on site settings → select Pages → click on Edit code

• If you add lines of code in this section, every single page in your site will inherit this code in them.
• A practical use case for a global code is to inject an analytics script like Plausible. You add an analytics script here, every single page of your site will be trackable.
• Another use case is to add a CSS theme to your site. Add a script or CSS code, and every single page of your site will have the same style.

• Any lines of code you add here will only be applied to that particular page.
• A practical use case is to add a chat or donation widget to a specific page, and not to every single page.

1. Have a site with a consistent theme by adding CSS code or style script in the global site code. In other words, every single page of your site will have the same theme.
2. You can apply different themes to different pages within your site by adding CSS code or style script to different pages.

• I have a website @ yusuf.is which uses the default Notion theme. My about page @ yusuf.is/who uses the Watashi theme. My blog @ yusuf.is/writing and design portfolio @ yusuf.is/design pages use the Aimée theme. I like it this way, because it's like I'm exploring different worlds on my site. But you do you.

Part 2: How to inspect and edit elements on a webpage

Part 3: CSS essentials

Part 4: Colors

Notion Colors

Notion-Super elements

Articles

Notion-Super Themes

Designer's Collection →