A modern, digital adaptation of the Cornell Notes system that enhances note-taking workflow while preserving the traditional format for review. ## What is Cornell Notes? The Cornell Notes system divides pages into three sections: a narrow left column for cues and questions, a wider right column for main notes, and a bottom section for summaries. This CSSClass brings this proven academic method to Obsidian with digital enhancements that make it more flexible than traditional paper formats. ## Digital Advantages Over Analog **Seamless Note-Taking Flow:** Unlike paper Cornell Notes where you must plan your layout in advance, this digital version allows you to add notes naturally as you read or study. Type your thoughts directly **above** the content they relate to, and they'll automatically position correctly in Reading Mode. **Mode-Specific Display:** In Source Mode and Live Preview, notes appear inline where you type them, keeping your thought process intact without forcing you to jump between sections. Switch to Reading Mode to see the traditional Cornell format with notes neatly organized in the left column alongside the main content. **Reduced Setup Overhead:** No more complex formatting or custom callout management. Simply add your notes in aside callouts above relevant content, and the layout handles itself. ## How to Use ### Basic Setup Add the Cornell Notes CSSClass to your frontmatter: ```yaml --- cssclasses: cornell --- ``` ### Note-Taking Workflow 1. **Write Content Normally** Type your main content, lectures, or reading material as you normally would. 2. **Add Notes with Aside Callouts** Place your notes, questions, or cues in aside callouts directly above the content they reference: ```markdown >[!aside] Key concept: Always define variables before use Variables in Python are created when you assign a value to them. ``` 3. **Use Standard Callouts for Titles and Summaries** Full-width elements like titles and summaries use regular callouts: ```markdown >[!note] Lecture Title Python Programming Fundamentals >[!summary] Today we covered variable assignment, data types, and basic operations. ``` 4. When you need callouts to appear in the main content area (right side), use the `inline` metadata class: ```markdown >[!tip|inline] This appears on the right side, within the main content flow. ``` Combine different elements naturally: ```markdown >[!aside] Important formula to remember The quadratic formula: x = (-b ± √(b²-4ac)) / 2a >[!warning|inline] Remember: this only works when a ≠ 0 `````` ### Complete Example ```markdown --- cssclasses: - cornell --- >[!note] Psychology 101: Memory Systems Lecture 15 - Long-term Memory >[!aside] What are the main types of LTM? Long-term memory consists of several distinct systems that store different types of information for extended periods, ranging from minutes to decades. Unlike short-term memory, which has limited capacity and duration, long-term memory appears to have virtually unlimited storage capacity and can retain information indefinitely. These memory systems evolved to handle different cognitive demands and operate through distinct neural pathways in the brain. Understanding these systems helps explain why we can remember how to ride a bicycle after years of not cycling, yet struggle to recall specific details from a lecture we attended last week. The organisation of long-term memory into specialised systems allows for efficient encoding, storage, and retrieval of the vast amounts of information we accumulate throughout our lives. >[!aside] On Memory Procedural = skills Declarative = facts **Procedural Memory** stores information about how to perform tasks and skills, like riding a bicycle or typing on a keyboard. **Declarative Memory** is divided into two subcategories: - Episodic memory: Personal experiences and events - Semantic memory: General facts and knowledge >[!summary] Long-term memory includes procedural memory (skills) and declarative memory, which splits into episodic (personal events) and semantic (facts) systems. ``` ## Advanced Usage ### Inline Callouts for Right-Side Notes When you need callouts to appear in the main content area (right side), use the `inline` metadata class: ```markdown >[!tip|inline] This appears on the right side, within the main content flow. ``` ## Visual Layout ### Source Mode & Live Preview - Notes appear inline where you type them - Natural writing flow without layout interruption - Clear visual distinction between notes and content ### Reading Mode - **Left Column:** Aside callouts display as margin notes - **Right Column:** Main content and inline callouts - **Full Width:** Standard callouts span both columns - **Traditional Cornell format** for optimal review ## Theme Compatibility Notes - **Fully Compatible:** Willemstad and most community themes - **Limited Support:** Minimal theme (formatting will not display correctly due to Minimal's own customisations) - **General Compatibility:** Works with standard Obsidian installations ## Download & Installation **Get the CSS snippet:** [Cornell Notes Gist](https://gist.github.com/tingmelvin/6c5fb72d6e4d8e4a0ee8b50b960339e8) 1. Download the CSS file from the gist 2. Place in `.obsidian/snippets/` folder 3. Enable in Settings → Appearance → CSS Snippets 4. Add `cssclasses: cornell-notes` to your note frontmatter The Cornell Notes CSSClass transforms traditional note-taking into a flexible, digital-first experience that adapts to your workflow while preserving the proven benefits of the Cornell system.