Beranda > CSS > Pengenalan CSS

Pengenalan CSS

CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan.

Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.

Keuntungan Penggunaan CSS

Jika anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.

Dengan menggunakan css, untuk merubah tampilan dari banyak halaman, anda cukup mengerjakan nya di satu dokumen CSS saja, tanpa harus menyentuh file HTML.

Jadi, keuntungan menggunakan CSS, lebih praktis!

Kekurangan Penggunaan CSS

Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser. Diperlukan latihan lebih agar ketika anda mendisign suatu website dengan CSS, maka bisa tamil dengan baik di semua browser.

Syntax / Penulisan CSS

Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value.

Format penulisan kalimat CSS:

selector { property: value }

Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.

Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.

Value adalah nilai dari pengaturannya.

Contoh Syntax:

h1 { color: red }

Contoh di atas menunjukkan

Selector: h1

Property: color

Value: red

Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah (red).

Pengelompokan Selectors

Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua menggunakan warna merah, maka kode CSS nya menjadi:

h1,h2,h3 { color: red }

Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.

Penggunaan Banyak Properties

Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).

Contoh:

h1,h2,h3 {color:red; font-family:arial; font-size:150%;}

Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warna merah, dengan type font arial, dan ukuran font 150%.

Cara Penulisan Yang Baik

Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan values nya di indent. Ya cuma biar rapih dan lebih mudah di baca aja sih, ga harus kok.

h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}

Sekarang anda sudah mengerti aturan dasar penulisan kalimat CSS. Pelajaran berikutnya akan mengajarkan anda mengaplikasikan kode CSS ke halaman website.

CSS Comment

Kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi catatan pengingat.

Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.

/* Tulis komentar anda di sini */
p
{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}
Kategori:CSS
  1. Belum ada komentar.
  1. No trackbacks yet.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: