Several different strands here. Firstly a styling CSS point. In preview the note âSecond levelâ isnât bolded, itâs styled as a heading level 2 (<h2>) by Tinderbox using the build in styles in the build-in Apple webkit framework. so you not only need to have some feel for how styles are applied but where they are set.
If going down this road, always take a look at the export tab. The preview tab only tells you it looks wrong. the export tab tells you why itâs wrong:
Indeed, if trying to learn CSS, export you pages and look at them there as (in any modern web browser) right-clicking on an element (some text, a heading, etc.) and using âInspect elementâ the browser will show you (cleaned-up) HTML source and the CSS cascade applied to it.
CSS uses an inheritance model similar to that you know from Tinderbox. so a a web browser may have a built-in (i.e. Tinderbox doc-level) default style but you can set it to a different style either in a particular element (i.e. this <h2> is styled differently to all other <h2>) or somewhere in-between (only <h2> in this branch of the outline are stored differently.
If you want to understand CSS, donât include Markdown code at this point as it muddies the water. Markdown is/was simple a way of indicating (to a Markdown-capable parser) HTMLâbut not CSSâelement mark-up. So, here in the forumâs Markdown-powered edit box, if you type:
**hello**
It is simply a way of not having to not type:
<b>hello</b>
Some people find Markdown less scary the output is still HTML.
The concept of CSS uses inheritance. So, here âcascadingâ == âinheritingâ and if youâre comfortable with Tinderbox attribute inheritances and recursing templates (e.g. the built-in template âHTML itemâ) than you already understand the key parts.
These days, CSS is very capable and expressive whilst still delivering on the concept of divorcing the visual styling/layout of a page from the HTML structure. Indeed, to get CSS working as expected, youâll learn (if necessary) to write cleaner HTML code. I mention that because, in the early web the folk designing browsers realised most of us had little understanding or love for code. Thus web browsers are very forgiving of formal errors in out code (not closing tags, not nesting tags coherently, etc.). So, we easily acquire the habit of writing âbadâ HTML code that works just fine.
Back to your post. You asked for a render like:
How about this (preview pane grab):
Apart form vertical spacing of the bullets, itâs what you asked for. Of course, when you see the code (TBX is below) it may not be achieved how you imagined. As with Tinderbox action code thereâ often more than one solution and indeed no single âmost correctâ solution.
Last tip, if you want to learn CSS, export you pages and inspect the code in a web browsers code inspection tools. As they includeâfor freeâreally good tools to see how the CSS is working. And, within Tinderbox, the export pane tells you far more that the previews pane. Using the latter alone, youâll like the client telling the decorator they wall isnât the right colour without any actionable info as to to what the right colour might be. Happily, CSS is all written/stored in plain text (with remarkably little code-affecting syntax) and massively written about online so there are tutorials to suit all sorts of learing styles.
Look at your âTop levelâ note in this TBX:
Outline with non bold type2.tbx (105.5 KB)
