Membuat website CV sederhana bagian 2

Tulisan kali ini saya akan membahas tentang CSS pada postingan saya yang sebelumnya yaitu Membuat Website CV Sederhana. sebelum kita membahasnya alangkah baiknya kita tahu terlebih dahulu apa itu CSS.

CSS (Cascading Style Sheet) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa file. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTMLdan XHTML.

CSS dapat mengendalikan ukuran gambar, warna body teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri/kanan/atas/bawah, dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokument. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Setelah kita mengetahui sedikit tentang CSS, sekarang saya akan membahas CSS pada postingan Membuat Website CV Sederhana. Pada postingan tersebut ada css yang dimasukan pada bagian atau tag head yaitu :

 <style>  
 body{  
 background-color:#2D2F2B;  
 font-family:verdana,Arial, Tahoma,Century gothic, sans-serif;  
 font-size: 12px;  
 }  
 .block {  
 background-color: #D4D4D4;  
 width: 370px;  
 padding: 9px 35px 35px 35px;  
 border-radius: 11px;  
 margin: auto;  
 margin-top:180px;  
 border: 1px solid #EEE;  
 -moz-box-shadow: 0px 0px 25px black;  
 -webkit-box-shadow: 0px 0px 25px;  
 }  
 .ribbon {  
 margin-top: -17px;  
 width: 38px;  
 float: right;  
 background-color: rgb(120, 5, 185);  
 -moz-box-shadow: 0px 0px 25px black;  
 -webkit-box-shadow: 0px 0px 3px;  
 text-align: center;  
 padding: 10px 0;  
 }  
 table{  
 font-size: 12px;  
 }  
 tr {  
 vertical-align: top;  
 }  
 </style>  

body{
 background-color:#2D2F2B;
 font-family:verdana,Arial, Tahoma,Century gothic, sans-serif;
 font-size: 12px;
 }  

Diatas merupakan pengaturan tag body, yaitu tag body memiliki warna dasar #2d2f2b (code hexa dari warna), memiliki jenis huruf verdana,Arial, Tahoma,Century gothic, sans-serif dengan ukuran 12px

 .block {
 background-color: #D4D4D4;
 width: 370px;
 padding: 9px 35px 35px 35px;
 border-radius: 11px;
 margin-top:180px;
 border: 1px solid #EEE;
 -moz-box-shadow: 0px 0px 25px black;
 -webkit-box-shadow: 0px 0px 25px;
 }  

Diatas merupakan pengaturan bagi tag yang memiliki class block, yaitu memiliki atribut :

• Memiliki warna dasar #d4d4d4
• Memiliki lebar 370px
• Jarak yang bersifat menjorok kedalam sebesar atas:9px, kanan:35px, bawah:35px dan kiri: 35px
• Memilki border radius sebesar 11px
• Memilki jarak atas 180px
• Memiliki border sebesar 1px bertipe solid dan berwarna hitam
• dan memiliki efek bayangan

 .ribbon {
 margin-top: -17px;
 width: 38px;
 float: right;
 background-color: rgb(120, 5, 185);
 -moz-box-shadow: 0px 0px 25px black;
 -webkit-box-shadow: 0px 0px 3px;
 text-align: center;
 padding: 10px 0;
 }  

Diatas merupakan pengaturan bagi tag yang memiliki class ribbon, yaitu memiliki atribut :

• Memilki jarak atas -17px
• Memilki lebar 38px
• float pada sisi kanan
• Memiliki warna dasar rgb(120, 5, 185)
• Memiliki efek bayangan.
• Memilki pengaturan text aligment tengah.
• dan memiliki jarak yang bersifat menjorok kedalam sebesar atas dan bawah : 10px sedangkan kanan dan kiri sebesar : 0px.

 table{
 font-size: 12px;
 }  

Diatas merupakan pengaturan bagi tag yang tabel, yaitu memiliki ukuran huruf 12px.

tr {
 vertical-align: top;
 }  

Diatas merupakan pengaturan bagi tag row pada table, yaitu aligment secara vertica berada pada bagian atas.

Dan dari pengaturan diatas akan menghasilkan tampilan seperti dibawah ini :

printscreen halaman 1

Read More