Belajar CSS (Cassading Style Sheet) Lengkap

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

Belajar CSS (Cassading Style Sheet) Lengkap – Belajar CSS (Cassading Style Sheet) di Belajar Bagus menyediakan dua tahapan yaitu Belajar CSS Lengkap 1 dan Belajar CSS Lengkap 2. Berikut ini bagaimana cara belajar css dan bisa langsung praktek:

Belajar CSS

Belajar CSS

Belajar CSS Lengkap 1

Yang akan dibahas dalam belajar Css Lengkap 1 akan di bahas bagaimana cara Membuat file CSS layout, Membuat File CSS dari Menu Navigasi, dan Membuat file CSS untuk Content.

1. Membuat file CSS layout 

Oke sekarang kita buat file CSS nya untuk membuat tampilan dari Layout website anda. 

Berikut kode dari file CSS : 

* {

  margin: 0;

  padding: 0; 

}

body {

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

}

#container{

  width:1000px;

  margin:0 auto;   

}

#header{

  background-image:url(images/header.jpg);

  background-repeat:no-repeat;

  background-position:center;

  background-color:#FFFF99;

  width:1000px;

  height:160px;  

}

#menu{

  background-color:#993300;

  width:1000px;

  height:35px; 

}

#content{

  background-color:#EBEBEB;

  width:700px;

  float:left; 

}

#right {

  width:300px;

  background-color:#EBEBEB;

  float:left; 

}

#footer{

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

  width:1000px;

  height:128px;

  float:left; 

 

Penjabaran dari kode diatas: 

  • Kode * {margin: 0;padding: 0;} adalah memberikan perintah secara general bahwa margin dan padding dengan nilai 0. 
  • Kode body {…} memberikan perintah untuk membuat font dari seluruh body dengan font Arial, Helvetica, sans-serif . 
  • Kode #container {…} untuk membuat kerangka dari halaman web dengan ukuran lebar 1.000 px dengan posisi ditengah karena margin nya 0 dan dibuat Auto. 
  • Kode #header {…} untuk membentuk sebuah header dengan background gambar header.jpg tanpa perulangan gambar (no-repeat) posisi gambar ditengah dan diberi background warna kuning , dengan ukuran lebar 1.000px dan tinggi 160 px. 
  • Kode #menu {…} untuk membuat menu navigasi dengan warna background #993300 dengan lebar 1.000 px dan tinggi 35 px. 
  • Kode #content {…} untuk membuat kerangka lebar 700 px untuk artikel dengan background color dengan warna abu-abu (#EBEBEB) lalu penempatan posisi Float left ( nempel/mengalir kekiri ). 
  • Kode #right {…} berarti kolom right dengan kerangka lebar 300 px dengan background color abu-abu dengan penempatan float Left.  
  • Kode #footer {…} membuat footer dengan background image footer.gif , lebar 1.000 px , tinggi 128  px, penempatan Float left.

Lalu setelah itu anda simpan pada folder Bab1 Layout website beri nama style.css.

belajar-css-1

Jika benar maka tampilan dari isi folder yang anda buat seperti gambar diatas. 

Untuk melihat hasilnya silahkan klik 2 kali di index.html dan ini hasilnya.

belajar-css-2

Catatan :

  • Hasil diatas untuk artikel telah saya isi dengan mengambil dari internet. 
  • Untuk bagian artikel memang terlihat agak jelek karena kita belum mendesain bagian dari konten, nanti akan dibahas pada bab tersendiri.

2. Membuat File CSS dari Menu Navigasi 

Selanjutnya anda buat lagi file CSS berikut ini: 

#container{

  width:1000px;

  margin:0 auto;

  font-family: verdana;  

  }

#menu{

  background-color:#993300;

  width:1000px;

  text-align:center;

  padding-top:10px;

  padding-bottom:10px;

  }

a:link{

  background-color:#FFFF00;

  color:#000099;

  text-decoration:none;

  font-size:14px; 

  }

a:hover{

  background-color:#0000CC;

  color:#FFFFFF;

  font-weight:bold;

  text-decoration:underline;

  font-size:16px; 

  }

a:active{

  color:#000000;

  background-color:#FFFFFF;

  font-weight:100;

  }  

Penjelasan dari CSS rule diatas sebagai berikut ini : 

  • #container {…} seperti biasanya saya membuat page dengan lebar 1.000 px dengan margin 0 dan auto untuk menempatkannya ditengah. 
  • #menu {…} untuk membuat background menu dengan warna #993300, lebar 1.000 px, penempatan text di tengah dengan kali ini saya menghilangkan ukuran tinggi dan mengatur dengan member nilai padding atas dan bawah masing-masing 10 px. 
  • a:link {…} ini merupakan presudo class yang mana untuk mengatur dari keberadaan dari content atau image yang telah diberi link. Text menu telah diberi link dan pengaturannya di sini dengan pengaturan yaitu background color dari text tesebut dengan warna kuning (#FFFF00 ) dan text dengan tulisan warna biru tua ( #000099 ) lalu untuk menghilangkan under line ketika suatu text diberi link maka saya memberikan text decoration dengan nilai none dengan font size 14 px. 
  • a:hover {…} adalah ketika keberadaan text ketika mouse berada diatas tulisan tersebut. Background warna pada tulisan akan berganti warna menjadi biru ( #0000CC ) dengan warna tulisan menjadi putih (#FFFFFF ), kali ini saya memberikan hurufnya menjadi tebal serta diberi under line serta font size berubah menjadi 16 px. 
  • a:active {…} dimana keberadaan text ketika mouse di klik dan saya memberi nilai background color berubah menjadi putih ( #FFFFFF ), tulisannya nanti berwarna hitam ( #000000 ) lalu ketebalan saya kembalikan lagi seperti asal. 

Setelah itu simpan file ini dengan nama style.css didalam folder sama dengan file HTML, lalu anda jalankan. Berikut screenshotnya:

belajar-css-3

Silahkan anda membuat kreasi sendiri dengan merubah nilai dari CSS rule ini dan anda juga bisa mengganti tulisan dengan gambar.

3. Membuat file CSS untuk Content 

Selanjutnya giliran anda membuat kode CSS rule yang membuat content diatas enak dibaca dan menarik untuk dilihat, berikut ini CSS rulenya.

#container{

  width:1000px;

  margin:0 auto;

  font-family:Verdana;

font-size:12px; 

  }

#content{

  background-color:#EBEBEB;

  width:675px;

  float:left;

  padding:15px 10px 15px 15px;

  letter-spacing:1px;

  word-spacing:1px;

  text-align:justify;

  }

h1 {

  text-decoration:underline;

  text-transform:uppercase;

  font-family:Arial;

  font-size:30px;

  }

.indent:first-letter {

  font-size:70px;

  color:#0000CC;

  font-weight:bold;

  float:left;

  }

.rtk {

  text-decoration:blink;

  font-weight:bold;

  color:#FF0000;

  background-color:#CCCC00;

  }

.preset{

  font-style:italic;

  font-weight:bold;

  }  

 

Sekarang anda bisa membaca keterangan dan penjelasan dari CSS di atas seperti berikut ini: 

  • #container {…} untuk pengaturan page dibuat dengan ukuran lebar 1000px dengan margin 0 dengan posisi ditengah ( auto ) untuk pengaturan jenis font ( font family ) verdana dengan ukuran font 12px. 
  • #content {…} pengaturan area content dengan diberikan background color abu-abu ( #EBEBEB) lebar dari area content 675 px, pengaturan float kiri, padding 15 px, padding kanan 10 px, padding bawah 15 px, padding kiri 15 px ( contoh penulisan ringkas dari css) anda bisa menggunakan padding-top, padding-right, padding-bottom, padding-left) dimulainya dari top dan berjalan searah jarum jam dengan nilai masing-masing, untuk setting jarak antar huruf anda bias menggunakan letter-spacing dengan jarak 1px, dan untuk jarak antar kata anda bisa menggunakan word-spacing dengan jarak 1px juga, dengan pengaturan tulisan rata kiri maupun kanan ( textalign:justify).
  • H1 {…} untuk pengaturan dari Heading 1 dengan diberikan underline dengan menggunakan text-decoration, lalu seluruh tulisan menggunakan huruf besar semua dengan pengaturan text-transform dengan nilai uppercase, lalu font dengan mengunakan arial dengan ukuran 30 px. 
  • .indent:first-letter{…} adalah untuk pengaturan huruf pertama menjadi besar atau biasa disebut Drop Caps dengan ukuran 70 px warna biru ( #0000CC ),dengan huruf tebal (font-weight: bold ). 
  • .rtk {…} Untuk selector class ini mempunyai settingan yang membuat tulisan menjadi berkedip-kedip ( text-decoration:blink ) lalu tulisan dibuat tebal ( bold ) dengan warna font merah ( #FF0000 ) dengan background tulisan kuning ( #CCCC00 ) untuk jenis font memang tidak di sebutkan dan itu nanti akan mengacu pada (#container ) untuk sebuah selector class , anda bisa menaruh beberapa selector dalam halaman web, berbeda dari selector ID yang mana diijikan hanya satu saja.  
  • .preset {…} untuk selector ini anda bisa menaruh settingan untuk pengaturan font dengan tulisan miring ( italic ) dan tebal ( bold ).

Lalu anda simpan file css ini dengan nama style.css di dalam folder Bab III Mengedit Content dan anda coba dengan klik 2 kali pada content.html.

Berikut ini jika anda sudah menyimpan dengan benar.

belajar-css-4

Kemudian klik dua kali pada file content maka akan tampil seperti gambar berikut

belajar-css-5

Silahkan anda coba untuk pengaturan yang lain, semisal tulisan diganti dengan Geneva atau yang lainnya, anda bebas membuat kreasi sendiri.

Lanjutkan belajar ke Belajar CSS Lengkap 2

Demikian penjelasan mengenai belajar CSS dan anda bisa langsung mempraktekkannya, semoga bermanfaat.

(Baca juga Arti Belajar, dan Cara Belajar yang Baik dan Benar).

Kata Kunci:

kode css lengkap,code css lengkap,kode lengkap css,pengertian widht dan weight dan arti code nya,tabel kode css3 lengkap
Belajar CSS (Cassading Style Sheet) Lengkap | Wawang Armansyah | 4.5