25:["$","title",null,{"children":"CSS & HTML in Notebooks | Observable | Observable"}] 49:[] 29:{"id":"b309615ed0fbe661","slug":null,"title":"CSS & HTML in Notebooks","thumbnail":"a72d0198a3680eaa1b54724f9d5b73a0ac15638c7444a61b7f50e6bf6a0ac8d3","access_level":"unlisted","create_time":"$D2023-10-21T01:29:05.613Z","update_time":"$D2023-10-21T01:36:51.082Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","bio":"The computational, collaborative, agentic document where everyone answers questions with data","followed_by_you":false,"follows_you":false},"version":52,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"42520cea6c99d3c8","login":"pstuffa","name":"Paul Buffa","avatar_url":"https://avatars-next.observableusercontent.com/32c09bb97a2bb742225b949dcc4cf81a03dcd2b0caae97325970223a48a14b94","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"4530d0072aa49b47","login":"erinn","name":"Erinn Wong","avatar_url":"https://avatars-next.observableusercontent.com/9119ac38e4f1c92d50b28822c47306212f06e085b7d1416e851a1c397194e2d4","tier":null,"role":"editor"},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"CSS & HTML in Notebooks","cells":[{"id":0,"value":"# CSS & HTML in Notebooks\nIf you write CSS in a cell by itself, it can modify other cells on the page without having variables that reference it. Given how Observable works with [reactive dataflow](https://youtu.be/DELDGM-1V2o?si=-pQ-fQ7J7LKUbmRg), that can be problematic with embeds.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"## Example 1\nDon't do this!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"Don't do this!","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"You don't want to do this because if you were to embed the cell with the span, it would not also use the CSS from the previous cell. There needs to be a reference to that cell for it to work properly.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"## Example 2\n\nThis works better!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"\n\nThis works for embedding!\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"If you include the logic within the same cell, that will work fine for embedding, though perhaps not the most ideal solution, given it might want to more modularize your code.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"## Example 3\nReferencing the cell with styling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"myStyling = htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$${myStyling}\nThis works great for embedding!","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null