OK let’s get started here.
CSS for beginners, part one.
1. What is CSS?
CSS is kind of like a programming language, but it doesn’t really have a sequential flow, the way many other programming languages do.
Instead, it consists of a bunch of tiny instruction-lets that are executed more or less in parallel, so you can pick and choose lots of tiny scraps of code for their cumulative effect. These little scraps of code may or may not conflict with each other.
2. How do I activate CSS within my Roam Database?
There are a few different ways. I’ll be upfront - my favorite is to use the Chrome/Firefox browser extension, “Stylus”.
My main reasons for favoring “Stylus” : it gives you an interface (in the browser pulldown menu) that lets you flick switches on individual CSS’es - that’s helpful for determining exactly what each CSS does if you have installed multiples. You can quickly pick and choose which CSS’es you want to be “active”.
It also has a helpful “debugging” feature, in that when you enter a CSS for the first time, it “flags” what it perceives to be errors. (missing parentheses, etc etc)
But if you don’t want to deal with Stylus, you can also include the CSS directly into the Roam database - if you put it under the page [[roam/css]].
All CSS snippets that are correctly entered within “CSS code blocks” (use ``` to create a “code block”, and choose CSS to make sure it’s the right kind of code block) - if they are on that [[roam/css]] page - execute automatically - for that database, and that database only.
This is a nice feature if you want to differentiate how your databases appear TO VISITORS - when people come in to look at your public Roam, what they see will be defined by the native CSS that you put on that page… regardless of whether that user is running the “Stylus” extension.
(Also, a little “hack” for those who want to write the CSS natively into the Roam itself - if you want to be able to have a “menu” of different CSS in your database, you can create “block versions” including different (or no CSS at all) and rotate through them or turn them off, by choosing different block versions.)
A third way to run CSS’es, is via the browser extension “Roam Toolkit”. You can copy-paste CSS into the single field given for that purpose in the “Roam Toolkit”.
Although this works as a quick, on-the-fly solution, the biggest disadvantage is that in the long run this forces you to have a single “monster CSS”, that you then can’t pick and choose individual elements out of… but for completeness’ sake - just so you know - that’s also an option.
It’s probably beyond my scope to completely explain how to use the “Stylus” extension, but I encourage you to play around with it - the UI is pretty intuitive and well designed. LMK if you have questions about it, and I will answer in this thread.
When you are ready to add a CSS to your database, just go to the pulldown menu for “Stylus”, while you have the tab open to your database. See screenshot. It’s the aquamarine-colored “S” that has a number 20. (in my screenshot above, I already have 20 CSS “scripts” loaded in, and active. I’ll get to that later, and share a few of my functional favorites.)
But when you get started, you just click on one of the options at the bottom of this pulldown, choosing to either write a style for ALL roam research databases in general - or JUST for this particular database-URL you are visiting, depending on which option you choose.
Click on the “write style” button, and you’ll get a new tab opened for you for CSS editing.
Copy-paste the desired code into the code window. Be sure to give your style a distinct name in the naming window on the left, right under where it says “Add Style”… Then click “Save”, and BOOM!
Easey-Peasey. Your new CSS is active.
OK that’s it for now. I’ll be sharing some of my favorite functional CSSes a little later. Peace out