Unobtrusive Sidenotes is a simple mix of Javascript and CSS that makes it easy to incorporate sidenotes into your web pages or blogs.

It even includes a handy set of colors (all set in CSS and tweak-able) to create that oh-so-subtle correlation between the sidenote and the relevant text.

Sidenotes are completely styled up through CSS. You can set the border and background color of sidenotes as well as positioning with CSS. The colors for side notes and highlighting will alternate between four set color schemes.

You can easily change the default colors by editing the CSS that is referenced by the script. The specific CSS styles are included in the HTML file as well as the example link below. Note that the css style names must stay in tact for the script to work.

You can also control where the sidenotes end up relative to the paragraph through the CSS. In our example code, the sidenotes alternate between left and right floating within the passage. You can easily set the sidenotes to only float left or right by tweaking the CSS.

One of the cool features of Sidenotes is the ability to format and mark up the text within by simply using a slightly tweaked version of basic HTML markup. You can use standard HTML tags within your sidenotes text.