Cascading Stylesheet (CSS) adalah mekanisme sederhana untuk mengubah Jenis Huruf, Warna, Ukuran dan lain-lain pada halaman website. Dengan menggunakan CSS, pengaturan tampilan halaman web dapat diorganisasikan dalam satu file sehingga memudahkan untuk mengubah atau memperbaiki tampilan halaman website tersebut tanpa harus mengubah satu per satu setiap halaman yang berkaitan dalam sebuah website.
Pengenalan XHTML
XHTML adalah cara penulisan perintah-perintah untuk menghasilkan tampilan halaman website. Halaman XHTML memiliki struktur seperti contoh berikut:
Isi dari halaman website dituliskan pada bagian antara
Sedangkan kode-kode yang biasa digunakan untuk menuliskan isi dari halaman website adalah seperti contoh berikut:
...
Untuk menempatkan teks yang berupa paragraf.
...
...
...
Untuk menuliskan judul dari kelompok paragraf.
...
Disebut sebagai layer yang berfungsi untuk mengelompokkan beberapa paragraf.
Berikut adalah contoh penulisan halaman XHTML:
Contoh Halaman Website
Ini adalah isi paragraf
dari contoh halaman website
Kode-kode XHTML lainnya yang bisa Anda pelajari dari file yang dapat diunduh dari sini.
Penggunaan CSS
CSS dapat dibuat hanya dengan menggunakan Notepad atau text editorsederhana lainnya dan disimpan dengan ekstensi .css. Agar halaman website dapat membaca file CSS tersebut maka perlu ditambahkan baris kode tertentu pada bagian
Contoh Halaman Website
Ini adalah isi paragraf
dari contoh halaman website
[URL] = Alamat URL tempat file CSS tersebut disimpan
Penulisan kode CSS
Kode CSS disebut dengan style. Penulisan kode CSS dalam sebuah file CSS adalah dengan format sebagai berikut
tag { property: value; }
tag = tag XHTML, atau nama layer dimana style tersebut berfungsi.
property = Detail yang tampilannya diubah dengan style tersebut.
value = Nilai dari properti di atas.
Sebagai contoh, untuk mengubah format tampilah dari sebuah judul artikel (header) yang memiliki kode
Contoh Halaman Website
h1 { text-decoration: underline, color: blue; font-size: 28px; }
Hal tersebut akan menimbulkan efek yang sama untuk setiap kali kode
...
Cara penulisan lainnya adalah dengan mendefinisikan style berdasarkan class atau ID layer. Untuk cara ini, maka kode XHTML harus mendefinisikan nama class atau identitas layer yang digunakan seperti pada contoh berikut:
- Header dengan class bernama “judul”
Pada halaman XHTML ditulis:
Contoh Halaman Website
Pada file CSS didefinisikan:
.judul { text-decoration: underline, color: blue; font-size: 28px; }
Kode ini tidak merubah semua tag
...
...
- Header dengan ID bernama “judul”
Pada halaman XHTML ditulis:
Contoh Halaman Website
Pada file CSS didefinisikan:
#judul { text-decoration: underline, color: blue; font-size: 28px; }
Kode ini juga memiliki pengaruh yang sama dengan penggunaan berdasarkan class.
Hal utama yang perlu diperhatikan adalah bahwa penulisan style dalam CSS harus berurutan dan diperhatikan agar jangan sampai tumpang tindih. Untuk lebih jelasnya, perhatikan contoh berikut:
Pada CSS tertulis:
h1 { text-decoration: underline, color: blue; font-size: 28px; }
#pagetitle { font-size: 12px; }
Pada halaman website tertulis:
Contoh Halaman Website
Maka yang terjadi adalah, pada tampilan website besar tulisan “Contoh Halaman Website” adalah hanya 12 pixel, bukan 28 pixel karena ID untuk tag h1 yaitu #pagetitle dituliskan paling akhir.
Class dan ID dalam CSS
Untuk memudahkan, berikut adalah penjelasan secara umum tentang penggunaan class dan ID dalam CSS dan XHTML.
- ID juga dapat digunakan untuk menamai tag sebagai identifikasi pada javascript.
- ID bersifat unik pada setiap halaman, tidak boleh lebih dari satu tag memiliki id yang sama pada satu halaman yang sama.
- Class dapat digunakan berulang kali, satu tag dapat memiliki class lebih dari satu seperti misal:
Contoh Halaman Website
dimana judul, besar dan kanan memiliki style yang saling melengkapi.
- ID biasanya bersifat global yang dibedakan menjadi blok-blok tertentu misalkan, header, content, sidebar dan footer. Class biasanya digunakan untuk membedakan style tertentu yang dibedakan antara misalnya warna, jenis huruf atau besar huruf.
- Class dapat digunakan untuk mempertegas style dari ID yang bersifat global dengan menggunakannya bersama-sama pada satu tag seperti misal:
Contoh Halaman Website
Title : CSS adalah
Description : Cascading Stylesheet (CSS) adalah mekanisme sederhana untuk mengubah Jenis Huruf, Warna, Ukuran dan lain-lain pada halaman website. Dengan m...