CSS adalah: Pengertian, cara kerja, fungsi, dan 3 jenisnya

Bagi kamu yang bekerja di bidang front-end atau back-end developer atau pengembangan situs jejaring tentunya akrab dengan hyper text markup language (HTML) dan CSS (Cascading Style Sheets). Keduanya adalah hal utama dalam pembangunan suatu situs jejaring dan tampilan web secara umum. 

Bagi seorang Front-end Developer peran CSS amat penting untuk membuat tampilan sebuah halaman web yang sedang dibangun. Bagi pengunjung situs pun CSS berperan besar agar pengunjung nyaman berselancar di laman sebuah situs. Namun, bagi mereka yang awam dengan teknis pengembangan web tentunya bingung, apa sih CSS itu? Atau, bagaimana sih cara kerja CSS supaya sebuah web menjadi menarik? Nah, untuk itu mari kita simak ulasan berikut ini.

Baca juga: 9 Tips mudah belajar coding untuk pemula yang wajib dicoba

Apa itu CSS?

CSS adalah cascading style sheets yang merupakan salah satu bahasa dalam pngembangan web (Sumber: it-jurnal.com)

Seperti yang telah disinggung di atas tadi, CSS adalah singkatan dari cascading style sheets. Menurut Techterms, CSS dapat diartikan sebagai lembar berjenjang untuk format tata letak halaman web. CSS merupakan sebuah temuan untuk membantu pengembang web yang tadinya hanya bergantung pada HTML sebagai bahasa markup. HTML di awal mula digunakan untuk menandai objek di halaman web seperti tabel, gambar, paragraf, dan sebagainya.

Penggunaan HTML di awal mula perkembangan internet memang bisa dibilang cukup karena saat itu internet hanya digunakan oleh kalangan terbatas untuk berbagi informasi penelitian. Saat itu, proses format halaman amat terbatas dan gaya atau style halaman situs masih monoton. Namun belakangan, setelah internet digunakan luas dan makin berkembang orang-orang mulai berpikir bagaimana mengembangkan halaman situs agar lebih menarik. Hal ini yang lantas membuat HTML menjadi amat terbebani.

Setelah perkembangan pesat internet, halaman web tidak hanya memiliki format tetapi juga warna dan tata letak lain harus dibebankan pada kontrol HTML. Pengembangan web berubah menjadi sesuatu yang sangat kompleks dan sulit ditangani. Tentu saja, peran HTML sebagai alat struktural dan alat bantu desain terasa amat berat. Untuk itulah kemudian CSS dibuat sebagai solusi dari tugas desain dan pemformatan, sedangkan HTML bisa kembali fokus pada tata letak halaman web.

CSS muncul dan lantas dikenal sebagai alat untuk memformat dokumen yang ditulis menggunakan bahasa markup yaitu HTML. CSS juga dikenal sebagai bahasa style sheet yang bekerja sama dengan HTML untuk membangun sebuah halaman situs jejaring.

Jadi, secara umum kita dapat mengartikan HTML sebagai bahasa untuk menggambarkan struktur halaman situs, sedangkan CSS merupakan bahasa untuk menggambarkan halaman situs, termasuk warna, tata letak, dan font. Hal ini memungkinkan seorang pengembang untuk mengadaptasi presentasi ke berbagai jenis perangkat, seperti layar besar monitor, layar kecil tablet atau smartphone, hingga mesin cetak (printer). CSS tidak lagi bergantung pada HTML dan dapat digunakan dengan bahasa markup lainnya.

Pemisahan HTML dari CSS nantinya akan mempermudah pemeliharaan situs sehingga dapat berbagi style sheet di seluruh halaman dan menyesuaikan halaman dengan lingkungan yang berbeda. Pemisahan ini berarti pemisahan struktur (HTML) dari presentasi (CSS). 

Baca juga: 5 Tips menjadi Front-end Developer dan skill yang dibutuhkan

Cara kerja CSS

Contoh skema cara kerja CSS (Sumber: developer.mozilla.org)

CSS bekerja saat sebuah browser menampilkan dokumen, sebabnya pada waktu itu browser harus menggabungkan konten dokumen dengan gaya informasi atau gaya presentasi dalam halaman sebuah situs. Untuk membangun sebuah halaman situs dan membuat presentasinya semenarik mungkin, CSS memiliki beberapa langkah cara kerja yang bisa digambarkan sebagai berikut,

• Load HTML, dalam tahap ini browser memuat HTML dari jaringan
• Parse HTML, pada tahap ini terjadi penguraian HTML untuk membuat document object model (DOM) dan memuat CSS. DOM bertindak untuk mewakili dokumen dalam memori komputer. DOM memiliki struktur seperti pohon dan mencakup elemen, atribut, potongan teks dalam bahasa markup yang menjadi simpulnya atau struktur pohon DOM. DOM dapat membantu pengembang untuk mendesain, men-debug, dan memelihara CSS karena DOM adalah tempat di mana CSS dan konten dokumen bertemu.
• Load CSS, peramban atau browser kemudian memuat sebagian besar sumber daya yang akan ditautkan oleh dokumen HTML, seperti gambar atau video sematan. Dalam hal ini kemudian CSS dimuat dan ditautkan.
• Parse CSS, sama halnya HTML, CSS juga kemudian diurai dengan mengurutkan aturan yang berbeda berdasarkan jenis pemilihnya ke dalam bucket yang berbeda seperti elemen, kelas, ID, dan sebagainya. Penyeleksian ini nantinya menentukan aturan mana yang harus diterapkan ke simpul-simpul DOM.
• Render tree, penyeleksian dalam setiap elemen CSS yang akan diterapkan ke simpul DOM sesuai kebutuhannya tadi disebut render tree. Render tree ini diletakkan dalam struktur yang seharusnya muncul setelah aturan dan penyesuaian simpul dan elemen telah diterapkan.
• Display, setelah penyesuaian tadi berjalan dan aturan dijalankan maka CSS dan DOM akan membentuk tampilan visual sebuah halaman situs yang tertampil di layar.

Baca Juga: Full-Stack Developer: Tugas, kualifikasi, dan proyeksi karier tahun 2021

Fungsi CSS

CSS dapat berfungsi untuk mempercepat pemuatan halaman situs karena pengodeannya sederhana (Sumber: Pexels)

Menurut pengertian dan penjelasan CSS di awal tentunya telah tersirat bahwa CSS berfungsi untuk menyederhanakan kerja HTML dalam membangun sebuah halaman situs jejaring. Namun, jika dijabarkan kembali ada beberapa fungsi CSS yang memang berhubungan langsung dengan proses penyederhanaan kerja HTML tadi. Adapun beberapa fungsi CSS adalah sebagai berikut,

• Memuat halaman situs dengan cepat, peran CSS dalam menyederhanakan kerja HTML membuat proses pengodean akan lebih singkat sehingga hal ini berpengaruh pada penerapan dokumen dan proses pemanggilannya. Proses pembukaan halaman web dan pengunduhan dokumen dari situs akan berjalan lebih cepat daripada adanya atribut tag HTML di setiap dokumen.
• Desain diproses dengan cepat, penggunaan CSS untuk mengerjakan desain halaman web memang terbukti mempercepat proses pembangunan sebuah halaman web. Hal ini dikarenakan pembagian kerja antara HTML yang berperan membangun struktur web dan CSS dengan perannya terfokus pada desain web. Adanya CSS function dapat memungkinkan pengembang menerapkan satu dokumen dapat muncul di berbagai halaman web tanpa penyalinan kode berulang.
• Adaptif terhadap berbagai perangkat, fungsi CSS yang ini telah disinggung sebelumnya yaitu membuat konten halaman menjadi adaptif atau kompatibel terhadap berbagai perangkat atau browser dengan ukuran dan versi berbeda. CSS memungkinkan sebuah dokumen dibuka dalam perangkat terbaru dan versi lamanya, begitu pula berlaku pada versi browser yang dipakai pengguna.

Baca juga: 7 Cara menjadi hacker profesional dan rekomendasi Website-nya

Mengapa perintah CSS diperlukan?

Perintah CSS diperlukan untuk mengatur warna, bentuk dan ketebalan font, serta hal lain menyangkut desain (Sumber: Pexels)

Perintah CSS atau CSS functions diperlukan untuk mengatur warna, ketebalan font, dan lain sebagainya. Adapun berbagai perintah atau CSS functions ini antara lain adalah:

CSS Function	Deskripsi
attr()	Mengembangkan nilai atribut dari elemen yang dipilih
calc()	Memungkinkan pengembang untuk melakukan perhitungan atau penentuan nilai properti CSS
counter()	Mengembalikan nilai saat ini
cubic-bezier()	Mendefinisikan kurva Cubic Bezier
hsl()	Mendefinisikan warna menggunakan model Hue-Saturation-Lightness (HSL)
hsla()	Mendefinisikan warna menggunakan model Hue-Saturation-Lightness-Alpha (HSLA)
linear-gradient()	Menentukan gradien linier sebagai gambar latar belakang, umumnya minimal dua warna di atas dan bawah
radial-gradient()	Menentukan gradien radial sebagai gambar latar belakang, umumnya dua warna dari pusat ke tepi halaman
repeating-linear-gradient()	Mengulangi gradien linier
repeating-linear-gradient()	Mengulangi gradien radial
rgb()	Mendefinisikan warna menggunakan model Red-Blue-Green (RGB)
rgba()	Mendefinisikan warna menggunakan model Red-Blue-Green-Alpha (RGBA)
var()	Menyisipkan nilai properti khusus

Perintah atau CSS function ini amat penting secara umum untuk membangun desain pewarnaan halaman situs. Di sisi lain, HTML juga digunakan untuk membuat elemen yang nantinya didesain dengan CSS. Elemen ini dapat berupa paragraf atau hal lainnya yang akan diberi warna atau pertebalan jenis font. Berikut ini adalah contoh pengodean HTML dalam mendesain sebuah tulisan atau tampilan dari jenis Inline CSS.

Contoh penulisan kode CSS dan hasilnya (Sumber: geeksforfeeks.org)

3 Macam CSS dalam kode HTML

Pengaturan style elemen kode HTML memiliki implementasi yang berbeda-beda (Sumber: Pexels)

Menurut GeeksforGeeks, CSS memiliki tiga tipe yang dipakai untuk mengatur style pada sebuah halaman situs yang mengandung elemen kode HTML. Proses pengodean ini nantinya akan mengatur warna latar belakang halaman situs, ukuran font, kelompok font yang dipakai, warna, dan lain sebagainya. Semua hal ini diterapkan pada properti elemen halaman web agar tampak menarik.

Adapun 3 macam CSS ini adalah sebagai berikut:

1. External CSS

CSS eksternal ini berisi dokumen CSS terpisah yang hanya mencakup style properti dengan atribut-atribut seperti class, ID, heading, dan lain sebagainya. Properti CSS jenis ini ditulis dalam dokumen terpisah dengan ekstensi “.css” dan harus ditautkan ke dokumen HTML menggunakan tag tautan. Hal ini berarti style dalam setiap elemen hanya dapat diatur sekali dan akan diterapkan di seluruh halaman web.

2. Inline CSS

Inline CSS berisi properti CSS di bagian body yang dilampirkan dengan elemen tertentu dalam bentuk sebaris. Jenis style dari CSS ini ditentukan dalam tag HTML menggunakan atribut style khusus. Contoh dari CSS jenis ini dapat dilihat dari contoh pengodean di bagian sebelumnya.

3. Internal CSS

Internal CSS juga dikenal sebagai embedded CSS yang dapat digunakan ketika satu dokumen HTML harus ditata secara unik. Kumpulan aturan CSS harus berada di dalam dokumen HTML di bagian head section. Contoh dari pengodean Internal CSS adalah sebagai berikut:

Contoh pengodean jenis Internal CSS (Sumber: geeksforgeeks.org)

Baca juga: Cara ampuh menjadi Back-End Developer yang andal

Jika disimpulkan, HTML tetaplah menjadi dasar dari pembangunan sebuah halaman web. HTML tetap digunakan untuk menyusun situs web dan aplikasi web. Sedangkan CSS digunakan untuk mengembangkan halaman web dengan menata situs web beserta aplikasinya dalam urusan desain dan penentuan warna maupun font. Pembagian tugas antara HTML dan CSS ini membuat proses pengembangan web lebih efektif dan efisien.

Nah, untuk kalian yang memiliki keahlian di bidang pengodean dan pengembangan web rasanya pemahaman semacam ini sudah pasti mendukung kinerja kalian. Dan tentu saja, potensi kalian amat berguna bagi kehidupan bisnis yang kini bergantung pada proses pemasaran digital melalui web maupun situs jejaring pada umumnya. Peran kalian akan berguna untuk membuat situs perusahaan menjadi menarik dan mengundang prospek konsumen.

Bagi kalian yang memiliki keahlian di bidang pemrograman dan pengembangan web dapat mendaftarkan diri melalui EKRUT untuk membuka lebar kesempatan kalian untuk mengembangkan karier. EKRUT akan membantu menghubungkan kalian dengan perusahaan yang mencari kandidat untuk posisi pengembang web. Tunggu apa lagi, klik tautan di bawah ini dan daftarkan dirimu.

Sumber:

• https://techterms.com/definition/css
• https://www.tentononline.com/importance-of-css/
• https://www.geeksforgeeks.org/types-of-css-cascading-style-sheet/