How To Create a Notebook Design with CSS

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:

   




  
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;
}​

This is probably the best-looking thing about this tutorial, but it’s the thing I hate the most just because there was no way for me to make it to where if you added a new list item that it re-sized on its own. So every time you add a new li you have to add to the height of the red lines – which is a big pain in the butt. Other than that just make sure that you specify a width of 2px or else it will be one line.

One last thing, you must add text-indent of 25px the list-items so that the text does not render right next to the red lines.

Once you are ready to add the red lines, insert this code before the < ul>.

Your final CSS will look like this:

body {
  background-color: #f5f5f5;
  width: 600px;
  margin: 0 auto;
  padding: 0;
}
h4 {
  color: #cd0000;
  font-size: 42px;
  letter-spacing: -2px;
  text-align: left;
}
.list {
  color: #555;
  font-size: 22px;
  padding: 0 !important;
  width: 500px;
  font-family: courier, monospace;
  border: 1px solid #dedede;
}
.list li {
  list-style: none;
  border-bottom: 1px dotted #ccc;
  text-indent: 25px;
  height: auto;
  padding: 10px;
  text-transform: capitalize;
}
.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;
}
.lines {
  border-left: 1px solid #ffaa9f;
  border-right: 1px solid #ffaa9f;
  width: 2px;
  float: left;
  height: 495px;
  margin-left: 40px;
}

Here's a demo of the completed theme: