2c:null 2d:["$","title",null,{"children":"Lingua Latina Legenda: styling your notebooks | Neel Smith | Observable"}] 32:[] 30:{"id":"2f0047e6c0bb6181","slug":"lingua-latina-legenda-styling-your-notebooks","title":"Lingua Latina Legenda: styling your notebooks","thumbnail":"5475d9d692bbdbfe9da35bcc01efd78c44e6c617871e760c070cef9132ff1faa","access_level":"public","create_time":"$D2020-10-27T16:15:06.932Z","update_time":"$D2020-10-27T16:42:31.437Z","view_time":null,"first_public_time":"$D2020-10-27T16:45:42.332Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"2f2d343e6035eab6","login":"neelsmith","name":"Neel Smith","avatar_url":"https://avatars-next.observableusercontent.com/cc0e400b185275121581094163c19ed8bf7f164818e286eb8052f78ea2dd1962","tier":"starter_2024"},"version":75,"publish_version":75,"role":null,"authored":false,"authors":[{"type":"individual","id":"8d6d964e9ab21681","login":"neelsmith","name":"Neel Smith","avatar_url":"https://avatars-next.observableusercontent.com/cc0e400b185275121581094163c19ed8bf7f164818e286eb8052f78ea2dd1962","tier":null}],"members":[{"type":"individual","id":"8d6d964e9ab21681","login":"neelsmith","name":"Neel Smith","avatar_url":"https://avatars-next.observableusercontent.com/cc0e400b185275121581094163c19ed8bf7f164818e286eb8052f78ea2dd1962","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Lingua Latina Legenda: styling your notebooks","cells":[{"id":0,"value":"md`# *Lingua Latina Legenda*: styling your notebooks\n\n\n

NB: In order to use the shared L3 style definitions as described here, you'll need to have a basic idea of what HTML is, and how to edit cells in an Observable notebook. This introduction to Observable\n is more than you need, but at least it claims only five minutes of your time.\n

\n\nCascading Style Sheets (CSS) let you define the visual appearance of HTML elements in your notebook.\n\nIf you'd prefer not to write your own CSS from scratch, or would simply like to reuse styles defined for the [L3 notebook collection](https://observablehq.com/collection/@neelsmith/l3), you can reuse the L3 CSS as follows.\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"md`## Import and apply the L3 CSS\n\nThe following two cells show how to *import* the *l3css* function, and how to *apply* it to your notebook.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"// 1. Import the l3css() function\nimport {l3css} from \"@neelsmith/l3-common\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"// 2. Apply the l3css() so that its contents are used as html in your notebook\nhtml`${l3css()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"md`## Using the L3 CSS in your notebook\n\nThe L3 CSS defines styles you can apply by attaching a *class* attribute to an HTML element with the name of the style.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"md`## Styles for block units\n\nThe CSS includes classes for styling blocks of instructions or notes. Typically, you could apply these styles to an HTML div element, as in the following examples.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"md`### Instructions\n\nBlocks formatted for the *instructions* style are inset with a colored background and strong left border, as you see in this example:\n\n

\nEnter your instructions, maybe as an ordered list.\n

Step 1
Then move to step 2

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":68,"value":"md`### Notes\n\nBlocks for side notes are formatted like this example:\n\n\n

\nAn aside, or some kind of informative, cautionary, or even monitory note could be presented here.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"md`## Styles for strings of characters\n\nUse these classes to format the display of words and phrases in your notebooks.\nYou can use these within notebook cells\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"md`### Highlighting strings\n\nWrap a word or phrase in a span element with a highlight class attribute. See the following cell for an example.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"md`\n\n*Example*: \n\n> Within a possibly larger block of text, you can highlight strings.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 31:"$30:body"