Apa itu CSS? CSS adalah kepanjangan dari Cascading Style Sheet yang berfungsi untuk mengatur tampilan elemen yang tertulis dalam bahasa markup. Fungsi lain dari CSS yakni untuk memisahkan konten dari tampilan visual dalam sebuah website.
Pada awal dibuat tahun 1996 silam, CSS sendiri difungsikan untuk memformat halaman. Selain itu, permasalahan seperti tags font yang diperkenalkan HTML menyebabkan banyak masalah bagi developer, dikarenakan website membutuhkan font, warna background, dan style maka CSS dapat menyelesaikan masalah ini.
Pada dasarnya HTML dan CSS memiliki kedekatan yang sangat erat, sehingga kinerja keduanya tidak dapat dipisahkan. HTML sendiri merupakan bahasa markup dan CSS memperbaiki style, kedua bahasa pemrograman ini harus terus beriringan. Selain pada urusan teknis, CSS berpengaruh juga pada tampilan sebuah website. Para pemilik website pun tentu tidak menginginkan tampilan artikel tanpa modifikasi apapun.
Apa Itu CSS Inilah Pengertian, Cara Kerja, dan Kegunaannya
Kelebihan CSS
Sebenarnya mudah sekali membedakan website yang menggunakan CSS atau tidak. Nah, jika Anda menemukan website ketika sedang loading hanya menampilkan warna layar putih saja, maka website tersebut bisa dipastikan tidak menggunakan CSS, atau hanya menggunakan HTML saja.
Sebelum CSS diterapkan, semua stylizing harus Anda sertakan pada markup HTML. Dengan demikian Anda harus mendeskripsikan semua warna font, background, dan lainnya secara terpisah.
Kelebihan CSS sendiri dapat mengatur semua tampilan pada aspek file yang berbeda. Kemudian Anda dapat menentukan file dan mengintegrasikannya di atas markup HTML.
Dalam hal ini, markup HTML semakin mudah dimaintain. Singkatnya, CSS ini memudahkan Anda agar tidak perlu mendeskripsikan tampilan masing-masing elemen secara berulang.
Oleh sebab itu, waktu Anda tidak terbuang percuma untuk membuat kode dan membenahi error. Bahkan kekurangan lainnya dapat segera diminimalisir.
Cara Kerja CSS
Secara default CSS memakai bahasa Inggris sederhana berbasis syntax. Selanjutnya CSS didukung dengan berbagai rules yang mengaturnya. Keberadaan HTML ini pada dasarnya dirancang semata-mata untuk mendeskripsikan konten. Yang kemudian dibantu dengan keberadaan CSS yang memberikan sedikit sentuhan modifikasi. Kombinasi kinerja keduanya dapat memaksimalkan tampilan website seperti yang Anda inginkan.
Struktur CSS cukup sederhana, sehingga pengaplikasiannya pun cukup mudah. Di dalam struktur CSS ini terdiri dari selector dan declaration block. Dalam hal ini Anda dapat memilih elemen yang diinginkan kemudian Anda dapat melakukan deklarasi terhadap elemen tersebut. Selector bekerja mengarahkan elemen ke HTML yang akan diubah penampilannya. Declaration block bekerja memisahkannya dengan tanda titik koma.
Jenis-Jenis CSS Berdasarkan Cara Penggunaannya Ada 3 Cara
1. Inline CSS.
Inline CSS digunakan untuk memberi style (gaya) pada tag atau elemen HTML tertentu. Anda dapat menggunakan atribut style untuk memberi style pada tag HTML. Style hanya berlaku untuk tag HTML tersebut. Style di inline CSS memiliki prioritas utama dan yang akan digunakan (rendering) meskipun tag HTML tersebut juga sudah diberi style melalui internal CSS atau external CSS.
Pengunaan inline CSS sebenarnya tidak direkomendasikan karena setiap tag HTML perlu diberi style sendiri. Ketika Anda mengubah style di salah satu tag, untuk mendapatkan style yang konsisten, Anda juga perlu mengubah style pada tag-tag lainnya. Misalnya, semua h1 berwarna merah, ketika Anda ingin mengubah h1 menjadi berwarna hijau, Anda perlu mengubah style di semua h1 satu persatu agar berwana hijau.
Berikut ini adalah contoh kode sederhana:
<!DOCTYPE html><html><head></head><bodystyle="background-color:yellow;"><h2style="color:red;">Menggunakan CSS Dengan HTML</h2><pstyle="color:blue;">Ada dua teknologi utama dalam pembuatan web modern yaitu CSS dan HTML. Keduanya mempunyai peran berbeda namun tidak terpisahkan. Secara umum, ada tiga cara menggunakan CSS dengan HTML yaitu inline CSS, internal CSS dan external CSS.</p></body></html>
2. Internal CSS.
Internal CSS digunakan untuk memberi style yang hanya berlaku pada satu laman web. Style yang diberikan diapit oleh tag <style> </style> dan diletakkan di bagian elemen head atau tag <head> dari laman web. Anda dapat menggunakan internal CSS bila pemberian style dimaksudkan hanya untuk satu laman web saja dan tidak untuk digunakan di laman web yang lain. Anda dapat menggunakan internal CSS bila kode untuk style tidak terlalu besar atau kompleks.
Berikut ini adalah contoh kode sederhana:
<!DOCTYPE html><html><head><style type="text/css">body {background-color:yellow;}
h2 {color:red;}
p {color:blue;}
</style></head><body><h2>Menggunakan CSS Dengan HTML</h2><p>Ada dua teknologi utama dalam pembuatan web modern yaitu CSS dan HTML. Keduanya mempunyai peran berbeda namun tidak terpisahkan. Secara umum, ada tiga cara menggunakan CSS dengan HTML yaitu inline CSS, internal CSS dan external CSS.</p></body></html>
3. External CSS.
External CSS adalah file berekstensi .css yang hanya berisi kode-kode style. Tujuan menggunakan external CSS adalah untuk memisahkan kode style dengan struktur dan tipe konten laman web. External CSS dapat diaplikasikan pada lebih dari satu laman web sehingga semua laman web akan memiliki tampilan atau desain yang seragam.
Sebagai contoh, buat file CSS bernama csseksternal.css menggunakan plain text editor seperti Notepad atau Notepad++. Tuliskan kode CSS di bawah ini sebagai style yang akan diberlakukan di laman web. Simpan file CSS di folder yang sama tempat menyimpan file HTML.
body {background-color:yellow;}
h2 {color:red;}
p {color:blue;}
Buat file HTML dan di bagian tag <head> tambahkan elemen link atau tag <link>. Tag <link> ini akan digunakan untuk mengacu ke file CSS yang dibuat sebelumnya. Perhatikan penulisan <link> beserta atributnya untuk mengacu ke file CSS.
Berikut ini adalah contoh kode sederhana:
<!DOCTYPE html><html><head><linkhref="csseksternal.css"rel="stylesheet"type="text/css"></head><body><h2>Menggunakan CSS Dengan HTML</h2><p>Ada dua teknologi utama dalam pembuatan web modern yaitu CSS dan HTML. Keduanya mempunyai peran berbeda namun tidak terpisahkan. Secara umum, ada tiga cara menggunakan CSS dengan HTML yaitu inline CSS, internal CSS dan external CSS.</p></body></html>
Komentar
Posting Komentar