How To Create a Notebook Design with CSS

Guest Author — Thu, 23 Feb 2012 21:58:48 +0000

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.

//AN_Xml:

This tutorial will show you how to create a notebook themed website using only CSS.

//AN_Xml:

//AN_Xml: //AN_Xml:

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

//AN_Xml:

body {
//AN_Xml:  background-color: #f5f5f5;
//AN_Xml:  width: 600px;
//AN_Xml:  margin: 0 auto;
//AN_Xml:  padding: 0;
//AN_Xml:}

//AN_Xml:

Next, we are going to make an unordered list, I'll call mine list:

//AN_Xml:

.list {
//AN_Xml:  color: #555;
//AN_Xml:  font-size: 22px;
//AN_Xml:  padding: 0 !important;
//AN_Xml:  width: 500px;
//AN_Xml:  font-family: courier, monospace;
//AN_Xml:  border: 1px solid #dedede;
//AN_Xml:}

//AN_Xml:

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.

//AN_Xml:

Next we style the li's:

//AN_Xml:

.list li {
//AN_Xml:  list-style: none;
//AN_Xml:  border-bottom: 1px dotted #ccc;
//AN_Xml:  text-indent: 25px;
//AN_Xml:  height: auto;
//AN_Xml:  padding: 10px;
//AN_Xml:  text-transform: capitalize;
//AN_Xml:}

//AN_Xml:

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.

//AN_Xml:

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?

//AN_Xml:

.list li:hover {
//AN_Xml:  background-color: #f0f0f0;
//AN_Xml:  -webkit-transition: all 0.2s;
//AN_Xml:  -moz-transition:    all 0.2s;
//AN_Xml:  -ms-transition:     all 0.2s;
//AN_Xml:  -o-transition:      all 0.2s;
//AN_Xml:}

//AN_Xml:

Here is our HTML so far:

//AN_Xml:


//AN_Xml: 
//AN_Xml:
//AN_Xml:
//AN_Xml:   
//AN_Xml:   CSS Theme: Notepad
//AN_Xml:   
//AN_Xml:
//AN_Xml:
//AN_Xml:
//AN_Xml:
//AN_Xml:  Notes
//AN_Xml:
//AN_Xml:  
//AN_Xml:    Eat Breakfeast
//AN_Xml:    Feed Pugsly, the cow
//AN_Xml:    Sit Down
//AN_Xml:    Eat lunch
//AN_Xml:    Call mom
//AN_Xml:    Tweet about feeding my cow, pugsly
//AN_Xml:    Join a hangout in google+
//AN_Xml:    Prepare Dinner
//AN_Xml:    Eat Dinner
//AN_Xml:    Get ready for bed
//AN_Xml:    Go to bed
//AN_Xml:  
//AN_Xml:
//AN_Xml:
//AN_Xml:
//AN_Xml:

//AN_Xml:

Lastly, we will add the vertical red lines:

//AN_Xml:

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

//AN_Xml:

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.

//AN_Xml:

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.

//AN_Xml:

Once you are ready to add the red lines, insert this code before the

Your final CSS will look like this:

body {
//AN_Xml:  background-color: #f5f5f5;
//AN_Xml:  width: 600px;
//AN_Xml:  margin: 0 auto;
//AN_Xml:  padding: 0;
//AN_Xml:}
//AN_Xml:h4 {
//AN_Xml:  color: #cd0000;
//AN_Xml:  font-size: 42px;
//AN_Xml:  letter-spacing: -2px;
//AN_Xml:  text-align: left;
//AN_Xml:}
//AN_Xml:.list {
//AN_Xml:  color: #555;
//AN_Xml:  font-size: 22px;
//AN_Xml:  padding: 0 !important;
//AN_Xml:  width: 500px;
//AN_Xml:  font-family: courier, monospace;
//AN_Xml:  border: 1px solid #dedede;
//AN_Xml:}
//AN_Xml:.list li {
//AN_Xml:  list-style: none;
//AN_Xml:  border-bottom: 1px dotted #ccc;
//AN_Xml:  text-indent: 25px;
//AN_Xml:  height: auto;
//AN_Xml:  padding: 10px;
//AN_Xml:  text-transform: capitalize;
//AN_Xml:}
//AN_Xml:.list li:hover {
//AN_Xml:  background-color: #f0f0f0;
//AN_Xml:  -webkit-transition: all 0.2s;
//AN_Xml:  -moz-transition:    all 0.2s;
//AN_Xml:  -ms-transition:     all 0.2s;
//AN_Xml:  -o-transition:      all 0.2s;
//AN_Xml:}
//AN_Xml:.lines {
//AN_Xml:  border-left: 1px solid #ffaa9f;
//AN_Xml:  border-right: 1px solid #ffaa9f;
//AN_Xml:  width: 2px;
//AN_Xml:  float: left;
//AN_Xml:  height: 495px;
//AN_Xml:  margin-left: 40px;
//AN_Xml:}

Here's a demo of the completed theme:

View Demo

From Chris: Thanks again to Allen Lawson! There may be some things in this article that could be done better or differently, so let's be constructive in the comments and make it better.

How To Create a Notebook Design with CSS is a post from CSS-Tricks

My Slides from InControl 2012: What We Don’t Know

Chris Coyier — Wed, 22 Feb 2012 19:09:17 +0000

I know it's weird to go through slides of a presentation outside of the context of a real talk (and pales in comparison to the experience of being there) but nonetheless, there may be bits of goodness you can extract from them.

//AN_Xml:

[Slides are embedded, come to site to view them or view on SpeakerDeck]

//AN_Xml: