Halo semuanya, sekarang saya akan mengenalkan kalian dengan CSS nih, CSS itu kegunaannya apa sih? penting tidak untuk dipelajari? sebelum itu kalian simak penjelasan tentang CSS berikut ini.
CSS (Cascading Style Sheet) adalah bahasa pemrograman yang digunakan untuk mendesain halaman website atau tampilan website. CSS menangani tampilan, warna, dan gaya dari halaman website.
Menurut penjelasan di atas CSS berguna untuk membuat halaman website kita lebih menarik dengan mendesain dan mengatur layoutnya. CSS cukup mudah dan penting untuk dipelajari karena tanpa CSS halaman website menjadi membosankan dan tidak menarik.
Cara Kerja CSS
Setelah mengetahui pengertian CSS, selanjutnya kalian harus tau cara kerja CSS. CSS membuat style di dalam halaman web dapat berinteraksi dengan elemen HTML. Elemen merupakan komponen HTML dari sebuah halaman web. Berikut adalah salah satu contoh elemen di HTML
Ini adalah paragraf
Jika anda ingin memberikan warna pada paragrapf, anda harus menuliskan baris css seperti ini.
p{color:pink;}Pada contoh diatas, “p” (paragraf) bukan bagian dari HTML namun bagian dari CSS untuk menspesifikasikan elemen HTML atau biasa dikenal dengan nama “Selector”. Di dalam CSS, selector ditulis di bagian kiri sebelum tanda kurung kurawal pertama. Sedangkan yang ada di dalam kurung adalah properti – properti dari CSS.
3 Macam Penempatan CSS
Ada tiga macam penempatan CSS yang dapat dipakai ke dalam baris kode HTML, yaitu external, internal, atau inline. Bagian ini akan membahas tiga macam CSS ini dengan lebih detail.
Inline CSS
CSS inline merupakan penempatan CSS yang langsung dilakukan di dalam konten HTML. Penempatan CSS secara inline hanya akan mempengaruhi satu bagian baris kode. Berikut adalah contohnya.
<h1 style="font-size:40px;color:red;">Selamat Datang</h1> |
CSS di atas berarti hanya akan mempengaruhi paragraf yang spesifik di dalam satu file .html dan muncul dengan warna merah (red) ukuran font 30px.
External CSS
External CSS adalah penempatan baris kode CSS menggunakan file .css. Cata ini dapat digunakan untuk mendeklarasikan sebagian besar pengaturan tampilan website secara keseluruhan.
Cara ini lebih sederhana dan simpel daripada menambahkan baris kode di setiap elemen HTML yang ingin Anda atur tampilannya.
Jika menggunakan penempatan secara eksternal, Anda harus menambahkan header untuk memanggil file .css di dalam file HTML seperti contoh di bawah ini.
<head> |
Baris kode di atas akan menghubungkan file .html dengan eksternal style sheet (CSS). Pada contoh di atas file CSS menggunakan nama ‘fileCSSAnda.css’ yang dapat Anda sesuaikan dengan letak file CSS di dalam direktori website. Ketika file HTML sudah terhubung dengan file CSS maka seluruh pengaturan CSS akan diterapkan di dalam kode HTML.
Internal CSS
Lalu, bagaimana penempatan CSS menggunakan cara internal? Internal CSS sekilas mirip dengan inline CSS, yaitu tipe penulisan tanpa file CSS terpisah.
Namun di dalam penggunaan CSS secara internal, baris kode HTML dituliskan di bagian atas (header) file HTML. Cara ini akan sangat cocok dipakai untuk menciptakan halaman web dengan tampilan yang berbeda. Dengan kata lain, CSS ini bisa dipakai untuk menciptakan tampilan yang unik.
Baris kode CSS secara internal contohnya seperti di bawah ini.
<head> |
Baris kode di atas akan menerapkan background dengan warna biru, paragraf berukuran 40px, dan ‘lightskyblue font ke dalam satu halaman HTML.
Di antara tiga jenis penempatan CSS, cara eksternal merupakan cara yang paling efektif untuk mengimplementasikan CSS ke dalam website. Cara ini juga paling populer oleh banyak programmmer dibandingkan dengan cara yang lainnya. Sedangkan cara internal dan inline juga bisa dipakai untuk menambahkan format konten yang khusus atau berbeda dengan konten yang lainnya.
Penutup
Meskipun bahasa pemrograman CSS mudah dipelajari, tapi bisa memberikan efek yang sangat besar bagi website. CSS memudahkan Anda untuk mengatur berbagai tampilan yang di dalam website. Anda bisa mengatur warna, ukuran font, jenis layout, dan berbagai macam pengaturan tampilan yang anda inginkan.
Jadi, ketika HTML merupakan pondasi, kerangka. CSS merupakan cat, desain jendela, dan berbagai macam pengaturan setelahnya. CSS adalah solusi dari website Anda.
Sampai di sini semoga Anda paham mengenai pengertian CSS dan fungsinya. Sampai jumpa lagi.
Aditya Alfarezy D 