Highly effective Cornell Notes with Obsidian

Cornell Notes

I recently learned about Cornell Notes, which is a very effective way to take notes that focuses on memory retention and organization of data. It was developed by Cornell University.
You can read more about Cornell Notes here: Cornell Note-taking System

What is Cornell note?

The Cornell note layout with a cue column for prompts, a note-taking area for detailed information, and a summary section for condensing key points

How to take Cornell Notes in Obsidian

Obsidian mainly focuses on the Zettelkasten method for note-taking, so it does not support the Cornell Note out of the box. But with Obsidian's highly extensible nature, it's easy to achieve the appeal of Cornell Notes with Obsidian using CSS snippets.

To achieve this, we need to follow certain patterns. My favorite method is to use callouts for cues and the summary. Here is a sample markdown note and what it looks like in the end.

>[!cue] This is cue

Notes go here
- Could be a 
- list
- of items

or a paragraph

>[!cue] This is another cue

Note about the cue, could be a list or  anything else

>[!summary] This is a summary
> This is the content of summary

How it display in obsidian

Setup

First, you need to create snippets in your vault under this path .obsidian/snippets/cornell-notes.css

add the following CSS content there

.markdown-preview-view .callout[data-callout="cue"] {
    float: right;
    padding: 8px;
    position: absolute;
    left: 4%;
    width: 20%;
    max-width: 300px;
    min-width: 150px;
    max-height: 200px;
    color: white;
}

.markdown-preview-view .callout[data-callout="cue"] .callout-icon {
    display: none;
}

.markdown-preview-view.is-readable-line-width .markdown-preview-sizer {
    max-width: 50%;
}

.markdown-preview-view .callout[data-callout="summary"] {
    margin-top: 100px;
}

The last step is to enable the snippets from the setting. Goto Obsidian Settings -> Appearance enabled the toggle of Cornell notes.

That's all. Enjoy...

*** NOTE: Please feel free to suggest any improvement to the css

Comments

[David Jiménez]

Thank you for your post, it's been very helpful since this was more or less what I was looking for when taking notes in Obsidian.
I've slightly modified the CSS, since the max-width: 50% messed up the source editing, as well as using the standard callout info:

.markdown-preview-view.cornell-note .callout[data-callout="info"] {
    float: right;
    padding: 8px;
    position: absolute;
    left: 4%;
    width: 20%;
    max-width: 300px;
    min-width: 150px;
    max-height: 200px;
    color: white;
}

.markdown-preview-view.cornell-note .callout[data-callout="info"] .callout-icon {
    display: none;
}

.markdown-preview-view.cornell-note .markdown-preview-sizer,
.markdown-source-view.cornell-note .markdown-preview-sizer {
    max-width: var(--file-line-width);
    margin-left: auto;
    margin-right: auto;
    margin-inline: auto;
    width: 100%;
}

.markdown-preview-view.cornell-note .callout[data-callout="summary"] {
    margin-top: 100px;
}

[Sanath Samarasinghe]

I really appreciate it, thanks for the suggestion