blog Vania: CASCADING STYLE SHEET

CSS bekerja bersama dengan HTML untuk mengatur tampilan dari file HTML pada browser. HTML sendiri digunakan untuk memformat halaman web sedangkan CSS digunakan untuk mengatur hal-hal yang berkaitan dengan warna, tampilan (style). CSS ini sebenarnya dapat diaplikasikan untuk berbagai macam bahasa pemrograman tetapi dalam bahasan kali ini hanya akan dibahas penggunaan CSS dengan HTML. Untuk aturan penulisan CSS ini adalah sebagai berikut :

 Selector merupakan bagian pada HTML berupa tag, ID atau class di mana CSS akan diaplikasikan.

 Declaration block, semua yang terdapat dalam kurung kurawal ini dinamakan kotak deklarasi yang digunakan untuk menuliskan deklarasi instruksi yang diinginkan.

 Declaration adalah semua instruksi yang terdapat dalam kotak deklarasi yang dapat merupakan instruksi dalam bentuk HTML maupun gabungan antara HTML dan CSS.

 Property merupalah salah satu bagian dari CSS yang digunakan untuk mengubah selector.

 Value merupakan nilai yang diberikan untuk property.

Terdapat 3 macam selector yaitu :

1. selector yang langsung dan sederhana

Kita lihat contoh penulisan HTML:

Sekarang kita akan membuat tag <h1> ini menjadi berwarna merah :

2. Selector untuk mendefinisikan kelas

Kita gunakan (.). contoh :

Kode ini menyatakan bahwa semua tag <h1> dengan kelas ”hdr” diberi warna merah. Untuk mendifinisikan kelas ini tidak harus menyisipkan atribut HTML, sehingga dapat dituliskan sebagai berikut :

Kode di atas berarti semua elemen HTML dengan kelas ”hdr” akan berwarna merah. Hal ini akan sangat membantu jika kita ingin mengaplikasikannya untuk tag HTML yang berbeda dengan style yang sama.

Atau dapat juga atribut kelas dalam HTML memiliki beberapa nilai yang dipisahkan dengan spasi. Sehingga tag <h1> memiliki kelas ”hdr” dan ”main”.

Sehingga untuk membuat tag <h1> berwarna merah kita gunakan 3 baris instruksi :

3. CSS ID

ID ini digunakan hanya sekali dalam suatu halaman HTML dan untuk mendefinisikan ID digunakan tanda #.

Kode di atas akan membuat <h1> dengan ID mainhdr berwarna merah. Seperti pada selector kelas, penulisan ID juga dapat dilakukan tanpa menyisipkan elemen HTML :

Penggunaan selector juga tidak terbatas. Kita dapat menggunakan lebih dari 1 selector seperti pada contoh berikut :

CSS DESCENDANT SELECTOR

Dari kode HTML di atas kita memiliki 2 paragraf. Di sini terlihat penggunaan tag

dimana tag ini berfungsi sebagai ”parent” dari seperti yang merupakan ”grandparent” dari paragraf pertama dan sebagai ”parent” dari paragraf kedua. Dengan kata lain, dikatakan sebagai ”ancestor” untuk kedua paragraf.

Sekarang kita gunakan CSS untuk mengganti warna seluruh paragraf dengan div sebagai ancestor.

Kode CSS tersebut akan membuat seluruh paragraf yang terdapat dalam tag berwarna merah.

Untuk menggunakan CSS dalam website dapat dilakukan dengan 3 cara:

1. inline CSS

Penambahan CSS secara langsung ke elemen yang memiliki atribut style.