CSS Perpustakaan Style

Sebelum Saya Memberikan codenya inget ya .

1. Buat Folder css.
2. Simpan Code dengan nama Sytle.css
3. Kalo belum Berhasil koment ajah atau ada contact saya diatas
4. Ilmu yang saya berikan harap dishare kembali

========================

*{
    padding :0 ;
    margin  :0 ;
}

body{
    width: 100%;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    background-color: #dedede;
}

.marquee{
    background-color: #000000;
    color: #000000
}

p{
    margin-bottom: 20px;
    line-height: 1.5em;
}

h2{
    font-size: 17px;
    font-weight: 600;
}

h3{
    font : #fff;
    font-size: 17px;
    padding-bottom: 10px;
    border-bottom: 4px solid #fff;
}

h4{
    font : white;
    padding-top: 10px;
    text-align: left;
    font-size: 15px;
}

/*Halaman Buku*/

.buku {
    padding: 0 6px;
    margin-right: 10px;
    float: left;
    border:1px solid #dedede;
    width: 23%;
}

.gallery:hover {
}

.foto img {
    padding:10px 0 5px 0;
    width: 100%;
    height: 250px;
}

.judul {
    font-size: 13px;
    font-weight: 600;
    padding:0 0 3px 0;
    text-align: left;
}

.penulis{
    font-size:10px;
    padding-bottom: 5px;
}

* {
    box-sizing: border-box;
}

a{
    text-decoration: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-style: inherit;
    font-size: 20px;
    color: #d4d2db;
}

a:hover{
    color: #000;
}

#container{
    max-width: 1140px;
    text-align: : center;
    background: #fff;
    overflow: hidden;
    border:0px solid #d9d9d9;
    margin : 0px 90px;
    padding:20px 20px 20px 20px;
}

.header{
    border-radius: 10px 10px 0 0 ;
    padding: 10px 0 0 10px;
    text-align : center;

}

.header h1{
    font-size: 40px;
    color:#fff;
    padding-bottom: 10px;
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    text-align:center;
}

/* main */

.left{
    width: 280px;
    color:#fff;
    border: 1px solid #dedede;
    padding: 10px;
    margin: 10px 10px 10px 0px;
    float: left;
    background-color: #281e5a;
}

.left ul{
    list-style-type: none;
}

.left ul li{
    display: block;
}

.left ul li a{
    display: block;
    font-size: 17px;
    border-bottom: 1px dotted #d4d2db;
    margin-bottom: 10px;
    padding: 10px 5px;
    font:  #64bed4;
}

.left ul li a:hover{
    color: #ca1414 ;

}

.middle{
    width: 790px;
    border: 30px solid #191970;
    padding: 5px;
    margin: 10px;
    float: left;

}

.middle a{
    font-weight: auto;
}

.middle2{
    width: 790px;
    height:100%;
    padding: 0px;
    margin: 5px;
    float: left;
}

.middle2 a{
    font-weight: bold;
}

.right{
    width: 280px;
    color: #fff;
    border: 1px solid #dedede;
    padding: 10px;
    margin: 10px 0 10px 10px;
    float: right;
    background-color: #281e5a;
}

.right ul{
    list-style-type: none;
}

.right ul li{
    display: block;
}

.right ul li a{
    display: block;
    font-size: 17px;
    border-bottom: 1px dotted #d4d2db;
    margin-bottom: 10px;
    padding: 10px 5px;
}

.right ul li a:hover{
    color: #ca1414;
}

#footer{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 20px;
    color: #6813c9;
    clear: both;
    border: 1px solid #dedede;
    padding: 15px;
}

@media screen and(max-width:995px){
    #container{
        width: 100%;
    }
    #left-columm{
        width: 70%;
    }
    #right-columm{
        width: 30%;
    }
    img{
        width: 100%;
    }
}

/* MEDIA QUIRIES (Responsive)***********/

@media screen and (max-width:1140px){
    .container{
        width: 100%;
    }
    .left{
        width: 25%;
        background: #0c7575d7;
    }
    .middle{
        width: 68%;
        float: right;
    }
     .middle2{
        width: 90%;
        float: right;
    }



    .right{
        clear: both;
        padding: 1% 4%;
        width: auto;
        float: none;
        background: #0c7575d7;
    }
}

/* Untuk ukuran layar 700px kebawah  */

@media screen and (max-width:780px){
    .header,
    .footer{
        text-align: center;
    }
    .left{
        width: auto;
        float: none;
    }

    .middle{
        width: auto;
        float:  none;
    }

    .right{
        width: auto;
        float: none;
    }
}