{"id":16338,"date":"2012-02-23T14:58:48","date_gmt":"2012-02-23T21:58:48","guid":{"rendered":"http:\/\/css-tricks.com\/?p=16338"},"modified":"2017-04-13T18:00:01","modified_gmt":"2017-04-14T01:00:01","slug":"how-to-create-a-notebook-design-with-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-to-create-a-notebook-design-with-css\/","title":{"rendered":"How To Create a Notebook Design with CSS"},"content":{"rendered":"
From Chris: <\/strong>Hey folks! Today is a guest post by 14 year old developer Allen Lawson<\/a>. 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.<\/div>\n

This tutorial will show you how to create a notebook themed website using only CSS. <\/p>\n

\"\"
\n<\/figure>\n

First, we will start out by creating a basic wrapper by specifying that the body tag should have the following CSS properties: <\/p>\n

body {\r\n  background-color: #f5f5f5;\r\n  width: 600px;\r\n  margin: 0 auto;\r\n  padding: 0;\r\n}<\/code><\/pre>\n
Next, we are going to make an unordered list, I’ll call mine list<\/code>:<\/p>\n
.list {\r\n  color: #555;\r\n  font-size: 22px;\r\n  padding: 0 !important;\r\n  width: 500px;\r\n  font-family: courier, monospace;\r\n  border: 1px solid #dedede;\r\n}<\/code><\/pre>\n
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.<\/p>\n
Next we style the li’s:<\/p>\n
.list li {\r\n  list-style: none;\r\n  border-bottom: 1px dotted #ccc;\r\n  text-indent: 25px;\r\n  height: auto;\r\n  padding: 10px;\r\n  text-transform: capitalize;\r\n}<\/code><\/pre>\n
This is pretty much self-explanatory. Just make sure you add the border-bottom: 1px dotted #ccc;<\/code>. This, to me, is what really gives it the whole \u201cnotebook paper\u201d theme.  <\/p>\n
If you want, you can use the pseudo class :hover on li to make it look even cleaner.  Who doesn\u2019t appreciate a nice hover affect?<\/p>\n
.list li:hover {\r\n  background-color: #f0f0f0;\r\n  -webkit-transition: all 0.2s;\r\n  -moz-transition:    all 0.2s;\r\n  -ms-transition:     all 0.2s;\r\n  -o-transition:      all 0.2s;\r\n}<\/code><\/pre>\n
Here is our HTML so far: <\/p>\n
<!DOCTYPE HTML>\r\n<html> \r\n\r\n<head>\r\n   <meta charset=\"UTF-8\">\r\n   <title>CSS Theme: Notepad<\/title>\r\n   <link rel=\"stylesheet\" href=\"style.css\">\r\n<\/head>\r\n\r\n<body>\r\n\r\n  <h4>Notes<\/h4>\r\n\r\n  <ul id=\"List\">\r\n    <li>Eat Breakfeast<\/li>\r\n    <li>Feed Pugsly, the cow<\/li>\r\n    <li>Sit Down<\/li>\r\n    <li>Eat lunch<\/li>\r\n    <li>Call mom<\/li>\r\n    <li>Tweet about feeding my cow, pugsly<\/li>\r\n    <li>Join a hangout in google+<\/li>\r\n    <li>Prepare Dinner<\/li>\r\n    <li>Eat Dinner<\/li>\r\n    <li>Get ready for bed<\/li>\r\n    <li>Go to bed<\/li>\r\n  <\/ul>\r\n\r\n<\/body>\r\n\r\n<\/html><\/code><\/pre>\n
Lastly, we will add the vertical red lines:<\/p>\n
.lines {\r\n  border-left: 1px solid #ffaa9f;\r\n  border-right: 1px solid #ffaa9f;\r\n  width: 2px;\r\n  float: left;\r\n  height: 495px;\r\n  margin-left: 40px;\r\n}\u200b<\/code><\/pre>\n
This is probably the best-looking thing about this tutorial, but it\u2019s 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 \u2013 which is a big pain in the butt.   Other than that just make sure that you specify a width<\/code> of 2px<\/code> or else it will be one line.<\/p>\n
One last thing, you must add text-indent<\/code> of 25px<\/code> the list-items so that the text does not render right next to the red lines.<\/p>\n
Once you are ready to add the red lines, insert this code before<\/strong> the <ul><\/code>.  <\/p>\n
<div class=\"lines\"><\/div><\/code><\/pre>\n
Your final CSS will look like this:<\/p>\n
body {\r\n  background-color: #f5f5f5;\r\n  width: 600px;\r\n  margin: 0 auto;\r\n  padding: 0;\r\n}\r\nh4 {\r\n  color: #cd0000;\r\n  font-size: 42px;\r\n  letter-spacing: -2px;\r\n  text-align: left;\r\n}\r\n.list {\r\n  color: #555;\r\n  font-size: 22px;\r\n  padding: 0 !important;\r\n  width: 500px;\r\n  font-family: courier, monospace;\r\n  border: 1px solid #dedede;\r\n}\r\n.list li {\r\n  list-style: none;\r\n  border-bottom: 1px dotted #ccc;\r\n  text-indent: 25px;\r\n  height: auto;\r\n  padding: 10px;\r\n  text-transform: capitalize;\r\n}\r\n.list li:hover {\r\n  background-color: #f0f0f0;\r\n  -webkit-transition: all 0.2s;\r\n  -moz-transition:    all 0.2s;\r\n  -ms-transition:     all 0.2s;\r\n  -o-transition:      all 0.2s;\r\n}\r\n.lines {\r\n  border-left: 1px solid #ffaa9f;\r\n  border-right: 1px solid #ffaa9f;\r\n  width: 2px;\r\n  float: left;\r\n  height: 495px;\r\n  margin-left: 40px;\r\n}<\/code><\/pre>\n
\u200b<\/p>\n
Here’s a demo of the completed theme:<\/p>\n
View Demo<\/a><\/p>\n
From Chris: <\/strong>Thanks again to Allen Lawson<\/a>! 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.<\/div>\n","protected":false},"excerpt":{"rendered":"
This tutorial, a guest post by young developer Allen Lawson, will show you how to create a notebook themed website using only CSS. <\/p>\n","protected":false},"author":36717,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":152361,"url":"https:\/\/css-tricks.com\/creating-meet-team-page-wordpress\/","url_meta":{"origin":16338,"position":0},"title":"Creating a “Meet The Team” Page in WordPress","date":"October 9, 2013","format":false,"excerpt":"The following is a guest post by Kevin Leary. I was pretty stoked to get this guest post submission from Kevin because it's my favorite kind of tutorial: practical and detailed. Almost every custom theme I develop with WordPress requires a Management Team or Meet the Team page. If I\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":362616,"url":"https:\/\/css-tricks.com\/css-scroll-snap-slide-deck\/","url_meta":{"origin":16338,"position":1},"title":"CSS Scroll Snap Slide Deck That Supports Live Coding","date":"February 7, 2022","format":false,"excerpt":"Virtual conferences have changed the game in terms of how a presenter is able to deliver content to an audience. At a live event it\u2019s likely you just have your laptop, but at home, you may have multiple monitors so that you can move around windows and make off-screen changes\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/s_7D85D8A43A72F77C800DD73331D3BC4CD2768EE61D1955657BAA888C80FC51B0_1642040704100_slide-topic.png?fit=1200%2C631&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":376748,"url":"https:\/\/css-tricks.com\/everything-you-need-to-know-about-the-gap-after-the-list-marker\/","url_meta":{"origin":16338,"position":2},"title":"Everything You Need to Know About the Gap After the List Marker","date":"March 2, 2023","format":false,"excerpt":"I was reading \u201cCreative List Styling\u201d on Google\u2019s web.dev blog and noticed something odd in one of the code examples in the ::marker section of the article. The built-in list markers are bullets, ordinal numbers, and letters. The ::marker pseudo-element allows us to style these markers or replace them with\u2026","rel":"","context":"In "Article"","img":{"alt_text":"List item with bullet marker. A double-sided arrow occupies the space between the marker and the text.","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/list-marker-gap.png?fit=1200%2C769&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":306134,"url":"https:\/\/css-tricks.com\/building-a-scalable-css-architecture-with-bem-and-utility-classes\/","url_meta":{"origin":16338,"position":3},"title":"Building a Scalable CSS Architecture With BEM and Utility Classes","date":"April 21, 2020","format":false,"excerpt":"Maintaining a large-scale CSS project is hard. Over the years, we've witnessed different approaches aimed at easing the process of writing scalable CSS. In the end, we all try to meet the following two goals: Efficiency: we want to reduce the time spent thinking about how things should be done\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/website-sketch.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":316298,"url":"https:\/\/css-tricks.com\/how-to-make-a-list-component-with-emotion\/","url_meta":{"origin":16338,"position":4},"title":"How to Make a List Component with Emotion","date":"July 8, 2020","format":false,"excerpt":"I\u2019ve been doing a bit of refactoring this week at Sentry and I noticed that we didn\u2019t have a generic List component that we could use across projects and features. So, I started one, but here\u2019s the rub: we style things at Sentry using Emotion, which I have only passing\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/emotion-lists.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":338003,"url":"https:\/\/css-tricks.com\/the-making-and-potential-benefits-of-a-css-font\/","url_meta":{"origin":16338,"position":5},"title":"The Making (and Potential Benefits) of a CSS Font","date":"April 22, 2021","format":false,"excerpt":"Not a typical one, at least. Each character is an HTML element, built with CSS. A true web font! Let me elaborate. This is a way to render text without using any font at all. Random text is split with PHP into words and letters, then rendered as HTML elements\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/css-font-example.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/16338"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/36717"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=16338"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/16338\/revisions"}],"predecessor-version":[{"id":253713,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/16338\/revisions\/253713"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=16338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=16338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=16338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}