From Chris: Hey folks! Today is a guest post by 14 year old developer Allen Lawson. I've been noticing a lot more engagement and activity in the web community by younger folks and I think that's awesome and want to encourage it the best I can.
This tutorial will show you how to create a notebook themed website using only CSS.


First, we will start out by creating a basic wrapper by specifying that the body tag should have the following CSS properties:

body { background-color: #f5f5f5; width: 600px; margin: 0 auto; padding: 0; } Next, we are going to make an unordered list, I'll call mine list:

.list { color: #555; font-size: 22px; padding: 0 !important; width: 500px; font-family: courier, monospace; border: 1px solid #dedede; } The reason why its important to add padding:0; is because later on in the tutorial when we add the red notebook lines things will get messed up. Width can be specified to whatever you want; I just did 600px because it fits the best. Another key property here is the border. This keeps it looking nice and clean.

Next we style the li's:

.list li { list-style: none; border-bottom: 1px dotted #ccc; text-indent: 25px; height: auto; padding: 10px; text-transform: capitalize; } This is pretty much self-explanatory. Just make sure you add the border-bottom: 1px dotted #ccc;. This, to me, is what really gives it the whole “notebook paper” theme.

If you want, you can use the pseudo class :hover on li to make it look even cleaner. Who doesn’t appreciate a nice hover affect?

.list li:hover { background-color: #f0f0f0; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; } Here is our HTML so far:

CSS Theme: Notepad Notes

  • Eat Breakfeast
  • Feed Pugsly, the cow
  • Sit Down
  • Eat lunch
  • Call mom
  • Tweet about feeding my cow, pugsly
  • Join a hangout in google+
  • Prepare Dinner
  • Eat Dinner
  • Get ready for bed
  • Go to bed
Lastly, we will add the vertical red lines:

.lines { border-left: 1px solid #ffaa9f; border-right: 1px solid #ffaa9f; width: 2px; float: left; height: 495px; margin-left: 40px; }

More...