Cara Membuat Cascading Stylesheet (CSS)

Posted by Unknown on 1/08/2009
22 komentar
This item was filled under

Setelah berhadapan dengan soal-soal ujian dari Bapak Dosen, sepertinya akan lebih asyik kalau sekarang melanjutkan postingan yang sempat tertunda kemarin tentang CSS. Rasanya kurang enak kalau terlalu lama memendam informasi yang ada ingin disampaikan kepada para pembaca sekalian. Kali ini kita akan mempelajari bagaimana implementasi atau penerapan dari CSS yang pada halaman website. Ada baiknya pembaca yang masih belum membaca postingan yang saya beri judul "CSS At a Glance" tersebut agar membacanya terlebih dahulu disini.
Sudah dibacakan? Baiklah, sekarang kita lanjutkan lagi ya. Dalam penulisan CSS, atribut yang akan kita deklarasikan biasanya disebut sebagai id dan juga class. id dan class tersebutlah yang akan dipakaikan pada data atau elemen seperti text, tabel, dan sebagainya untuk mengatur tampilannya pada halaman website.

Bentuk penulisan CSS adalah seperti ini:

#atribut{
jenis:ukuran ;
}

Contoh:

#kotakku{
width:200px
}

Maksudnya adalah bahwa kita mendeklarasikan sebuah atribut yang bernama "kotakku" yang akan mempunyai lebar (width) sebesar 100px.
Pada halaman website, kita harus menambahkan atribut CSS "kotakku" pada suatu data atau elemen jika ingin elemen tersebut tampil seperti "kotakku". Misalnya kita akan membuat sebuah text area, maka pada halaman website tersebut kita tuliskan:

<textarea id="kotakku">Isi Area</textarea>

Perhatikan bentuk penulisannya.Dengan menambahkan id="kotakku" berarti div tersebut menyandang atribut (id) yang bernama "kotakku". Dengan demikian, div tersebut akan mempunyai lebar (width)=200px. Hasilnya akan tempil seperti berikut:

Jika kita ingin membuat text area tersebut mempunyai tinggi=200px, maka cukup menambahkan deklarasi baru untuk tingginya.
Sehingga CSS-nya menjadi:

#kotakku{
width:200px;
height:200px;
}

Maka tempilan text area tersebut menjadi:

Jika kita ingin membuat 2 buah text area yang tampilannya sama seperti atribut "kotakku", maka kita tinggal menulis keduanya seperti:

<textarea id="kotakku">Ini Text Area 1</textarea>
<textarea id="kotakku">Ini Text Area 2</textarea>

Maka hasilnya adalah:




Gimana, mudah bukan? Kemudahan tersebut semakin terlihat jika kita ingin menambah deklarasi baru untuk mengatur tampilan dari elemen-elemen yang telah kita buat tadi. Misalnya, kita ingin agar background dari text area tersebut berwarna biru, maka kita cukup mengedit CSS kita sehingga tidak perlu lagi mengedit satu persatu seperti ketika menggunakan tag-tag HTML untuk mengatur tampilan website.

Kita tambahkan deklarasi baru pada CSS kita seperti berikut:

#kotakku{
width:200px;
height:200px;
color:#0226fe;
}

Maka hasilnya akan menjadi:




Coba kita perhatikan penulisan nilai warna pada CSS tersebut. Untuk warna, biasanya ditulis dengan menambah tanda # didepannya. Setiap warna mempunyai kode masing-masing. Pengkodean ini bermaksud agar warna yang didapat juga lebih spesifik. Untuk mengetahui kode-kode warna ini, pembaca bisa melihatnya ketika menggunakan software-sorftware grafis seperti photoshop dan coreldraw, atau dreamweaver, flash, dan lain-lain.

Jika diatas kita sudah mempelajari bagaimana penulisan CSS untuk mendeklarasikan id, bagaimana pula dengan class? Class maupun id pada prinsipnya adalah sama. Yang berbeda hanyalah tingkatannya. Class bisa digunakan untuk mengatur tampilan dari suatu data atau elemen yang memiliki id tertentu. Hal ini sangat mudah dipahami mengingat setiap data tidak mungkin memiliki banyak id. Namun, untuk lebih membedakannya dengan data-data yang mempunyai id yang sama dengan data tersebut, maka bisa digunakan class. Coba kita kembali pada postingan yang lalu mengenai CSS. Misalkan terdapat beberapa mahasiswa ITS dan kita ingin salah satu dari mereka tampil dengan rambut gondrong. Maka kita letakkan padanya sebuah atribut baru misalnya berupa class "Rambut Gondrong".

Bentuk penulisan kode CSS-nya hampir sama dengan id. Perbedaannya dapat dilihat pada seperti berikut:

.atribut{
jenis:nilai;
}

Contohnya adalah seperti berikut:

.letak-teks{
text-align:right;
}

Kode diatas fungsinya untuk mengatur letak teks dari sebuag data atau elemen yang menyandang class "letak-teks".

Misalkan pada text area 1 yang kita buat diatas kita atur letak teksnya adalah kekanan. Maka kita tambahkan atrubut class dengan nama "letak-teks" pada text area tersebut.

<textarea id="kotakku" class="letak-teks">Ini Text Area 1</textarea>
<textarea id="kotakku">Ini Text Area 2</textarea>

Maka hasilnya akan menjadi:




Penggunaan class sendiri tidak serta merta harus bersanding dengan penggunaan id. Artinya bahwa untuk mengatur tampilan suatu data atau elemen, kita bisa menggunakan id saja, class saja, atau kedua-duanya. Toh tujuannya adalah untuk mengspesifikkan tampilan data tersebut. Misalnya seseorang yang hanya memiliki class "rambut gondrong", jika iya tidak menyandang id "Mahasiswa ITS" tentu dia tidak akan tampil seperti mahasiswa ITS, dia hanya tampil sebagai orang yang berambut gondrong saja.

Dengan contoh tersebut pasti pembaca sudah mengerti bukan? I hope so. Satu hal yang perlu pembaca ketahui, bahwa didalam CSS kita boleh membuat atribut-atribut sendiri yang kemudian kita deklarasikan (defenisikan). Tentu ini mempermudah kita karena menggunakan atribut-atribut yang kita kenal sendiri untuk mengatur tampilan halaman website yang kita buat.

Meletakkan CSS
Kode-kode CSS yang kita buat tadi dapat diletakkan pada halaman website dengan 2 cara:
  1. Dengan menuliskannya langsung pada halaman website yang kita buat. Untuk penulisanya, kode-kode CSS tersebut dibungkus oleh tag HTML yaitu: <style>
    Penulisannya:

    <style>
    #kotakku{
    width:200px;
    height:200px;
    color:#0226fe;
    }
    .letak-teks{
    text-align:right;
    }
    </style>

    Kode tersebut biasanya diletakkan dibawah tag <head> didalam halaman website kita.

  2. Dengan membuat halaman CSS khusus. Maksudnya adalah kita membuat sebuah halaman website yang hanya berisi kode-kode CSS. Kode-kode ini tidak perlu lagi dibungkus oleh tag HTML yaitu <style>. Agar dapat digunakan untuk mengatur tampilan halaman website, maka kita perlu meng-inject atau menghubungkan ke halaman website kita. Caranya adalah dengan menggunakan tag:

    <link rel= "stylesheet" type= "text/css" href= "URL FILE CSS"/>

    Ganti "URL FILE CSS" dengan URL dari file CSS yang kita buat dan simpan di internet. Bai pembaca yang mungkin masih bingung dengan yang namanya URL dan simpan menyimpan di internet, bisa membacanya disini.
Dengan melihat prinsip kerja dari CSS tersebuti, tentu bisa kita simpulkan bahwa CSS sangat berguna sekali. CSS bisa mempermudah kita dalam mengatur tampilan halaman website kita. Bayangkan saja jika terdapat sekian banyak data atau elemen didalam halaman website maka kita harus menulis begitu banyak pula tag-tag HTML untuk mengatur tampilannya dan kita menulisnya harus berulang-ulang untuk mengatur tiap elemen. Hal ini bisa pula menyebabkan size dari halaman kita semakin berat sehingga loading-nya menjadi lama ketika dibuka di internet. Namun, dengan adanya CSS, hal tersebut dapat dihindarkan. Selamat mencoba...

Bookmark and Share

POSTINGAN LAIN YANG BERHUBUNGAN :




Dapatkan Tutorial Website Via Email:
Setelah membaca artikel diatas, jangan lupa ngasi komentar ya...

22 komentar on "Cara Membuat Cascading Stylesheet (CSS)"



Post a Comment