Belajar CSS (Cassading Style Sheet) Lengkap 2

Monday, April 6th, 2015 - Belajar, Belajar CSS

Belajar CSS (Cassading Style Sheet) Lengkap 2 – Dalam Belajar CSS (Cassading Style Sheet) Lengkap 2 yang merupakan lanjutan dari Belajar CSS (Cassading Style Sheet) Lengkap 1, akan dibahas mengenai cara Membuat File CSS untuk colom right, dan cara Membuat file CSS Footer. Berikut ini penjelasannya dan bisa langsung dipraktekkan.

1. Membuat File CSS untuk colom right

Memang tampak gak menarik sama sekali bukan , tetapi anda jangan cemas, karena setelah anda beri CSS maka tampilan akan berubah sama sekali.

Sekarang anda buat file CSS, ketikkan kode CSS berikut ini:

body {

  font-family: Arial, Helvetica, sans-serif;

  }

#container{

  width:1000px;

  margin:0 auto;  

  }

#content{

  background-color:#EBEBEB;

  width:700px;

  height:521px;

  float:left;

  }

#right{

  width:300px;

  background-color:#EBEBEB;

  float:left;

}

.member{

  width:264px;

  height:67px;

  background:url(images/member_login.gif) 0 10px norepeat;

  margin: 0 auto;

  font-size:20px;

  color:#FFCC00;

  text-indent:50px;

  line-height:50px;

}

form{

  background:url(images/memberlogin_bg.gif) repeat-y;

  width:228px;

  padding:0 18px 0 18px;

  margin:0 auto;

}

form input.txtBox{

  width:206px;

  height:25px;

  border-left:#808080 solid 1px;

  border-top:#808080 solid 1px;

  border-right:#D4D0C8 solid 1px;

  border-bottom:#D4D0C8 solid 1px;

  color:#000000;

  background-color:#FFFFCC;

  margin:5 0 17px 0;

  padding:0 0 0 20px;

}

form a{

  font-size:12px;

  font-weight:bold;

  color:#FF6600;

  text-decoration:underline;

  padding:0 0 0 14px; 

  float:left;

  background:url(images/register_here_bg.gif) 0 5px

no-repeat;

}

form a:hover{

  text-decoration:none;

}

form input.login{

  background:url(images/btn_login.gif) no-repeat;

  width:53px;

  height:13px;

  border:none;

  cursor:pointer;

  float:right;

}

.bottom{

  background:url(images/memberlogin_bot.gif) norepeat;

  width:264px;

  height:25px;

  margin:0 0 5px 0;

  margin:auto;

}

.categories{ 

font:bold;

line-height:40px;

font-size:24px;  

  color:#FFFFCC;

  background-color:#FF9900;

  padding:0 0 0 17px;

  margin-top:30px;

}

ul{

  width:238px;

  padding:0 0 0 17px;

}

ul li{

  display:block;

  background:url(images/dot.gif) bottom repeat-x;

  height:25px;

  width:238px;

}

ul li a{

  background:url(images/arrow.gif) 0 7px no-repeat;

  font-size:14px;

  color:#000000;

  background-color:#EBEBEB;

  text-decoration:none;

  margin:0;  

  padding:3 0 3 14px;

  display:block;

}

#right ul li a:hover{

  color:#FFFFFF;

  background-color:#FF9900;

}  

Memang agak banyak pengaturan dari colom right ini, dan langsung saja akan saya beri penjelasan:

  • Body {…} adalah jika anda tidak mengatur secara khusus untuk jenis font maka pengaturan font akan diatur dari sini secara keseluruhan. 
  • #container {…} seperti biasa penjelasannya seperti bab sebelumnya yaitu anda buat lebar dari halaman web dengan lebar 1000px terletak ditengah tetapi kali ini saya mencoba mengatur font default bukan dari sini melainkan dari body.
  • #content {…} adalah tempat untuk meletakkan content ( bab III )
  • #right {…} pengaturan dari kolom right itu sendiri dengan nilai lebar 300 px, background color abu-abu ( #EBEBEB ) dan float:left ( jika belum tahu float baca bab 1 ). 
  • .member {…} adalah selector class dari H2 text Member Login dengan pengaturannya lebar 264 px dan tinggi 67 px dan anda mengambil background gambar dari member_login.gif jarak dari kiri 0 dari atas 10px  tanpa perulangan gambar (background:url(images/member_login.gif 0 10px no-repeat) dan margin 0 penempatan center ( auto ) lalu untuk ukuran font sebasar 20 px dengan warna kuning (#FFCC00) dengan jarak tulisan dari member login dari tepi sebesar 50 px ( text-indent: 50px ) dan jarak antar tulisan atas 50 px ( line-height:50px).
  • #form {…} untuk form dibuat background dengan menggunakan images yaitu : memberlogin_bg.gif dengan perulangan hanya dari atas kebawah (background:url(images/memberlogin_bg.gif) repeat-y) lebar 228 px , padding atas 0 , padding kanan 18 px padding bawah 0 padding kiri 18 px, lalu margin 0 auto.
  • form input.txtBox {…} ini untuk mengatur form input username dan password, anda buat lebar dari ukuran text field lebar : 206 px dan tinggi 25 px, anda buat border supaya lebih cantik dengan border kiri dan atas berwarna (#808080), border kanan dan bawah warna (#D4D0C8) type border solid lebar border 1 px lalu warna tulisan berwarna hitam ( #000000), warna text input kuning muda ( #FFFFCC ) dengan margin 5 0 17px 0 dan padding 0 0 0 20 px. 
  • form a {…} untuk mengatur tulisan Register Here dengan pengaturan sebagai berikut ukuran tulisan 12px, dengan tulisan tebal ( bold ) warna tulisan orange ( #FF6600 ) menggunakan underline, float left, padding 0 0 0 14 px dan disebelah kiri tulisan akan kita letakkan gambar centang tepat disebelah kiri tulisan (background:url(images/register_here_bg.gif) 0 5px no-repeat ). 
  • form a:hover {…} untuk memberikan efek pada tulisan Register Here ketika mouse diarahkan ke tulisan dengan menghilangkan underline (text-decoration: none ). 
  • form input.login {…} selector ini untuk mengatur dan member gambar pada submit login yang mana pada kode HTML kita tidak memberikan tulisan login pengaturannya sebagai berikut: Anda beri background image btn_login.gif tanpa perulangan gambar (background:url(images/btn_login.gif) no-repeat ), lebar 53 px, tinggi 13 px, tanpa border,float right, lalu tampilan cursor kita buat symbol tangan (cursor:pointer ). 
  • .bottom {…} ini untuk menampilkan gambar bagian bawah form,yaitu dengan memberi background gambar memberlogin_bot.gif tanpa perulangan (background:url(images/memberlogin_bot.gif) norepeat) lebar 264px, tinggi 25px, dan kita member margin bawah 5px yang lain margin 0 (margin:0 0 5px 0) dan untuk menampilkan ditengah margin juga kita beri nilai auto ( margin : auto ). Untuk pengaturan form login sudah selesai dan ini mulai kita mengatur bagian Categories .
  • .categories {…} bagian ini untuk mengatur tulisan Categories dengan pengaturan font tebal (bold), jarak tulisan atas-bawah 40 px (line-height:40px), ukuran besar font 24 px, warna tulisan kuning muda (#FFFF00) background warna orange (#FF9900) padding anda beri nilai 0 0 0 17px, lalu kita beri jarak dari atas 30px. 
  • ul {…} ini untuk mengatur tempat untuk membuat tulisan bullet yaitu lebar 238 px dengan padding anda beri nilai 0 0 017px.
  • ul li {…} untuk mengatur tulisan dari categories dengan arah atas kebawah dengan melakukan pengaturan (display:block), lalu  anda perlu membuat titik-titik diantara tulisan yaitu dengan memberikan gambar dot.gif posisi hanya di bawah dengan pengulangan gambar horizontal (background:url(images/dot.gif) bottom repeat-x), dengan tinggi 25 px dan lebar 238 px. 
  • ul li a {…} selanjutnya anda melakukan pengaturan dari text dan kita perlu menaruh logo panah di depan text dengan images  arrow.gif (background:url(images/arrow.gif) 0 7px no-repeat),  ukuran font 14 px, warna font hitam (#000000),background color abu-abu (#EBEBEB)disamakan dengan yang lain,lalu kita hilangkan dulu underline (text-decoration:none), margin 0, padding 3 0 3 14px, lalu anda buat display:block (arah tulisan menurun). 
  • #right ul li a:hover {…} ini untuk memberi efek ketika mouse diarahkan kepada tulisan dengan memberikan warna background orange (#FF9900)dan warna tulisan berubah menjadi putih (#FFFFFF). 

Kemudian anda simpan pada folder BAB IV Mengedit Colom Right dengan nama style.css dan nanti akan menjadi seperti berikut ini:

belajar-css-lengkap

Lalu anda jalankan file colom-right.html dengan klik sebanyak 2 kali dan ini hasilnya:

belajar-css-lengkap-1

belajar-css-lengkap-2

Semakin lama semakin asyik juga, kini anda bisa membuat kreasi yang lain dengan jalan merubah gambar serta ukuran. Anda perlu sedikit mengerti photoshop!

2. Membuat file CSS Footer

Kini saatnya anda membuat file CSS supaya footer lebih bagus untuk disajikan kepada user. 

Ketikkan code CSS dibawah ini pada software yang anda pakai 

 

#container{

  width:1000px;

  margin:0 auto;  

  }

#footer{

  background-image:url(images/footer.gif);

  width:1000px;

  height:128px;

  float:left;

  }

#bottom{

  text-align:center;

  font-family:Geneva;

  font-size:12px;

  margin:25px 0 0 0;

  font-weight:bold;

  letter-spacing:1px;

  word-spacing:8px;

  }

#bottom a{

  color:#FFFFFF;

  }

#bottom a:link{

  text-decoration:none;

  }

#bottom a:hover{

  text-decoration:underline;

  color:#FFFF00;

  }

#copy{

  margin:25px 0 0 0;

  font-family:verdana;

  color:#FFFFCC;

  font-size:10px;

  text-align:center;

  }

#copy a {

  color:#FFFFCC;

  }

#footer #copy a:link{

  text-decoration:none;

  }

#footer #copy a:hover{

  text-decoration:underline; 

 

Penjelasan dari kode CSS yang sudah anda buat : 

  • #container {…} membuat page dengan lebar 100 px margin 0 dengan penempatan ditengah (auto). 
  • #footer{…} ini untuk mengatur footer dengan lebar 1000px dan tinggi 128 penempatan float:left 
  • #bottom{…} untuk pengaturan test menu bottom penempatan tulisan ditengan ( text-align:center), font menggunakan Geneva,besar font 12 px, kita beri margin dari atas 25 px dan selebihnya 0, font dibuat tebal (bold) dengan jarak antar huruf 1 px, dan jarak antar kata 8 px. 
  • #bottom a {…} untuk mengatur tulisan yang diberi link berwarna putih (#FFFFFF). 
  • #bottom a:link{…} untuk pengaturan efek dari text menu bottom tanpa underline (text decoration:none) . 
  • #bottom a:hover{…} untuk memberi efek jika mouse diletakkan diatas tulisan dengan menambahkan underline (textdecoration:underline) dan warna text berganti warna kuning (#FFFF00). 
  • #copy {…} untuk pengaturan tulisan copyright, kita beri margin 25 0 0 0 , font menggunakan verdana, kuning muda(#FFFFCC), ukuran font 10 px, penempatan font ditengah. 
  • #copy a {…} memberi pengaturan warna font yang diberi link dengan warna yang sama dengan tulisan copyright yaitu kuning muda (#FFFFCC) 
  • #footer #copy a:link{…} memberi efek pada link tanpa underline dengan memberi nilai none (text-decoration:none)
  • #footer #copy a:hover{…} memberi efek pada link jika mouse diarahkan pada tulisan dengan memberi efek underline (textdecoration:underline)

Kemudian anda simpan file ini ke folder BABV Mengedit Footer dengan nama style.css 

belajar-css-lengkap-3

Jika anda benar maka tampilan folder seperti diatas.  Kemudian anda jalankan file footer.html dengan klik 2 kali, demikian hasilnya:

belajar-css-lengkap-4

Sangat menarik bukan jika anda menguasai CSS.

Demikian penjelasan mengenai Belajar CSS (Cassading Style Sheet) Lengkap 2 yang merupakan lanjutan dari bagaimana belajar CSS lengkap 1, semoga bermanfaat.

Belajar CSS (Cassading Style Sheet) Lengkap 2 | Wawang Armansyah | 4.5