Selasa, 10 Agustus 2010

Menggunakan CSS (Cascading Style Sheet) 1

Sekarang saya akan membahas penggunaan CSS (Cascading Style Sheet).

Apa itu CSS? CSS adalah sebuah kode untuk mengatur tampilan, gaya dari sebuah halaman web. CSS dapat mengatur banyak elemen style dari sebuah web seperti jenis font, warna font, ukuran font, warna background color, warna link, heading dan banyak lagi.

CSS dibagi dua macam. CSS internal dan eksternal. Sesuai namanya CSS internal ditulis pada halaman web itu langsung. Sedangkan CSS eksternal ditulis pada halaman terpisah, yang nanti disambung ke halaman web dengan tag yang ditulis pada halaman webnya. Kelebihan CSS eksternal dari internal adalah jika kita ingin melakukan perubahan style, kita cukup membuka file CSS nya, rubah style nya dan semua halaman web yang nyambung ke file CSS tersebut akan langsung berubah.

Bingung dengan penjelasan saya? Baiklah kita akan langsung pelajari dasar-dasar CSS terlebih dahulu. Penulisan kode CSS internal dan eksternal tidak ada bedanya, yang membedakan hanya lokasi kode CSS nya dan cara menggunakannya.

Untuk kode CSS internal harus ditulis diantara tag <style></style> dimana tag tersebut ditulis di antara tag <head>. Contohnya seperti ini:

-----------------mulai kode html----------------------

<html>
<head>
<title>CSS</title>

<style type="text/css">
kode css nya disini
</style>
</head>
<body>asd</body>
</html>

-----------------akhir kode html----------------------

keterangan:
++ kode CSS nya dituliskan diantara tag <style></style>.

Untuk kode CSS eksternal dimana kode CSS ditulis di file terpisah, kita harus menulis tag untuk menyambungkannya. Contohnya seperti ini:

-----------------mulai kode html----------------------

<html>
<head>
<title>CSS</title>

<link rel="stylesheet" type="text/css" href="lokasi_file_css/nama_file_css_nya.css">

</head>

<body>asd</body>
</html>

-----------------akhir kode html----------------------

keterangan:

++ pada tag <link> atribut 'rel' dan 'type' beserta nilainya harus ada dan tidak boleh diubah.
++ atribut tag diisi sesuai lokasi file css nya.
++ kode CSS ditulis di file terpisah, bukan di file HTML nya

Oke segitu dulu dasar dari CSS. Insya Allah selanjutnya akan saya buat artikel lanjutan bagaimana cara menulis kode-kode CSS.

Jangan lupa komentarnya ya...

4 komentar: