Grow your CSS skills. Land your dream job.

How To Create a Notebook Design with CSS

Published by Guest Author

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:

<!DOCTYPE HTML>
<html> 

<head>
   <meta charset="UTF-8">
   <title>CSS Theme: Notepad</title>
   <link rel="stylesheet" href="style.css">
</head>

<body>

  <h4>Notes</h4>

  <ul id="List">
    <li>Eat Breakfeast</li>
    <li>Feed Pugsly, the cow</li>
    <li>Sit Down</li>
    <li>Eat lunch</li>
    <li>Call mom</li>
    <li>Tweet about feeding my cow, pugsly</li>
    <li>Join a hangout in google+</li>
    <li>Prepare Dinner</li>
    <li>Eat Dinner</li>
    <li>Get ready for bed</li>
    <li>Go to bed</li>
  </ul>

</body>

</html>

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>.

<div class="lines"></div>

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:

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.

Comments

  1. Good job, Allen. Keep up with the good work!

  2. This is exactly the kind of thing I envisioned in 1998 before I started designing websites. Then, I realized how difficult it would be.

    Thanks for making it look easy!

  3. Conor Haining
    Permalink to comment#

    14 years old? I thought I was the only one!

    • Jamie L.
      Permalink to comment#

      Me too!

    • pie
      Permalink to comment#

      Same ‘ere

    • Kevin G
      Permalink to comment#

      Someone should make a website for young teens interested in web development to collaborate on random things :)

    • Enrique de Larrazabal
      Permalink to comment#

      so im not the only one?

    • 15 here!

    • Conor Haining
      Permalink to comment#

      So I’m definitely not the only one.

    • There are many of us!

    • Ian
      Permalink to comment#

      Wow! And I thought I was the only CSS developer my age. @kevin: agreed

    • Permalink to comment#

      I got started myself in front in design/ development when I was around 15 too, I’ve been doing it believe it or not for 10+ years now! Glad to hear young people are getting very involved still in front end development. You can make lots of $ as a front-end developer, and plus, its fun! Good luck to all of you in the field.

    • Try and to not add Sentence case letters to classes and id makes it easier to work on linux servers :D

      btw I’m 15 so we should really start that Blog. I might after I finish some client work soon

    • Ryan G
      Permalink to comment#

      Yea im 17 and have been doing web development for 5 years now. If someone wants to start that blog I’ll definitely collaborate on that. I’ve created my own blog before but I hated the design, so I’d like to be part of something bigger.

    • Ian
      Permalink to comment#

      @Ryan: It’s on! I’ll post it as soon as I’m done.

    • It’s great to see so many people my age doing what I’m interested in. If anyone’s interested, my site’s alexforey.com, which I wrote myself from scratch.

      Anyway, just like to say thanks a lot, this kind of content is really important on the web today, and big thanks to CSS-Tricks for letting it happen.

    • Ryan G
      Permalink to comment#

      @Ian: Alright let me know what you got. I’m also working on a version as well with some friends of mine. We’ll see who wins ;)

    • Does anyone know if that blog was actually made? :)

    • Julian Cizmic
      Permalink to comment#

      I am only 13, but I started when I was 9.

  4. Very nice tutorial Allen, thank you for this.

    @Miles, I know exactly what you mean…I wanted the same thing.

  5. A very good article and I love the result. I would like to actually say thanks to Chris here.. I started Web Dev pretty early and I think the only blog that I remember visiting a lot was Eric Meyer’s, so it is great to see everything you do here is not only helping other young developers (well, I am 18 now so not quite so young any more!) but also giving them a chance to post an article here.

    I can see a few different ways of doing this, what would you say is the better way?

    One suggestion I would make is for the red lines, a 4px double would probably do pretty well.

  6. Getzel Rubashkin
    Permalink to comment#

    BH

    Instead of text-indent, which is only applied to the first line, you should probably use padding-left to push the text, regardless of the length, past your red lines.

    The possibility of a multiple line li also means you should rethink the lines being created by the border. One solution (using CSS3) might be to use background linear gradients, keyed to your line height.

    Come to think of it, you might be able to make those red lines using the same technique applied to the ul and get rid of the .lines div entirely.

    What do you think?

  7. Thanks everybody for the comments I hope to get better in the future and this was just a little side project.
    @Chris –
    I really appreciate you featuring me on your website; really means a lot!

  8. Would it be possible to add in ticks/crosses/ some kind of way of making it look like a checklist that is half completed?

  9. Matthew P.
    Permalink to comment#

    I like it.

    One way to make the red lines happen more automatically would be to use an data URI in the css. The image needed is so small that I think it suits this case well, though I suppose it’s technically not “pure” css since you can’t really edit it without using a special tool.

    
    body, .list li:hover {
      background-image: url(data:image/gif;base64,R0lGODlhBAABAIABAP+qn////yH5BAEAAAEALAAAAAAEAAEAAAIDRAIFADs=);
      background-repeat: repeat-y;
      background-position: 20px 0;  
    }
    

    If you just plugged this straight into the demo you’ll get some weird effects on hover due to the transitions being set to ‘all’, also the image doesn’t quite line up on hover – All easily remedied though.

  10. Permalink to comment#

    Damn, 14 years old and already has better design than me, now I’m depressed.

  11. It seems as though you might be able to accomplish the two left borders (the outer note border & the double red lines) by utilizing the outline attribute (which i believe is CSS3).

    This would allow the red lines to grow with the container as well as removing the need for the empty div.

    I’m by no means a designer, and i have no idea what the support for outline looks like among today’s browsers. These guys know more about it than i do!

  12. Permalink to comment#

    Allen, I wanted to check out your site but I’m getting a (nicely done) 404 page for everything other than home.

    • I am very sorry about that and I know it looks bad! You see, I just launched on the 2nd of this month and I’ve been so wrapped up in things that I haven’t been able to write all of those articles. On top of that I am re-designing http://allenlawson.net so when the look changes the articles will be written, up and working.

      Thanks so much.

    • Site looks great.
      Am curious to read a couple of your articles. Particularly the one regarding your choice to not use WordPress.
      Do you have an estimated date of re-launch?

    • Ryan G
      Permalink to comment#

      Same here, I would love to read your articles! Hope you can get your site up soon, Allen.

  13. akhil
    Permalink to comment#

    Thanks for the best article….This is awesome…

  14. al
    Permalink to comment#

    found I had to change ul id=List to ul class=list to make it work

    Al

    • Permalink to comment#

      Great article, although there is a bug in the HTML code. Too bad that Allen’s site is broken, would have loved to read some of his articles.

  15. wow chris nice timing i did this bullet.planimus.com like 2 days ago!! :( and it gave me hell to make

  16. Permalink to comment#

    Always wonderful to see CSS where an image would have been used in the past.

  17. Rajiv Dutta
    Permalink to comment#

    This thingy is flawed… what happen if the text doesnt fit in one line… the container stretched which cant be in original notebook :)…You have to make it such way so that if the text overflows it should be in the new line and the list below should go down to next line.

  18. Permalink to comment#

    Great tutorial!
    I’m a 16-year-old web developer/designer myself and and hoping to maybe be featured on this blog sometime in the future (I’ll write an article or two and email them to Chris to see what he thinks).
    I’d tend to agree with most of the points made about stopping the list from being a fixed width and for changing the .lines div into a pseudo element – but otherwise, good job!

  19. Chris
    Permalink to comment#

    Cool, thanks for it!

  20. your blog is really loading on stunning speed . above css trick effective is is looks very beatiful . its looks good in personal blogs i think

  21. I don’t know about anybody else, but I was disappointed when I couldn’t click and edit the list. This idea is screaming out for “content editable” and a nifty HTML5 storage solution to save what the user changes.

    I know that wasn’t the original idea, it’s just what springs to mind, it’s what my sub-conscious was expecting.

    • Originally in my design I did add content editable. I took it ou to. Last minute before I sent the file over to Chris because I really didn care for it. My whole idea was to make a notebook themed list I wasn’t focused on functionality. But yes this projects screams HTML5 and CSS3

  22. Well done Allen. I started web development when I was 15, but was no way near this good at that age. Nice!

  23. Really great to see that the young web community has also started contributing. Though I am 18 as of now, but I never even thought of making something like this so far.

    Hats off to your kiddo :)

  24. Perfect, just what I was after !

  25. zbrukas
    Permalink to comment#

    Just done a little tuning to your code :)

    Added CSS:

    .choose { float: right;
    position: relative;}

    .checkbox {
    content: “”;
    width: 0.55em;
    height: 1em;
    top: 50%;
    left: auto;
    -webkit-transform: rotate(45deg) skew(5deg);
    -webkit-transform-origin: 50% 50%;
    -moz-transform: rotate(45deg) skew(5deg);
    -moz-transform-origin: 50% 50%;
    -o-transform:rotate(45deg) skew(5deg);
    -o-transform-origin:50% 50%;
    -ms-transform: rotate(45deg) skew(5deg);
    -ms-transform-origin: 50% 50%;
    right: 1.1em;
    border: .35em solid;
    border-top: none;
    border-left: none;
    margin-top: -0.35em;
    margin-right: 0.5em;
    border-color: #DDD;
    }

    .checked { border-color: #06AB06;}

    .strikeout { text-decoration: line-through;}

    Added HTML: add <div class=”choose”>
    <div name=”option” value=”done” class=”checkbox”></div>
    </div> inside each <li>

    Added JS (jQuery)

    $(“.list”).find(“.checkbox”).each(function(i, el) {
    $(this).click(function(){
    $(this).toggleClass(‘checked’);
    $(this).parent().parent().toggleClass(‘strikeout’);
    });
    });

    Try it :) nice workout Allen :D​

  26. Permalink to comment#

    Impressive work for a “youngster”! Or “oldster” for that matter.

  27. Permalink to comment#

    Nice work Allen. Congratulations and keep going!

  28. william malo
    Permalink to comment#

    There is a much better way of doing this, that doesn’t require changing the height, and doesn’t require a dummy div.

    ul{list-style:none;padding:0;background:#ffe;box-shadow:0 0 7px #000}
    li{height:36px;border-bottom:solid 1px #bba}
    li:before{content:””;border-right:2px solid #ffaa9f;width:60px;float:left;height:100%;margin-right:10px}​

    Try it on any list =)

  29. Permalink to comment#

    Great tutorial! I can’t wait to play with this idea…

  30. Permalink to comment#

    Hi Allen I’m not going to comment on possible improvements you could make etc on this great post you’ve put together, what I’d like to express to you is that you are 14 years old, at a real breakthrough moment in web technology. You have a clear passion for this, and at 14 you are developing, thinking and working out problems with this technology. Sieze this opportunity, continue to do this work and you will absolutely succeed. In four years you will be 18, if you are doing this now at 14 and continue to build and develop you will be a serious expert by that time, a real expert.
    Well done, so good to see the web community rightly encouraging you.
    PS: you should read the book ‘outliers’ and the 10,000 hour rule especially, your generation has an amazing future the timing is amazing for you.

  31. To think that 14 years ago I created my first website. Great to see inspiring young minds. Keep up the great work.

  32. A very good idea to apply list as a lines. Although I would prefer to use gradients as a paper line. But, using list as a helper element will give us a new idea: Hey, we can use this as sort of a small menu if you insert anchor tag in it :)

    PS: Umm.. I think you mean <ul class="list"> instead of <ul id="list">

  33. Hey Allen, I am so excited and surprises. when I was 14 years old, I was not as good as like you. You will be an expert and will have expertise to make differences on web technology in the future. keep going to make a wonderful work. in 4 years later, you will be an extremely expert developers. Good job

  34. ALEX
    Permalink to comment#

    :)

  35. Great trick man, very nice effect!
    -Chris

  36. Permalink to comment#

    Your solution isn’t the best one in my opinion – first of all it seems to be a bit broken in FF10 as the “lines” div is shorter than the list itself. Why not just put the gray outline on the element, assign it a left padding of 40px and give elements a left “double” red border? This way you don’t even need the .lines element. Oh and the text-indent also seems to not work quite as expected if the text is split into multiple lines, maybe using padding would be prefered?

  37. Permalink to comment#

    I like how simple the design looks…

    I tried testing this on google chrome, will this be compatible with IE6??

  38. Permalink to comment#

    Pretty cool, A classic theme in a modern device looks great.

  39. egiova
    Permalink to comment#

    I’ll never have enough time to dev this kind of things, even if I’m thinking about.
    Thanks to demography (among other things) for young folks who have time AND imagination enough for doing so.
    Cool post. Yep.

  40. egiova
    Permalink to comment#

    For the record: At 14 years old I was painting.
    Computers was for SciFi movies.

  41. Permalink to comment#

    Coming this from a 14 year old is quite enticing. Not only the result is great but the CSS is optimized too. Great going Allen!

  42. Wow… 14 years old? I was started in web development at 16 years old. Great job Allen!

  43. Permalink to comment#

    Your Awesome

  44. Jhansi
    Permalink to comment#

    Hi Allen,
    I am not getting the line, its displaying just list of text with red margin. your code is not look like the above pix………..

  45. Nice article. This is what i was looking around. Thanks a lot.

  46. I personally would have used a list position of ‘outside’ so the text wrap has the same left alignment. Otherwise, a neat effect Chris!

    Best,
    Dan DiGangi
    @ddigangi

    • jhansi
      Permalink to comment#

      Hello friends,
      My Requirement is, i have to enter the text in text area box, but it should look like a page in the note book………… can you people help me for this Requirement ?

  47. The lines could also be done with ::after to avoid the extra DIV:

    http://jsfiddle.net/codepo8/KVjFQ/1953/

    I learned that from an awesome speaker at Converge SE

  48. Is there any other young (14 yrs old) web developers out there from the UK? I am fluent in CSS/HTML/JS(inc jQuery)/PHP, if you have similar talents then add me on Twitter (@tompntn) and we can help and discuss each others work etc… Know it’s a long shot but worth a try :)

  49. coder
    Permalink to comment#

    im 13 i know: html5, css3, javascript, jquery, and asp.net i live in germany im american i am making a website where young teens can learn web development and more i have two employees who are also 13 wanna the join the codin team?

  50. coder
    Permalink to comment#

    @Tom Pointon that means you xD

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".