CSS3 Notebook Paper
Notebook Lined Paper in Pure CSS by Adam Snodgrass. The entire content is editable. This is achieved by using the new HTML5 attribute - contenteditable.
The lines have been done with CSS3 gradients. You will notice that there are 4 gradients used. The first one is for the lighter red line on the right hand side. The second is for the first red line on the left hand side. The third is for the top white space and the fourth is for the blue lines. Each gradient except the third one is repeated to get the desired effect. The red lines have been positioned with proper background-position values. The top left hole has been done with box-shadow.
If you notice, the heading is a part of the <p> and still has a different font-size. This is because it is styled with the :first-line pseudo class.
Finally, the basic trick to get your sentences aligned properly on each line is to set a fixed and appropriate font-size and line-height.