2b:null 2c:["$","title",null,{"children":"Using shared CSS | Lingua Latina Project Classics | Observable"}] 31:[] 2f:{"id":"6f1c52bdce992b2e","slug":"using-shared-css","title":"Using shared CSS","thumbnail":"265dead8091e0f2ba1567d20b6c28f7b8efea3f2eb5e9c3891939628016c9019","access_level":"public","create_time":"$D2020-11-08T16:29:16.435Z","update_time":"$D2020-11-08T16:54:04.405Z","view_time":null,"first_public_time":"$D2020-11-08T16:29:41.620Z","fork":{"id":"2f0047e6c0bb6181","slug":"lingua-latina-legenda-styling-your-notebooks","title":"Lingua Latina Legenda: styling your notebooks","owner":{"id":"2f2d343e6035eab6","login":"neelsmith","name":"Neel Smith"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a9d1ba76bda8c238","login":"l3","name":"Lingua Latina Project Classics","avatar_url":"https://avatars-next.observableusercontent.com/56b07e9ba69e690e9cb3f902c97a95178ddb2f83f3f16c4560487a6f31ae3d33","tier":"starter_2024"},"version":91,"publish_version":91,"role":null,"authored":false,"authors":[{"type":"individual","id":"b4795bb2d8282618","login":"l3","name":"Lingua Latina Project Classics","avatar_url":"https://avatars-next.observableusercontent.com/56b07e9ba69e690e9cb3f902c97a95178ddb2f83f3f16c4560487a6f31ae3d33","tier":null}],"members":[{"type":"individual","id":"b4795bb2d8282618","login":"l3","name":"Lingua Latina Project Classics","avatar_url":"https://avatars-next.observableusercontent.com/56b07e9ba69e690e9cb3f902c97a95178ddb2f83f3f16c4560487a6f31ae3d33","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"a23cae61f5819ee6","slug":"templates","title":"templates","owner":{"id":"a9d1ba76bda8c238","login":"l3","name":"Lingua Latina Project Classics"}},"type":"notebook","body":{"title":"Using shared CSS","cells":[{"id":0,"value":"md`# Using shared CSS\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 how to edit cells in an Observable notebook. You can find everything you need to know and more in the \"Welcome to Observable\" notebook that was created when you registered as an Observable user.\n

\n\nCascading Style Sheets (CSS) let you define the visual appearance of HTML elements in your notebook. To use the same styles used in the L3 project's notebooks, add two cells to your notebook. First, import the shared CSS:\n\n~~~js\nimport {l3css} from \"@neelsmith/l3-common\"\n~~~\n\nthen to make it available, create a cell with the contents\n\n~~~js\nl3css\n~~~\n\n\nThis is illustrated in the following two cells.\n\n`\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":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"