CSS how to create it

DEVONthink Automation
1

I am recently trying to use Markdown instead of RTF. I understand how to use CSS (thanks to the Forum and the book from Kouroshi Dini I just purchased) but I DO NOT UNDERSTAND how to create a CSS.

  1. What application do you use to create a CSS
  2. Where do you keep your CSS files
  3. I visited application support DT for CSS in the Library but its empty, i suppose i can gather the CSS files there
    Thanks for your help
2

Since CSS is just text, you can use any tool that permits you to create text files. Like DT, for example, or textedit or emacs,vi Atom, … Just don’t use word or pages.

Wherever you want. I suppose that you want to know where DT prefers to find the CSS files it should apply to your markdown (just a wild guess). That’s described already in DT’s documentation and has been discussed several times in the forum.

As to your last question: I have no idea what this directory is, but if you want to be able to work with these CSS files in DT, you better put them some place inside your DT database(s) or indexed folders.

1 Like
3

If I may join in here right away: CSS seem to be especially important for the design of websites. Is there any instruction on how to design a CSS that is only used for designing notes written in Markdown?

4

Styling Markdown is largely a matter of personal preference. It can be very simple or very complex.

Also, there is no standard definition of a “note”, so you’d have to determine what parts you require styling. As a simple example, this would change all the text to blue…

<style type="text/css">
body {
color:blue;
}
</style>

Also, check out this post…

5

Thank you very much for the information! I’ll be happy to look at it over the weekend.

What I’m looking for is a way to make the different headlines look different. When I write a Markdown note in DT, the only thing I can do so far with #, ##, ### etc. is to make the title appear smaller and smaller when I convert the note to PDF. But I would like to have some titles automatically italicised or underlined. Therefore I would like to know which commands I have to put into a CSS to make this happen.

6

Headers are h1, h2, through h6.
Here’s an example…

<style type="text/css">
h1 {
color:red;
font-style: italic;
}
</style>
7

As @BLUEFROG said, it all is very much a matter of taste. Markdown headings translate directly to HTML headings (# -> h1, ## -> h2 etc). Unordered lists (-) translate to ul in HTML, ordered lists (1.) to ol. Of course, markdown paragraphs are p elements in HTML, markdown tables are also tables in HTML. It’s all shockingly simple.
CSS is described in excruciating detail already in many places, little point in repeating all that here. MDN (Mozilla developer network) is a good point of reference, I think.
Some CSS for Markdown has been posted in the forums here, as I mentioned before. The search function should point you to these posts.

1 Like