Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to create a notebook design with CSS ?

  • Last Updated : 19 Aug, 2020

In this article, we will be creating a notebook themed webpage template using simple CSS.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

HTML Code: The HTML code is used to create a basic structure of the body. To create a notebook design, we use unordered list items to add text inside the lines. After that we use some CSS properties to adjust the unordered list of items inside the notebook lines.




<!DOCTYPE html>
<html>
  
<head>
    <title>Notebook Design using CSS</title>
</head>
  
<body>
    <br />
    <h2>Geeks For Geeks</h2>
    <div class="verticalLines"></div>
    <ul class="listItemClass">
        <li>Courses</li>
        <li>Contribute</li>
        <li>Practice</li>
        <li>Internships</li>
        <li>Jobs</li>
        <li>Articles</li>
        <li>Profiles</li>
        <li>Placements</li>
        <li>Tutorials</li>
    </ul>
</body>
  
</html>

CSS code: CSS properties is used to create a notebook design.




body { 
    width: 480px;
    height: 450px;
    margin: 0 auto;
}
h2 {
    color: green
    text-align: center;  
    letter-spacing: -2px;  
}
.listItemClass {
    color: #858585;
    font-size: 21px;
    padding: 0;
    width: 500px;
    border: 2px solid #cecece;
}
.listItemClass li {
    list-style: none;
    border-bottom: 2px dotted #cecece;
    text-indent: 20px;
    height: auto
    padding: 10px;
}
.listItemClass li:hover {
    background-color: #f5f5f5;
}
.verticalLines { 
    width: 1px;
    float: left;
    height: 425px;
    margin-left: 35px;
    border-left: 1px solid green;
    border-right: 1px solid green;
}

Combine the complete code: In this section, we will combine the above two sections of codes (HTML and CSS codes) to design notebook.




<!DOCTYPE html>
<html>
  
<head>
    <title>Notebook Design using CSS</title>
  
    <style>
        body {
            width: 480px;
            height: 450px;
            margin: 0 auto;
        }
  
        h2 {
            color: green;
            text-align: center;
            letter-spacing: -2px;
        }
  
        .listItemClass {
            color: #858585;
            font-size: 21px;
            padding: 0;
            width: 500px;
            border: 2px solid #cecece;
        }
  
        .listItemClass li {
            list-style: none;
            border-bottom: 2px dotted #cecece;
            text-indent: 20px;
            height: auto;
            padding: 10px;
  
        }
  
        .listItemClass li:hover {
            background-color: #f5f5f5;
        }
  
        .verticalLines {
            width: 2px;
            float: left;
            height: 425px;
            margin-left: 35px;
            border-left: 1px solid green;
            border-right: 1px solid green;
        }
    </style>
</head>
  
<body>
    <h2>Geeks For Geeks</h2>
  
    <div class="verticalLines"></div>
    <ul class="listItemClass">
        <li>Courses</li>
        <li>Contribute</li>
        <li>Practice</li>
        <li>Internships</li>
        <li>Jobs</li>
        <li>Articles</li>
        <li>Profiles</li>
        <li>Placements</li>
        <li>Tutorials</li>
    </ul>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :