Mengenal Fungsi, Jenis, dan Cara Kerja Bahasa Pemrograman CSS

Menguasai bahasa pemrograman adalah salah satu skill yang perlu dimiliki oleh seorang Developer. Terlebih lagi, ada banyak bahasa pemrograman yang perlu dikuasai oleh calon Developer salah satunya adalah Cascading Style Sheets (CSS).

CSS sebagai bahasa pemrograman yang dikembangkan pada 1990-an untuk mendukung dokumen website. CSS kini sekarang menjadi salah satu skill yang penting bagi Web Developer maupun Data Scientist dan pilar utama untuk user interface yang bekerja bersama dengan berbagai bahasa markup.

Nah, kali ini kelas.com akan membahas tuntas seputar CSS mulai dari pengertian, fungsi, cara kerja, hingga jenis-jenis CSS yang perlu kamu pahami lebih dalam lagi. Penasaran? Dibaca artikelnya sampai selesai, ya!

Apa itu CSS atau Cascading Style Sheets?

Sumber: Pexels

Cascading Style Sheets (CSS) merupakan bahasa pemrograman style sheet yang membantu untuk mengkonfigurasi dan mengelola tampilan serta pemformatan dokumen yang dibuat dalam bahasa markup. Dalam artian lain, CSS akan memberi HTML (Hypertext Markup Language) fitur tambahan. 

CSS memisahkan konten dari visual representation pada website. Hubungan antara HTML dan CSS sangat erat karena HTML adalah dasar dari sebuah website dan CSS adalah gabungan keseluruhan estetika dari website tersebut.

Fungsi CSS

Cascading Style Sheets dirancang untuk memisahkan konten dokumen dari presentasi dokumen. Hal ini termasuk elemen seperti font, tata letak, dan warna dalam website.

Cascading Style Sheets memungkinkan kamu mengatur seluruh hal pada file yang berbeda. Oleh karena itu, CSS juga berfungsi untuk mengintegrasikan menjadi file CSS di atas markup HTML.

Cara Kerja CSS

Cascading Style Sheets biasanya digabungkan dengan HTML untuk mengubah tampilan dan nuansa halaman website dan user interface. Untuk menggabungkan informasi HTML dan CSS akan ada dua tahap setelah loading dan parsing. 

Di awal, browser terlebih dahulu berubah menjadi Document Object Model (DOM). Kemudian, browser akan menampilkan konten setelah DOM sebagai representasi dari page stored di memori komputer lalu menggabungkan antara konten dan style dokumen yang dibuat.

Selanjutnya, CSS akan menempatkan kode di DOM setelah melakukan parsing pada dokumen HTML yang mengakibatkan DOM akan menggambarkan website secara lengkap. Saat proses parsing, akan ada tautan yang berisi file CSS dan akhirnya file CSS telah selesai dibuat.

Baca juga:

• Mengenal Bahasa Pemrograman HTML dan Fungsi Utamanya
• Mengetahui Elemen Struktur Dasar HTML dan Cara Membuatnya

Jenis-Jenis CSS

Sumber: Pexels

Cascading Style Sheets terbagi atas tiga jenis yang dapat kamu bedakan diantaranya sebagai berikut.

Inline Style Cascading Style Sheets

Inline Style CSS merupakan style sheet dengan properti CSS yang terikat pada komponen di bagian body dan digunakan ketika menata satu elemen HTML. Dengan menggunakan style attribute, seseorang dapat mendefinisikan form style ini dalam sebuah tag HTML. 

Jenis ini umumnya digunakan untuk pratinjau, pengujian modifikasi, dan perbaikan cepat sebuah website. Untuk menerapkannya diperlukan beberapa cara yaitu,

• Aktifkan file HTML ketika Inline Style CSS diterapkan. Hal ini berguna untuk menyisipkan Inline Style CSS ke elemen yang diinginkan.

• Setelah itu, tag dari Inline Style CSS yang akan digunakan harus menambahkan kode CSS; style=”code”.

Salah satu keuntungannya adalah menyisipkan kode CSS, kamu tidak memerlukan pembuatan dan pengunggahan file secara terpisah. Namun, kekurangannya adalah penggunaan jenis ini yang terlalu banyak dapat membuat struktur HTML menjadi tidak teratur.

Embedded Cascading Style Sheets

Jenis berikutnya adalah Embedded CSS yang disebut sebagai CSS internal. Jenis ini memerlukan penyisipan kode CSS ke dalam file HTML yang sesuai dengan halaman website, sehingga pengguna akan menerapkan style CSS. 

CSS akan menata website dengan sangat mudah karena dilakukan dengan CSS internal. Untuk itu, kamu harus menempatkan style CSS pada setiap halaman website. 

Adapun proses yang digunakan untuk menerapkan jenis ini sebagai berikut.

• Arahkan ke tag head> di file HTML setelah dibuka

• Ketik “style type=”text/css”> kemudian dimulai dengan baris setelah itu, tambahkan kode CSS /style> untuk mengakhiri style tag

• Terakhir, untuk membuat perubahan permanen kamu perlu menyimpan dokumen dalam bentuk HTML.

Salah satu kelebihan dari jenis ini adalah mencegah file tambahan untuk diunggah. Namun, kekurangannya adalah jika menambahkan kode ke dokumen HTML akan membuat halaman lebih kecil, serta file akan memuat lebih cepat. 

External Cascading Style Sheets

Jenis terakhir adalah External CSS, yaitu CSS styling yang cocok saat membuat website besar. Sebagai Developer, kamu perlu menautkan website ke file external.css saat menggunakan External CSS. 

Di sisi lain, pengguna dapat menata website lebih efektif dengan CSS yang  menunjukkan bahwa pengguna dapat memilih hanya satu gaya untuk setiap elemen, dan style tersebut akan digunakan di seluruh halaman website. 

Adapun beberapa langkah untuk menggunakan External CSS di antaranya,

• Buat file baru di editor teks, kamu juga bisa menerapkan CSS ke halaman website HTML dan file disimpan .css, simpan, lalu tutup

• Selanjutnya, aktifkan kode CSS di dokumen HTML yang ingin digunakan

• Terakhir, taruh referensi ke file External CSS tepat di belakang elemen title> di bagian head> dalam file HTML, kemudian arsipkan file HTML tersebut.

Keuntungannya menggunakan jenis ini adalah cara yang lebih efektif, terutama untuk menata situs web besar. Sementara kekurangannya adalah ada banyak file CSS yang dikirimkan sehingga membutuhkan waktu lebih lama ketika diunduh.

Ikuti program:

• Bootcamp Front End Developer

#BelajarLebihMudah CSS Bersama Kelas.com

Jadi, Cascading Style Sheets merupakan sebuah bahasa pemrograman yang dapat dikombinasikan dengan bahasa markup atau HTML. CSS memiliki beberapa fungsi untuk mengoptimalkan sebuah website, khususnya untuk user interface. 

Selain itu, ada beragam jenis CSS yang dapat digunakan ketika kamu membuat CSS tersebut. Namun, tidak hanya sampai situ saja, ada banyak hal yang perlu kamu ketahui lebih jauh lagi seputar penerapan CSS, loh.

Penasaran? Yuk, ikuti kelas online belajar CSS lebih mudah bagi pemula bersama Kelas.com. Disini, kamu akan belajar seputar CSS mulai dari pengertian dengan penjelasan yang kompleks, khususnya bagi kamu yang ingin menjadi seorang Data Scientist langsung dari ahlinya. Yuk, grow up your CSS skill sekarang juga!