Cascading Style Sheet (CSS) Dasar

CSS adalah kependekan dari Cascading Style Sheet, berfungsi untuk mempercantik penampilan HTML atau menentukan bagaimana elemen HTML ditampilkan, seperti penentuan posisi, merubah warna teks atau background dan lain sebaginya. Perhatikan contoh kode CSS berikut :

Manfaat CSS :

• Kode HTML menjadi lebih sederhana dan lebih mudah diatur
• Dapat berkolaborasi dengan JavaSricpt
• Mudah untuk merubah tampilan
• Dapat digunakan di seluruh web browser

Tata aturan pada CSS :

• Selector

Selector adalah elemen atau tag HTML yang ingin diberi style. Kamu dapat menuliskan langsung nama tag yang ingin diberi style tanpa perlu menambahkan tanda < >. 

Jika tag HTML yang ingin diberi style memiliki ID, kamu dapat menuliskan nama ID tersebut dengan diawali dengan tanda kress (#).

Jika tag yang diberi style memiliki class, maka penulisan bisa dilakukan dengan tanda titik (.).

Kamu dapat menggabungkan selector dengan menambahkan tanda koma pada nama tag yang ingin diberi style seperti berikut :

 atau

• Property dan Value

Property adalah sifat - sifat yang ingin diterapkan pada selector, seperti warna text, warna background, jarak antar elemen, garis pinggir, dan lain sebagainya.

Untuk memberikan nilai / value kita gunakantanda titik dua (:). Setiap property diakhiri dengan titik koma (;), jika tidak mengakhiri maka browser tidak akan meresponnya. Contohnya :

Penulisan CSS :

• Inline

Penulisan code CSS dengan metode inline ini bisa dilakukan langsung pada tag yang ingin diberi style dengan menggunakan atribut style.

Pada metode ini, kamu tidak perlu menuliskan selector. Karena kamu menuliskan CSS langsung pada tag yang ingin diberi style. Namun cara ini sangat tidak dianjurkan.

• Internal

Metode CSS internal ditulis di dalam tag style ditempatkan pada tag head

Metode kedua ini sangat dianjurkan untuk pengujian style, atau ketika kamu hanya memiliki satu halaman web.

• External

Metode terakhir adalah dengan membiaut file CSS dan dipanggil di dalam tag head. file CSS memiliki ekstensi (akhiran) .CSS, misalnya namafile.css

Contohnya :

Atribut rel adalah informasi hubungan (relationship) dari tag link tersebut, yaitu sebagai stylesheet. Href diisi dengan lokasi file CSS yang ingin dimuat.