Setelah kita mempelajari bagaimana penggunaan CSS dalam tutorial Dasar Penggunaan CSS Dalam Web Design tutorial kali ini akan membahas kode-kode yang sering digunakan dalam CSS. Jumlah Kode syntaks CSS tidaklah sedikit, tentu saja tidak perlu menghafalnya. Yang perlu dilakukan adalah sering-sering berlatih hingga secara otomatis kita hafal sendiri atau kita bisa melihat referensi kode-kode tersebut.

font-family

Kode ini digunakan untuk menentukan font text dalam HTML. Contoh penggunaannya adalah sebagai berikut :

.contoh {
     font-family:Verdana;
}

Untuk mengetahui font-font apa saja yang digunakan anda bisa melihat referensi di Wikipedia

font-size

font-size digunakan untuk menentukan ukuran text dalam HTML. emakin besar ukuran font semakin besar pula text akan ditampilkan. contoh penggunaannya sebagai berikut :

.contoh {
    font-size:14pt;
}

color

Kode color digunakan untuk memberikan warna pada text. Warna biasanya didefinisikan dalam kode hexa yaitu “000000″ atau bisa disingkat “000″ untuk wara hitam dan “FFFFFF” atau disingkat “FFF” untuk warna putih. Contoh-contoh kode hexa bisa anda temukan di HTML CODE COLOR. Contoh penggunaannya sebagai berikut :

.contoh {
     color:#FFFFFF;
}

backkground-color

Kode ini digunakan untuk membuat background warna dalam HTML. Kode penggunaanya sebagai berikut :

.contoh {
     background-color:#000000;
}

background-image

Tag ini digunakan untuk meletakkan gambar pada background HTML. Tag ini biasanya akan dikombinasikan dengan background-position (untuk menentukan posisi mulai) dan background-repeat (menentukan pengulangan). contoh penggunaanya sebagai berikut :

// pengulangan hanya ke arah X (horizontal) sehingga background gambar berulang kearah horizontal
.contoh {
     background-image:url(gambar_background.gif);
     background-position:top left; // posisi kiri atas awal mulai gambar
     background-repeat:repeat-x;
}
 
// untuk pengulangan ke aray vertical
.contoh {
     background-image:url(gambar_background.gif);
     background-position:top left; // posisi kiri atas awal mulai gambar
     background-repeat:repeat-y;
}
 
// tapa pengulangan
.contoh {
     background-image:url(gambar_background.gif);
     background-position:top left; // posisi kiri atas awal mulai gambar
     background-repeat:no-repeat;
}
 
// pengulangan x dan y
.contoh {
     background-image:url(gambar_background.gif);
     background-position:top left; // posisi kiri atas awal mulai gambar
}

Padding

Padding digunakan untuk menentukan jarak spasi sebelum text/content disikan dalam tag didalamnya. Anda bisa mendefinisikan padding dalam bentu tunggal saja seperti contoh berikut :

.contoh {
     padding:10px;
}

yakni maksudnya content yang berada dalam kelas contoh akan dituliskan setelah mengambil jarak 10px (pixel) dari semua arah (kiri, kanan, atau, bawah) atau kita juga bisa mendefinisikan padding secara terpisah seperti berikut :

.contoh {
     padding-left:10px;
     padding-top:12px;
     padding-bottom:13px;
     padding-right:14px;
}
 
atau
.contoh {
     padding :12px 13px 14px 10px;
}

margin
margin membersihkan area diluar kelas (batas pemisah antara elemen satu dengan elemen lainnya). Margin ini tidak berwarna. contoh penggunaanya sebagai berikut :

.contoh {
    margin-top:100px;
    margin-bottom:100px;
    margin-right:50px;
    margin-left:50px;
}

float

float berarti mengambangkan suatu element (bukan text atau content). fungsinya hampir mirip dengan rata kiri, rata tengah dan rata kanan hanya saja ini untuk elemen (kelas, div atau yang lainnya). contoh penggunaanya sebagai berikut :

.contoh {
    float:left:
}

ini adakah dasar yang perlu dipelajari dalam CSS. Akan ada banyak kode-kode yang akan susah kalau dituliskan semua. Apa yang saya ajarkan disini nantinya sebagai dasar studi kasus pembuatan website menggunakan CSS yang akan datang