Notenik will happily supply its own CSS by default, if you take no other action. The default CSS provided by Notenik will generally make your content look quite presentable. The default CSS embedded within Notenik is also updated and extended from time to time, through the normal Notenik update process, to make occasional improvements.

Notenik allows you to easily tweak the default CSS that it uses, without requiring you to learn any CSS.

To take this approach, open Notenik > Display Appearance.

Here you’ll find a number of options.

• You can center headings for any sequence of levels.

• You can modify the fonts used for body text and/or for headings and/or for the List tab on the left.

• You can choose from a short list of common fonts, or elect to choose from the full list of fonts installed on your system.

• And you can also modify font sizes.

All of this can be done without learning any CSS syntax. You can see the CSS being generated for you, though, and you can see what effect your updates will have.

Once you’re done making your adjustments, just hit OK to put them into effect.

Note that changes made here will affect the display of all of your collections — not just the one currently open.

Also, assuming you are interested in publishing your site to the web, be sure and choose web safe fonts. Implementation of custom fonts is beyond the scope of this tutorial, and you must understand that, just because a particular font is available on your Mac, that doesn’t mean that it will be available to your readers when they access your site from the web.

Yet another option for adjusting the CSS used within Notenik is to place a file named display.css within your collection folder. This CSS will then be used in place of Notenik’s default CSS for that collection.

An easy way to start this process is to select Collection > Generate Sample Display Template.

Two new files will then be generated within your collection folder.

• display.css
• display.html

For our purposes now, delete the display.html file, since we won’t need that just to customize our CSS.

Then open the display.css file with your trusty text editor.

What you’ll see now will be all of the default CSS supplied by the version of Notenik that you are using.

Now feel free to completely replace all of this, or to add/delete/modify any bits and bobs that aren’t quite to your satisfaction.

When you’re done making your edits, save your changes within your text editor, then go back to your Notenik collection and select Collection > Reload Collection (Opt-Cmd-J). You should now see the results of your CSS changes.

As described earlier, in our discussion of 4.2 CSS frameworks, you can drop several different CSS files into a special collection subfolder named css, and then choose to apply any one of them using Collection > Settings (Cmd-;).

Such a choice would override any of the other Notenik CSS options we’ve described so far.

And then the final option for modifying the CSS used by Notenik is to provide one or more .css files within the special add-ins folder, as described previously in our discussion of 9.4 Embedded video.

Note that any CSS “add-ins” will be applied in addition to whatever other CSS options you have chosen, through one of the means above, and not instead of any of those other options.